PNG to SVG converter

What a tracer can and cannot do

A PNG is a grid of pixels. An SVG is a set of shapes. Nothing in the PNG records where the shapes were, so a tracer has to infer them. This one reduces the image to a palette of two to eight colors, walks the boundary of every region with marching squares, thins each outline with the Ramer-Douglas-Peucker algorithm, and writes one path per color using even-odd fill so enclosed regions become real holes.

The output is a stack of flat color shapes, an approximation of the picture rather than a reconstruction of the file it came from.

What traces well

Flat artwork: logos and wordmarks already in solid color, icons, screenshots of solid-color interfaces, flat-filled charts, and scanned line art at two colors.

Photographs do not, and neither do gradients, soft shadows, blur, or text under about ten pixels tall. A gradient has no boundary to find, so the quantizer invents one and you get banding; a photograph becomes hundreds of ragged paths that weigh more than the PNG and look worse. If the result resembles a bad screen print, the input was the wrong kind of image, not the wrong setting.

A trace never gives you the source file back

If the artwork began in Figma or Illustrator, the original has named layers, exact curves, live text and the intent of whoever drew it. A trace has polygons approximating a bitmap, built from straight segments rather than fitted curves, so the edges facet when you zoom in.

When the artwork matters — a logo going on a sign, a mark that will be scaled or edited later — ask whoever made it for the source, or redraw it. Half an hour with the pen tool beats an afternoon cleaning up traced anchor points. Tracing is for when the source genuinely no longer exists. Going the other way is lossless, which is what SVG to PNG is for.

The three settings

Colors sets the palette size. Count the flat colors in the image, add one for the background, and stop there; more only splits antialiased edges into extra layers. Detail controls the simplification. Sharp keeps pixel-level steps, for pixel art and small icons; Smooth strips them, for large shapes; Balanced holds about 99% of the original area with a fifth of the points. Background drops the color that dominates the edges of the image, usually the ground behind a logo.

Your file never leaves your machine

Every step above runs inside this page: decode, palette, boundary walk, path writing. The pixels are read from the file you picked and go nowhere else, so an unreleased mark never reaches anyone’s server. The tool works offline. The cost is the resolution cap: the work grows with pixels multiplied by colors, so anything over 512 pixels on the longest side is downscaled first. The SVG still carries the original width and height, so it drops into a layout at the size you expect.