PNG to SVG

This tool traces the shapes in your image and writes them out as vector geometry: path and polygon data with real coordinates. The result scales to any size without softening, and every shape can be selected and reshaped in Illustrator, Inkscape, Affinity or Figma. It runs entirely inside this browser tab, so the image is never uploaded.

Most free PNG to SVG converters do not vectorise anything

Search for a PNG to SVG converter and you will find dozens of sites that hand you a file back in under a second. That speed is the tell. Genuine tracing means quantising colours, finding region boundaries, fitting curves to them and writing out coordinates — real work that takes a moment even on a fast machine.

What those sites usually do instead is wrap your PNG in three lines of XML: an svg element containing a single image element whose source is your original file encoded as base64 text. The extension changes to .svg and nothing else does. Every pixel is still a pixel. Enlarge it and it blurs exactly as before. Open it in Illustrator and there are no paths to edit, just one locked rectangle containing a photo. The file is usually about 35 percent larger than the PNG you started with, because base64 encoding adds overhead.

It is not a bug and it is not incompetence. Wrapping is free, needs no processing, and produces something that technically has the right file extension and opens in a browser. It just is not a vector.

How to check any converter in ten seconds

An SVG is a text file. Right-click the result, open it with any plain text editor — Notepad, TextEdit, VS Code — and read the first few lines. That is the whole test, and it works on output from any tool including this one.

If you see path or polygon elements followed by long strings of numbers, you have real geometry. Those numbers are coordinates. If instead you see an image element, or the letters base64, or a data URI beginning with the words data colon image, then the file contains your original bitmap and nothing was traced.

There is a second check that needs no text editor: open the file in a browser and zoom in hard. Real vector edges stay crisp at any magnification because they are recomputed each time. A wrapped bitmap goes soft and blocky at exactly the point the original PNG would. This page shows both panes side by side at up to eight times magnification so you can watch the difference happen.

What real tracing actually does

First the image is reduced to a small set of colours. A photograph may contain two hundred thousand distinct colours; a traceable logo needs perhaps six. This step is called quantisation, and it decides how many separate shapes the drawing will end up with.

Next, every group of touching same-colour pixels becomes a region, and the outline of each region is followed along the boundaries between pixels. That produces an exact but very jagged staircase outline, with one corner per pixel step. The staircase is then simplified: points that add no information are dropped, and gentle bends are replaced with quadratic curves while genuine corners are kept sharp. Finally each region is written out as one path element, with any holes inside it punched out using the even-odd fill rule — that is how the middle of a letter O stays empty.

Adjacent shapes share their border, so both sides of it need to be simplified to the same line. If they are not, you get hairline white cracks between colours. The simplification here is written to be independent of direction: the starting point of each outline is chosen by a rule that does not depend on which way the outline was traced, ties are broken by coordinate rather than by position in the list, and the curve construction produces the identical curve when walked backwards. Two shapes that meet along a border therefore simplify it the same way from both sides.

Which images vectorise well, and which do not

Vectorising works when an image is made of flat areas with clear edges: logos, wordmarks, icons, line art, inked drawings, signatures, stencils, maps, simple diagrams, screenshots of solid-colour interfaces. For those, the traced SVG is often smaller than the PNG as well as infinitely scalable, because a shape described by twenty coordinates replaces thousands of pixels.

It works badly on photographs, and no tool changes that — it is a property of the format, not a limitation of the software. A photograph has no flat regions and no clean edges, so the tracer is forced to invent thousands of small paths to approximate a continuous gradient. The SVG comes out several times larger than the JPG, takes a long time to render, and looks like a poster print rather than a photo. If a photograph is detected here, this page says so and points you at PNG compression instead, which is almost always what was actually wanted.

Anti-aliased edges are the middle case. Text and logos exported from a design tool have semi-transparent pixels around every edge to make them look smooth. Those fringe pixels become thin extra shapes of their own. Raising the despeckle setting removes them; lowering the colour count merges them into their neighbours.

Tuning the four settings

Colours sets how many entries the palette has. Start low. A two-colour logo traced at eight colours gains six shades of edge fringe you did not ask for. Raise it only when distinct flat colours in the original are being merged together.

Smoothing controls two things at once: how aggressively redundant points are discarded, and how large a bend has to be before it counts as a corner worth keeping sharp. At zero you get the raw staircase, faithful to the pixel grid and useful for pixel art. Around five, diagonal staircases become straight lines and circles become curves while ninety-degree corners stay square. Push it high for hand-drawn artwork where nothing should be sharp.

Despeckle discards shapes smaller than the given number of pixels, folding them into whichever neighbour surrounds them most. This is the setting that cleans up scan noise, JPEG artefacts and anti-aliasing fringe. Keep transparent background decides whether transparent pixels stay empty in the output or get filled with white; turn it off if the result will sit on a white page anyway and you would rather have a solid backdrop.

No upload, no limits, no account

Tracing is pure computation, so there is no reason for it to happen on somebody else's server. This page does it with plain JavaScript in a background worker, which is why the progress indicator moves and the cancel button works: the page stays responsive while your processor does the tracing.

Nothing is transmitted. Open your browser developer tools, switch to the Network tab, and trace an image — you will not see a request carrying your file, because the page is not permitted to make one. There is no file size cap beyond your own device memory, no tasks-per-hour limit, no watermark and no sign-up. Very large images are downsampled before tracing to keep the page responsive, and the SVG is still written at the original dimensions, which costs nothing in quality because vector paths do not have a resolution.

PNG is the format people search for, but the tracer only cares about pixels, so JPG, WebP, GIF and BMP work exactly the same way. JPG inputs benefit from a higher despeckle value, because JPEG compression leaves faint blocky texture in flat areas that would otherwise become extra shapes.