SVG-to-PDFKit VS svg2pdf.js

PDFKit has a bunch of functions for drawing different shapes and graphics. I have used those before to make a PDF with varied colors, icons, and graphics. Complex templates do require arranging everything from scratch when you use PDFKit, though. I had to place everything carefully and manually in the code to get all the elements aligned properly. It still is pretty low-level unfortunately.

You should check out Vercel's Satori package. You can generate SVGs from JSX without a chromium instance. Pair that with something like https://github.com/yWorks/svg2pdf.js/ and you might be onto something.

If you need to print to exact dimensions, you MUST use PDF. This was what i needed, so I draw everything to an SVG, and made sure that my units were in "pt" (that is 1px = 1/72inch). When creating the PDF, I specified that the units were in "pt" and used https://github.com/yWorks/svg2pdf.js/ to convert the SVG. Note that this has major disadvantages. SVG does not support word wrap by default; you'll have to write your own. You'll also have to get users to specify a paper size in your app. Again, test, test, test. If you want to preview the PDF, not all browsers can display PDF natively (looking at you Android)! Some browsers won't print exact size even in PDF (Android). Some browsers will reduce page margins if printing from an inline iframe preview (Safari). You need annoying workarounds. Like downloading instead of previewing the file on Android, or making sure to always open a new tab on Safari.

I used it with https://github.com/yWorks/svg2pdf.js/ which makes it easy to draw diagrams too.

Hmm, after tinkering around a bit, I think according to https://github.com/yWorks/svg2pdf.js/issues/82 , the mask element in the giraffe SVGs is not supported in the PDF converter. It is just dropped, leafing the qraffe rather qr-less.

But I sadly know neither svg enough to think up an alternative approach, or a JS/TS dev enough to see if there are other libraries.