Exporting SVG to PDF in JavaScript

For a project that I was working on recently, I had to convert SVG to PDF on the client-side using JavaScript. There are a number of solutions for the server-side, but on the client-side, the choices are more limited.

For the following strategy, it requires the browser to support data:image/svg+xml;... data URIs. So unfortunately, this will not work with IE, but should work with most major modern browsers.

Strategy

  • Get the SVGElement from the DOM, or generate one
  • Use saveSvgAsPng to convert SVGElement to a JPEG using canvas
  • Use jsPDF to create a jsPDF object, then insert the JPEG image
  • Export the jsPDF object as a PDF

Though alternatively, you could use PDFKit depending on your requirements.

Code

· @haochi