Converting PDF to SVG for design work

A client sends their logo as a PDF. You need it in Figma, or on a website, or in an icon set. Screenshotting it gives you a blurry raster that falls apart when scaled. What you want is the vector data that is already inside the file.

PDF and SVG are more alike than they appear. Both describe shapes as mathematical paths: move here, curve to there, fill with this colour. Neither stores pixels for vector artwork. That shared model is what makes the conversion sensible rather than a lossy re-interpretation.

An SVG is resolution independent. The same file renders crisply on a 16-pixel favicon and a billboard, because the renderer solves the maths at whatever size you ask for. A PNG has a fixed pixel grid and softens the moment you exceed it.

SVG is also editable. Open it in Illustrator, Figma, or Inkscape and you get real paths you can recolour, reshape, and restyle. And because it is XML, you can style it with CSS and animate it in a browser — a logo that changes colour on hover is a few lines of CSS on an SVG, and impossible on a PNG.

For simple graphics, SVGs are usually smaller too. A flat two-colour logo can be a fraction of the size of a PNG that looks acceptable at retina resolution.

You get one SVG per page, at the page dimensions, containing the page artwork with a selectable text layer positioned over it. Text stays selectable and searchable rather than becoming an opaque image, which matters if the diagram has labels you may need to edit or a screen reader needs to announce.

If the PDF has no text layer at all, the SVG contains the artwork only, and the tool tells you so rather than leaving you to discover it.

1. 1
   FigmaDrag the SVG straight onto the canvas. It arrives as a frame of editable vector layers. Ungroup to get at individual paths.
2. 2
   IllustratorFile → Open. You can also open the PDF directly, which sometimes preserves more, but SVG is the more predictable route if the file is destined for the web anyway.
3. 3
   InkscapeSVG is its native format, so it opens with full fidelity and is a good free option for cleaning up paths.
4. 4
   A web pageInline the SVG markup for CSS control, or reference the file with an img tag if you just need it displayed. Inline is what you want for hover states and theming.

If the PDF contains a photograph, that photograph is a raster image and stays raster inside the SVG. Vector conversion cannot invent path data for pixels — a photo is pixels by nature. Complex effects like PDF blend modes and soft masks also do not always translate cleanly, since the two formats support overlapping but not identical feature sets.

The practical rule: logos, icons, diagrams, and charts convert well. Photographs and heavily-effected artwork are better handled by keeping the original.