svg2pdf.js

svg2pdf.js is a pure-JavaScript library that renders SVG documents into PDF, running entirely in the browser on top of jsPDF. Rather than rasterizing, it walks the SVG DOM and translates shapes, paths, text, gradients, patterns, clip paths, and transforms into native PDF vector drawing operations, producing crisp, scalable output that stays sharp at any zoom level.

Built and maintained by yWorks, the diagramming experts, it extends the jsPDF document with an .svg() method so you can drop an SVG element straight into a generated PDF. Since version 2 it works with the upstream MrRio/jsPDF rather than a fork, making it a drop-in companion for client-side PDF generation from charts, diagrams, and other vector graphics.

What You Get

• An .svg() extension method on jsPDF documents for embedding SVG as PDF vectors
• Vector-fidelity conversion of shapes, paths, text, gradients, patterns, and clip paths
• Support for SVG transforms, styling, and coordinate positioning within the page
• Browser-only operation with no server-side rendering required
• TypeScript typings and compatibility with upstream jsPDF (2.x+)

Common Use Cases

• Exporting charts and diagrams rendered as SVG to downloadable PDFs client-side
• Generating print-ready vector PDFs from D3, chart libraries, or hand-authored SVG
• Adding SVG logos, figures, or graphics into programmatically built jsPDF documents
• Producing scalable PDF output that stays crisp without rasterizing the source SVG

Under The Hood

Architecture - The entry point src/svg2pdf.ts registers an svg method on the jsPDF prototype and drives a recursive traversal of the SVG DOM. Each SVG element type is handled by a dedicated node class under src/nodes/, with cross-cutting concerns split into src/context/ (rendering context, coordinate/transform state), src/fill/ (gradients and patterns), and src/utils/. parse.ts and applyparseattributes.ts normalize attributes and styling before nodes emit the corresponding jsPDF vector drawing calls. Text handling (textchunk.ts) and markers (markerlist.ts) are handled specially to preserve layout.

Tech Stack - Written in TypeScript, bundled with Rollup, and published as ESM/UMD in dist/. Its one runtime peer is jsPDF (2.x+); it no longer relies on a jsPDF fork. Ships .d.ts typings.

Code Quality - The per-node-type class structure keeps element handling isolated and readable, and the repo has a test/ suite plus CI (GitHub Actions). TypeScript provides type safety across the rendering context. The main inherent complexity is SVG’s breadth — edge cases in filters and advanced features are the usual sources of divergence.

API Design - Extremely low-friction: import 'svg2pdf.js' then doc.svg(element, { x, y, width, height }) returning a promise. Reusing jsPDF’s document object means users already familiar with jsPDF need almost no new concepts, and the online playground lets developers try conversions before integrating.