How to convert a PNG to SVG properly

The two things people mean by "PNG to SVG"

A PNG is a grid of pixels. An SVG is a list of shapes. Turning one into the other is not a format change, it is a reinterpretation: something has to decide where the boundaries in that pixel grid are and draw outlines along them. That decision is called tracing, and it is the whole job.

The shortcut is to skip the decision. An SVG can contain an <image> element holding a base64 PNG, and a file like that is a valid SVG that opens everywhere. It is also still a bitmap. It blurs at 400%, it cannot be recoloured, a cutter cannot follow it, and a print shop will send it back. If your converter finished instantly and the file is roughly the size of the PNG, that is what you have.

A traced SVG looks different in three ways: the file contains <path> elements with coordinate data, the size relates to the complexity of the artwork rather than to its pixel count, and clicking an edge in Illustrator or Inkscape selects a shape rather than a rectangle.

What a tracer is actually doing

A tracer runs three steps. It groups pixels into regions of similar colour, it extracts the boundary between those regions as a chain of points, and it fits curves to that chain so the result is a handful of Bezier segments instead of thousands of tiny line segments.

The interesting part is step two, because a PNG has already blurred the answer. Anti-aliasing means the pixels along an edge are mixtures of the two colours either side of it — that is what makes the original look smooth. A naive tracer picks a threshold, calls every pixel above it "inside", and produces a staircase that it then smooths, which loses the very information the anti-aliasing was carrying. Reading the mixture as coverage instead puts the boundary between pixel centres, where the artwork actually meant it.

The two settings that matter

Every tracer has a dozen controls and two of them do most of the work.

The first is the colour count. This is how many flat fills the result is allowed to have. A brand mark usually needs two to five. Set it to the number of colours the artwork really has and the tracer merges the anti-aliased in-between shades into the neighbours they came from. Leave it at sixteen and you get a halo of thin intermediate shapes tracing every edge.

The second is the speckle filter: the smallest region, in pixels of area, worth keeping. Compression noise, scanner dust and dithering all show up as regions of two or three pixels. Raise the filter until the path count stops falling and then stop — pushing further starts eating real detail like the dot on an i.

Node count is the quality metric that matters

It is easy to make a trace that matches the original almost exactly: emit enough nodes and you can follow any staircase. The file will be enormous, nobody can edit it, and a cutter will stutter along it audibly.

The number to watch is nodes per shape. A traced letter should have tens of nodes, not hundreds. If you are going to edit the result — move a serif, tighten a curve, recolour a section — that number is the difference between artwork and a rubbing.

What tracing cannot recover

Gradients become bands. A smooth gradient in the source is a continuum of colours, and a tracer has to cut it into a finite number of flat fills; the result is visible banding wherever the gradient was slow. Some artwork survives this and some does not.

Soft shadows and glows are the same problem in a more obvious form. Anti-aliasing is one pixel of blur and is recoverable; a forty-pixel drop shadow is not an edge at all, and tracing it produces a stack of concentric grey shapes.

Text becomes outlines, not text. A traced word cannot be re-typed or re-kerned, and it will not match the original typeface exactly. If the mark uses a typeface you can identify and license, set the text again rather than tracing it.

Checking the result before you use it

Zoom to 800%. Edges should be crisp curves. If they are stepped, you are looking at a bitmap in a wrapper.

Open the file in a text editor. Real geometry looks like <path d="M..."/> with a lot of numbers. An embedded bitmap looks like <image href="data:image/png;base64," followed by a wall of characters.

Then check the holes. The counter of an O, the gap in an A, the space inside a ring: each has to be its own contour with the opposite winding direction. If they are filled in, the tracer produced overlapping regions rather than disjoint ones, and every downstream tool from a cutter to a printer will get it wrong the same way.