SVGtoPDF function distorting text

[i-faraz-ahmed]

I am converting svg to pdf via this package and for pdf I am using pdfkit. The issue I am facing is of text. When I convert svg to PDF via SVGtoPDF function, I get distorted text on all pdf Following are my SVG & PDF files. You can see that text is rendering absolutely fine when I open SVG file so, there seems to be no issue in svg.

I have attached my code as well. Basically what I am doing is selecting div from DOM and converting it to SVG via some helper functions & then I pass that svg element to SVGtoPDF function.

Am I doing something wrong here ?

Pls guide me, a newbie here and struggling to find any solution since days.. :(

pdf.pdf

` let svg: any; svg = await getBoardAsSvgElement(editor); svg = svg.cloneNode(true);

let widthInPixels: any = document.querySelector('.tl-container')?.clientWidth;
let heightInPixels: any = document.querySelector('.tl-container')?.clientHeight;
widthInPixels = Math.floor(widthInPixels);
heightInPixels = Math.floor(heightInPixels);
svg.setAttribute('width', `${widthInPixels}`);
svg.setAttribute('height', `${heightInPixels}`);
const widthInPoints = convertPixelsToPoints(widthInPixels),
  heightInPoints = convertPixelsToPoints(heightInPixels);

let doc = new PDFDocument({ size: [widthInPoints, heightInPoints] });

SVGtoPDF(doc, svg);
let stream = doc.pipe(blobStream());
stream.on('finish', () => {
  let blob = stream.toBlob('application/pdf');
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'test' + '.pdf';
  link.click();
});
doc.end();` 

[i-faraz-ahmed]

@alafr

[MatthewAlner]

I am having the same issue it looks like it's adding spaces between the tspans 🤔