Posterise and trace: why your converter gave you a bad SVG
Most image-to-SVG tools posterise and trace. What that does to gradients, edges and node counts, and what a reconstruction does instead.
Open any 'PNG to SVG' tool, upload a logo with a soft gradient, and you get bands. Upload a clean icon and you get more nodes than a subway map. The tools differ in their interfaces, but almost all of them run the same recipe underneath: posterise, then trace.
The recipe
- Reduce the image to N colours, typically by clustering pixels.
- For each colour, find the connected blobs of pixels.
- Outline each blob with a polygon, then smooth the polygon into curves.
- Stack the results and write them out.
It is fast, it is easy to implement, and it is exactly what the classic tracing tools of the 2000s did. Its failures are structural, not a matter of tuning.
Failure 1: gradients become stripes
A gradient is thousands of slightly different colours. Clustering them into N buckets produces N flat bands with hard edges between them. Raising N makes thinner bands and more paths; it never makes a gradient.
Failure 2: two colours, two edges
Each colour is traced on its own, so the boundary between red and blue is traced twice: once from the red side, once from the blue. The two outlines never agree exactly. Where they overlap you see a dark seam; where they miss, a hairline of background shows through. Cutting machines cut both lines.
Failure 3: pixels are trusted
JPEG blocks, anti-aliasing and generator noise are all just pixels to a tracer, so they get outlined faithfully. The result has staircase edges, tiny islands of colour and a node count in the thousands for a shape a designer would draw with twenty.
What a reconstruction does instead
svgize starts from the other end: what design, made of flat fills, gradients and clean curves, would have produced these pixels once you account for how the image was degraded? It measures blur, JPEG quality and noise first. It tests gradient hypotheses against the pixels and keeps the ones that explain them. It labels every pixel by which shape it belongs to, so the boundary between two colours is one curve, shared by both. It fits that curve to a fraction of a pixel, finds the corners, and fairs the parts where the source itself wobbles.
The difference shows in three numbers you can read next to every result: paths, colours and file size. A clean logo should be a few paths and a few colours, and a few kilobytes.