DEV Community

Cover image for Why Auto-Traced SVGs Have Too Many Nodes: The Source Image Decides
PerfectVector
PerfectVector

Posted on Originally published at perfectvector.com

Why Auto-Traced SVGs Have Too Many Nodes: The Source Image Decides

This post was drafted with AI assistance and reviewed by the PerfectVector team.

You traced a PNG, opened the SVG to edit it, and the path is buried under anchor points. A curve that should take five or six points has dozens. The vectorizer isn't broken: most auto-tracers transcribe the pixel contour, and a PNG edge isn't a clean line. Anti-aliasing, compression artifacts and upscaling blur turn every edge into a slightly wobbly boundary, and the tracer adds points to follow each wobble.

You can measure how much the source matters. We drew a test mark as one path with 8 segments, rendered it to a 512 px PNG in headless Chrome, made two worse copies (a JPEG at ffmpeg's lowest quality, and a 96 px version scaled back up), and traced all three with Potrace 1.16. Segments were counted with the small script from our previous post:

Input (source mark: 8 segments) -O 0.2 (default) -O 1 -O 2
Clean 512 px render 25 12 11
Same image as a heavy JPEG 45 30 29
96 px, upscaled to 512 87 74 74
# potrace reads PBM/PGM/PPM or BMP, not PNG
ffmpeg -i logo.png -pix_fmt gray logo.pgm
potrace -s logo.pgm -o trace.svg          # default curve optimization
potrace -s -O 1 logo.pgm -o trace-o1.svg  # merge more curve segments
python count_nodes.py trace.svg
Enter fullscreen mode Exit fullscreen mode

Two things stand out. First, the input decides most of the count: the same shape went from 25 segments to 87 just by starting from a blurry low-res copy, and the low-res trace also picked up a wobbly inner corner. Second, the optimization knob helps most when the source is already clean. Potrace's -O (opttolerance) lets more consecutive Bézier segments merge into one "at the expense of accuracy", per its manual; on the clean render it halved the count, on the low-res one it barely moved. This is one shape and one tracer, so treat the numbers as an illustration, not a benchmark.

In practice, that gives three fixes, in order of how much cleanup they save. Start from the best source you have (the original export, not a screenshot or a re-saved JPEG). Use your tracer's simplification settings and compare the silhouette before you accept them, because every simplification is lossy. Simplify afterwards in the editor (Illustrator's Object → Path → Simplify has a preview) when you only need to fix a few areas. Then count again: fewer segments for the same silhouette means easier edits, smaller path data and fewer micro-segments for a cutter or plotter to process.

The full guide covers how to spot node bloat in an editor, what it does to cutting workflows, worked before/after examples and an FAQ: Too Many SVG Nodes? Clean Up Your Auto-Trace Result

We build PerfectVector, an image-to-vector tool.

Top comments (0)