How to convert an svg diagram to a pdf
- Step 1Export the diagram as SVG — In draw.io use File → Export as → SVG; in Lucidchart use Download → SVG; for Mermaid use the SVG export. Crop the export tightly so the viewBox hugs the diagram — extra whitespace just becomes white margin in the PDF.
- Step 2Flatten interactive layers first — Linked layers, hover states, and clickable links are interactive features of the editor — the SVG export already flattens them to static geometry, and the PDF reflects that flattened snapshot. Confirm the exported SVG looks right before converting.
- Step 3Drop the SVG into the converter — Load the SVG to PDF tool and add the single
.svg. Only.svgis accepted; the tool handles one file per job. - Step 4Let it convert automatically — No options exist, so conversion runs immediately: rasterise at 2×, JPEG-encode, place on one page sized to the viewBox. You won't be offered landscape/portrait or a custom paper size.
- Step 5Verify label legibility — Open the PDF and zoom to where the smallest labels are. If text is fuzzy, the source viewBox was small — re-export the diagram at a larger canvas size and convert again (see edge cases).
- Step 6Attach or embed the PDF — Download
<name>.svg-to-pdf.pdfand attach it to the ticket, or embed it. To insert into Word, use Insert → Object → Create from File and pick the PDF.
Diagram source → what the PDF captures
How common diagram exports behave through the 2×-JPEG-viewBox pipeline.
| Source | Captured faithfully? | Notes |
|---|---|---|
| draw.io / diagrams.net SVG | Yes (static geometry) | Linked layers and clickable links are already flattened in the SVG export |
| Lucidchart SVG | Yes | Keep the export tight; large empty margins become white space on the page |
| Mermaid SVG | Yes, but check fonts | If Mermaid used a web font, convert text to paths or embed the font — <img> rendering won't fetch external fonts |
| Figma frame exported as SVG | Yes | Effects like drop shadows render to the extent the browser's SVG support handles them |
| Interactive / clickable diagram | No (static only) | Hyperlinks and hover behaviour are lost — the PDF is a flat image snapshot |
Fixed conversion behaviour (no settings)
Everything here is hard-coded; there is no options panel for this tool.
| Property | Value | Why it matters for diagrams |
|---|---|---|
| Render scale | 2× | Determines label sharpness; legibility ultimately follows the source viewBox size |
| Background | White (#ffffff) | Dark-themed diagram exports get a white page behind them — re-export in light mode if needed |
| Encoding | JPEG q=0.92 | Thin lines and small text can soften slightly; flat node fills stay clean |
| Page size | viewBox → width/height → 612×792 pt | Wide diagrams produce wide pages; no auto-fit to A4/A3 |
| Pages | Always 1 | A long flowchart is one tall/wide page, not split — split manually before export if you need pagination |
Cookbook
Real diagram scenarios and the resulting page, given the fixed pipeline.
Standard flowchart with a sized viewBox
A typical draw.io export with a viewBox produces a proportional, legible page.
Input SVG header: <svg viewBox="0 0 820 560" ...> Result: PDF page: 820 x 560 pt (landscape-ish) Image: 1640 x 1120 px JPEG (2x) Labels: crisp at normal zoom
Wide swimlane diagram
A very wide architecture diagram keeps its width — it is not auto-fit to a page.
Input SVG header:
<svg viewBox="0 0 2400 700" ...>
Result:
PDF page: 2400 x 700 pt (one very wide page)
Viewing: fine on screen; for paper, scale-to-fit
when printing or run pdf-resize afterwardsDense diagram with tiny labels
If the viewBox is small but the diagram packs lots of text, 2× may not be enough — re-export bigger.
Symptom: labels fuzzy in the PDF
Cause: viewBox="0 0 300 200" with 9px text
Fix: in the editor, increase the canvas / zoom so the
SVG exports with a larger viewBox (e.g. 1200 x 800),
then convert -> sharper textDark-theme diagram export
A dark-background diagram lands on a white page behind it, which can look odd around the edges.
Input: white nodes/edges on a dark canvas (no bg rect)
Result: white page shows through transparent regions
Fix: export the diagram in light theme, OR add an
explicit dark background rect to the SVGMermaid diagram using a web font
Mermaid often styles text with a CSS font that isn't embedded; it won't load during conversion.
Risk: font-family from external @font-face url(...)
-> not fetched -> system-font fallback
Fix: render Mermaid with text-as-path, or post-process
the SVG to embed the font as a data URIEdge cases and what actually happens
PDF text is not selectable or searchable
By designThe diagram is rasterised to a JPEG, so labels become part of the image — you can't select, search, or copy the text. That's inherent to this raster pipeline. If you need searchable text, keep the original SVG, or run the resulting image through OCR separately.
Small viewBox with dense labels looks fuzzy
Re-export largerLegibility is bounded by the source viewBox times the fixed 2× scale. A 300×200 viewBox crammed with 9px labels will look soft. Increase the canvas/export size in the diagram tool so the SVG ships with a larger viewBox, then convert again for sharper text.
Wide diagram isn't paginated
Single pageA wide or tall diagram becomes one large page — the tool never re-flows a diagram across multiple pages. It views fine on screen; for paper, use your reader's scale-to-fit when printing, or resize the page with pdf-resize.
Dark-theme diagram on a white page
Flattened to whiteThe canvas is filled white before drawing, so a dark-themed export with transparent regions shows white where the dark canvas should be. Re-export the diagram in light theme, or add an explicit dark background rectangle to the SVG before converting.
Clickable links and layers are lost
FlattenedHyperlinks, interactive layers, and hover states are editor features; the SVG export already flattens them, and the PDF is a flat image snapshot. If link targets matter, document them separately or deliver the source file.
Web-font labels fall back to a system font
Font fallback<img>-based rendering doesn't fetch external fonts, so Mermaid/Lucidchart text in a non-embedded font renders in a fallback. Convert text to paths in the export, or embed the font as a data URI inside the SVG.
No viewBox / no dimensions
Defaults to LetterWithout a viewBox or width/height, the page defaults to 612×792 points and the diagram is scaled to fill it, distorting proportions. Most diagram exporters include a viewBox, but if yours doesn't, add one before converting.
Non-SVG file dropped
RejectedOnly .svg (MIME image/svg+xml) is accepted. A draw.io .drawio, a PNG export, or a PDF will be rejected with a message naming the expected .svg type. Use your tool's SVG export, not the native project file.
Frequently asked questions
Will the labels in my diagram stay sharp?
They stay sharp when the source viewBox is reasonably large, because the tool renders at 2×. If your diagram has a small viewBox but dense, tiny text, the labels can look soft. The fix is to export the diagram at a larger canvas size so its SVG viewBox is bigger, then convert again — that gives the 2× render more pixels to work with.
Can I select or search the text in the PDF?
No. The diagram is rasterised into a JPEG image, so all labels become pixels — they aren't selectable or searchable. This is inherent to how the tool works. If selectable text is essential, keep the original SVG or run the image through an OCR step afterwards.
Can I pick the paper size or orientation?
No options are offered. The page size comes from the SVG's viewBox (or width/height), so a landscape diagram already produces a landscape page. To force a specific paper size after conversion, run the PDF through pdf-resize.
My diagram is very wide — will it split across pages?
No. A wide diagram becomes a single wide page; the tool doesn't paginate. On screen that's fine. For printing, use scale-to-fit in your PDF reader, or split the diagram in the source editor into sections, export each as SVG, convert each, and combine with pdf-merge.
Why did my draw.io links stop working?
Clickable links and interactive layers are draw.io features. The SVG export flattens them to static geometry, and this tool captures that flat snapshot as an image — so there are no live links in the PDF. Document important link targets separately if reviewers need them.
Will a dark-themed diagram look right?
The page background is always white. A dark-theme export with transparent regions will show white where the dark canvas would be. Re-export the diagram in light theme, or add an explicit dark background rectangle to the SVG before converting.
My Mermaid diagram's font looks generic — why?
The SVG renders through an <img>, which can't load external web fonts. Mermaid text styled with a non-embedded font falls back to a system font. Render Mermaid with text converted to paths, or embed the font in the SVG as a data URI.
Can I convert several diagrams into one PDF?
Not in this tool — it converts one SVG to a one-page PDF at a time. Convert each diagram separately, then merge the resulting PDFs with pdf-merge into a single multi-page document.
Is the output editable vector?
No — it's a high-resolution raster image embedded in a PDF, not editable vector paths. For an editable diagram, keep and share the source file (draw.io/Lucidchart/Figma) or the original SVG.
Are my internal diagrams uploaded?
No. Conversion runs entirely in your browser using pdf-lib; the SVG never leaves your machine — appropriate for internal architecture, security, and infrastructure diagrams.
What file name does the download use?
The output is saved as <your-svg-name>.svg-to-pdf.pdf. Rename it to your ticket or doc convention afterwards.
How large can the diagram SVG be?
Free tier allows up to 2 MB per job; Pro allows up to 50 MB. Most diagram SVGs are well under that, but a complex Figma export with embedded raster fills can grow — optimise the SVG if you hit the limit.
Privacy first
All PDF processing runs locally in your browser using PDF-lib and pdf.js. No file is ever uploaded — only metadata counters are saved for signed-in dashboard stats.