Convert PNG to SVG

PNG is lossless, so nothing has been smeared before the tracer sees it: the edges in the file are exactly the edges the design tool drew, with only the intended anti-aliasing along them. That is the difference between this page and every other source in the tracing matrix, and it shows up directly in the result.

Measured on this site’s own badge sample, a flat graphic at 480 by 320 pixels: 7,136 bytes of PNG traced to 2,481 bytes of SVG at the default eight colours, in five paths. Smaller than the original and now scalable to a shop sign — the case the feature exists for. Five paths is also the number to watch. When a trace of flat artwork comes back as five or twelve or thirty shapes, it worked; when it comes back as eight hundred, the input was not flat artwork and the next two sections explain which kind it was.

Almost every PNG that arrives on this page was exported from something. The Figma file, the Sketch document, the Illustrator artboard or the Canva design that produced it is a genuine SVG source rather than a reconstruction, and it exports one in a menu — cleanly, with real curves, real text and named layers.

It is worth five minutes of looking because the difference is permanent. A traced logo has outlines where the original had letters, so the wordmark can never be re-set in the brand typeface, and the curves are fitted approximations that a designer will spot at a glance. Trace when the account is closed, the agency is gone, the file is on a dead laptop, or the only surviving copy of the mark is the PNG on the old website. Those are common enough that this page exists; they are still the second-best route.

The tracer reads all four channels, so a cut-out logo on a transparent background does not come back on a white square. The regions that were transparent are emitted as paths carrying an opacity of zero, and the visible artwork sits on top of them, which behaves the way the PNG did when it is dropped onto a coloured page.

The mechanism is worth knowing because it is not an alpha channel. SVG has no alpha channel to have; it has shapes with opacity, and a zero-opacity rectangle covering the canvas is what a transparent background becomes. Two consequences follow. Semi-transparent pixels — the soft edge of a drop shadow, a 40 % overlay — are quantised into a small number of opacity steps rather than a smooth ramp, so a soft shadow bands. And the invisible background path is still in the file, so deleting it in Inkscape is usually the first tidy-up.

Screenshots are the most common PNGs in existence and the least suitable thing to trace. Anti-aliased text is a cluster of slightly different greys around every stroke, and each of those clusters becomes its own small path, so a paragraph turns into thousands of shapes that together approximate slightly wrong text.

The measurement on this site’s screenshot sample is blunt: a 2,608-byte PNG became 166,255 bytes of SVG in 871 paths at eight colours — sixty-four times the size, for a result that is worse in every way including legibility. If the point was the words, the PNG to TXT conversion reads them with Tesseract. If the point was a crisp picture of an interface, the PNG already is one and is a fraction of the size of anything traced from it.

Four for a single-colour mark or a two-tone logo, eight for a flat illustration with a few fills, sixteen where there is real shading, thirty-two only when something is visibly missing at sixteen. Eight is the default and it is the right first attempt for artwork that came out of a design tool.

The setting does not behave the way a quality slider does, and the badge measurements show why: 3,900 bytes at four colours, 2,481 at eight, 10,263 at sixteen and 10,168 at thirty-two. More colours produced a *smaller* file at one step and a four-fold jump at the next, because the quantiser chooses a fresh palette each time and a palette that happens to align with the artwork produces fewer, larger regions. Trying two settings takes fifteen seconds and settles it better than any reasoning about it does.

Every design tool anti-aliases on export, so even a hard-edged logo has a one- or two-pixel ramp of intermediate colour along every boundary. Those ramps are the specks a trace leaves behind, and the detail setting is what decides whether they survive. Smooth discards any shape below sixteen pixels and fits outlines loosely; sharp keeps shapes down to two pixels and follows the grid closely; balanced sits between and is the default.

For a logo, smooth is usually the right answer and the tidiest starting point. Sharp earns its place on a technical drawing or a pixel-precise icon where a one-pixel rule is meaningful content rather than an artefact. What the tracer never does is blur the image first: the blur radius is fixed at zero, because pre-blurring reduces the speck count by softening exactly the hard edges that were the only reason to trace a logo.

Anything longer than 1,600 pixels on its longest edge is scaled down before tracing. That is a cost ceiling rather than a quality one — tracing cost grows with the number of edges, and a large image has edges everywhere — and it costs the output nothing, because a logo traced at 1,600 pixels and the same logo traced at 4,000 render identically at any size.

The direction that does matter is the other one. A 200-pixel favicon export has so few pixels along each curve that the fitted outlines round off corners visibly, and no setting recovers that. If anything in your possession can still export the artwork, ask it for something in the region of 1,600 pixels wide. An @2x or @3x asset already sitting in a build folder is usually the best thing available and is worth digging out before converting the @1x.

What comes back is a stack of filled paths with solid fills and matching one-pixel strokes. No groups, no layer names, no text elements, no gradients, no symbols. A wordmark is outlines of letters, not letters; a circle is a sequence of fitted curve segments, not a circle; a gradient has been reduced to bands of flat colour.

For most of what this page is used for that is acceptable, because the destination is a cutter, an engraver, a large print or a placeholder that has to stop going soft. It is not acceptable as a replacement master. If the mark is going back into a brand system, treat the trace as a reference to redraw over rather than as the recovered original — the underlying shapes are usually a few circles and a typeface, and redrawing them takes less time than cleaning up a trace of them.

If the file is a photograph, no tracer will help and the PNG to JPG or PNG to AVIF routes are what the situation actually calls for. If it is a screenshot and the goal is a smaller file, PNG is already close to optimal for flat interface colours; AVIF beat it on this site’s samples only on the photograph, not on the screenshot.

If the goal is a favicon, PNG to ICO is the pair that produces the file a browser asks for, and it does not need vectorising first. And if the goal was a print-ready file at a fixed size, PNG to PDF or PNG to TIFF hands the printer something they will accept without any redrawing at all. Tracing is worth doing when the artwork genuinely has to scale or has to be cut, and is worth skipping the rest of the time.

Decoding, scaling and tracing all happen in your browser. Nothing is uploaded, there is no account and there is no daily limit — which matters on this page in particular, because the artwork people are trying to recover is nearly always a logo somebody owns and would rather not post to a stranger’s server.

The tracer is imagetracerjs: 46 KB of pure JavaScript under the Unlicense. It is not the strongest option available. potrace and autotrace fit cleaner curves and are GPL; VTracer is better than either and properly licensed, but its only browser packaging declares no licence at all, which this project treats as blocked rather than permissive. On the flat exports this page is written for, the gap between them is small enough that the licence decided it.