Docento.app Logo
Docento.app
Multiple monitors with code
All Posts

How to Convert a PDF to SVG: For the Web, for Editing, and for Embedded Use

April 25, 2026·7 min read

PDF and SVG are both vector formats. Both can describe shapes, paths, fonts, gradients, and transformations at arbitrary precision. The difference is what they are optimized for: PDF for fixed-layout documents, SVG for web-native vector graphics. Converting PDF to SVG is useful any time you want to embed a vector PDF in a web page, edit it in a vector editor, or break a multi-page PDF into individual scalable graphics. This guide covers the practical options.

Why convert PDF to SVG

A few good reasons:

  • Web embedding. SVG is rendered natively by every modern browser, scales perfectly, and can be styled and animated with CSS. PDF requires an embed or a viewer.
  • Vector editing. Tools like Inkscape, Illustrator, and Affinity Designer open SVG directly. Editing a PDF in these tools usually goes through SVG anyway under the hood.
  • Logos and diagrams. A logo distributed as a single-page PDF should be available as SVG for use on websites, in apps, and in marketing materials.
  • Reduced complexity. A simple vector PDF can become a smaller, cleaner SVG when you only need the geometry, not the full PDF infrastructure.
  • Print-to-web pipelines. Designers often produce a PDF master and need SVG derivatives for web.

What converts cleanly (and what does not)

Converts cleanly:

  • Vector graphics with simple paths, shapes, and gradients
  • Logos, icons, schematics, line art
  • Single-page diagrams
  • Mathematical and chemical drawings

Converts with caveats:

  • Multi-page PDFs (one SVG per page)
  • Text-heavy pages (fonts may be converted to paths, losing selectability)
  • PDFs with complex blends or transparency (SVG supports these but rendering varies)

Does not convert well:

  • Scanned PDFs (the content is a bitmap; SVG ends up wrapping the bitmap)
  • PDFs with embedded interactive elements (forms, JavaScript, multimedia, SVG has no equivalent)
  • Very large PDFs (each page becomes a separate SVG, with significant total size)

CLI tools that produce SVG

The strongest tools are open-source CLIs:

  • pdf2svg, small dedicated converter. pdf2svg input.pdf output.svg 1 extracts page 1 as SVG. Lightweight, fast, focused.
  • pdftocairo -svg input.pdf output.svg (poppler-utils). Quality is generally excellent for vector PDFs. See poppler-utils introduction.
  • mutool draw -F svg -o output.svg input.pdf (MuPDF). Different rendering engine; sometimes produces cleaner SVG for complex PDFs. See MuPDF introduction.
  • Inkscape CLI. inkscape --export-type=svg input.pdf, Inkscape converts PDFs to SVG with high fidelity, especially for designer-authored content.
  • Ghostscript. gs -dNOPAUSE -dBATCH -sDEVICE=svg -sOutputFile=output.svg input.pdf. Solid baseline. See Ghostscript introduction.

For one-off conversions, Inkscape is hard to beat. For batch jobs, pdftocairo or pdf2svg are faster and more scriptable.

GUI tools

If you prefer a click-through workflow:

  • Inkscape. File → Open → select PDF → choose page → SVG appears in editor. Then File → Save As → SVG.
  • Adobe Illustrator. Opens PDFs and saves as SVG. Excellent rendering, paid product.
  • Affinity Designer. Similar workflow to Illustrator.
  • Online converters. Several free options. Use only for non-sensitive material, see are online PDF editors safe.

How fonts get handled

This is the trickiest part of any PDF-to-SVG conversion.

A PDF may have its fonts:

  • Embedded as subsets (the most common case for production PDFs)
  • Embedded fully (the entire font is included)
  • Referenced but not embedded (rare and problematic)

SVG has two ways to handle fonts:

  • Reference the font by name (font-family: "Helvetica Neue";). Lightweight, but the user's device has to have the font installed.
  • Convert text to paths. Every character becomes a <path>. The visual result is identical regardless of installed fonts. Larger file size, no selectable text, no accessibility.

Different tools default to different choices. pdftocairo tends to embed fonts as referenced. Inkscape often converts to paths. pdf2svg is somewhere in the middle. If selectable text matters for your use case (search, accessibility, copy-paste), force font references. If pixel-perfect rendering matters (logos, advertising), convert to paths.

Multi-page PDFs

SVG is single-page by nature. Converting a multi-page PDF produces one SVG per page. Workflow:

pdftocairo -svg input.pdf output  # writes output-1.svg, output-2.svg, ...

If you want a "combined" SVG, embed each page-SVG inside a wrapper SVG with <svg viewBox="..."> per page positioned vertically. Useful for inline scrolling viewers.

SVG output tuning

Default output is often verbose. Common cleanup steps:

  • svgo, Node.js SVG optimizer that strips redundant attributes, merges paths, simplifies precision. Standard tool for production SVG. Run svgo output.svg after conversion.
  • scour, alternative SVG optimizer with similar goals, written in Python.
  • Inkscape's "Save As Optimized SVG", built-in cleanup pass.

These typically shrink raw conversion output by 30-70% with no visible difference.

When the PDF contains rasters

A PDF "vector" might still include raster images for photos or scanned content. SVG can embed raster images as base64-encoded <image> elements. This preserves the visual but loses any scaling benefit for that content.

If the PDF is mostly raster (a scanned document), SVG conversion produces a giant SVG wrapping a giant image, strictly worse than the original PDF or a direct PNG export. For scanned content, see how to convert a PDF to image instead.

Common gotchas

  • Hidden objects. Some PDFs have layers (Optional Content Groups) that are hidden by default. Some converters render them anyway, exposing content that was meant to be hidden. Strip layers before conversion if confidentiality matters.
  • Color profiles. PDFs may carry ICC color profiles that SVG does not represent natively. Colors can shift slightly. For brand-critical materials, validate the output against the source visually.
  • Transparency. Complex transparency (e.g., layered blends in InDesign) does not always survive conversion. Flatten transparency in the PDF first if you see artifacts. Or see how to flatten a PDF.
  • Bounding box. SVG output sometimes uses the wrong viewBox, leaving whitespace around the content or cropping it. Adjust the viewBox attribute after conversion if needed.
  • Clipping paths. Some converters bake clip paths into raster regions, defeating the point of vector conversion. Inkscape and pdftocairo handle clip paths more cleanly than older Ghostscript versions.

Practical recipe for a logo or icon

If you have a single-page PDF logo and want a usable SVG:

  1. inkscape --export-type=svg --export-text-to-path=true logo.pdf -o logo.svg
  2. svgo logo.svg -o logo.min.svg
  3. Open logo.min.svg in any browser to verify rendering
  4. Inspect the file in a text editor; if it is under 5 KB and renders cleanly, you are done

For a multi-page diagram set, swap step 1 for pdftocairo -svg input.pdf output.

When SVG is the wrong answer

A few cases where you should not convert:

  • The PDF is multi-page and needs to stay as a single document. Use PDF.
  • The PDF is mostly raster. Export to PNG or JPEG.
  • The PDF includes forms or interactivity. SVG has no equivalent.
  • The PDF is huge. Each page becomes a separate SVG; the total size and DOM cost can be worse than the original PDF.

For these, stay with PDF and optimize differently, for example, see reduce PDF file size.

Takeaway

Converting PDF to SVG works well for single-page vector content and gets harder for everything else. Use pdftocairo or pdf2svg for batch CLI conversion, Inkscape for one-off design work, and svgo to polish the output. Decide upfront whether you need selectable text (reference fonts) or pixel-perfect rendering (convert to paths). For the upstream work, extracting a specific page from a multi-page PDF before conversion, or cleaning up the source, use Docento.app and then pipe the trimmed PDF into your SVG converter of choice.

Related Posts