DEV Community: PerfectVector

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

PerfectVector — Mon, 09 Nov 2026 14:00:00 +0000

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

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.

Image Trace vs an AI Vectorizer: Count the Paths, Not the Label

PerfectVector — Fri, 06 Nov 2026 14:00:00 +0000

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

"Image Trace or an AI vectorizer?" usually gets answered with labels: one is built into Illustrator, the other says AI on the box. Both do the same job, rebuilding a raster image as vector paths. Adobe documents Image Trace's presets and its controls for paths, corners, noise and colors in the Image Trace panel guide, but not enough of the implementation to say which approach is "more AI". The label tells you little. The expanded output tells you a lot.

Workflow is the honest split. If you already edit in Illustrator and like hand-tuning a trace before you expand it, Image Trace is right there. If you want an automated result without opening a design app, or you need an API or batch surface (some dedicated tools have one, so check the docs), test a dedicated vectorizer. Neither turns a photo into a clean SVG: continuous tone comes back as posterized art or thousands of shapes, and no tracer invents detail a low-res source never captured.

What decides your cleanup time is the paths: how many segments the same shape needs, whether you can select and recolor one region instead of a welded tangle, and whether the silhouette still matches the source. So trace the same image in both, at the same intended fidelity, and put a number on it. This dependency-free script counts the drawing segments in a plain SVG:

import re, sys

ARGS = dict(m=2, l=2, h=1, v=1, c=6, s=4, q=4, t=2, a=7, z=0)
TOKEN = re.compile(r"[MmLlHhVvCcSsQqTtAaZz]|[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?")

def segments(d):
    """Count drawing segments in one path's d attribute, implicit repeats included."""
    count, cmd, nums = 0, None, 0
    for tok in TOKEN.findall(d) + ["Z"]:
        if tok.isalpha():
            if cmd and ARGS[cmd]:
                count += nums // ARGS[cmd] - (cmd == "m")  # extra M pairs are lines
            cmd, nums = tok.lower(), 0
        else:
            nums += 1
    return count

svg = open(sys.argv[1], encoding="utf-8").read()
paths = re.findall(r"<path\b[^>]*?\sd=[\"']([^\"']*)", svg)
images = len(re.findall(r"<image\b", svg))
print(f"{len(paths)} paths, {sum(map(segments, paths))} segments, {images} embedded images")

Run python count_nodes.py trace-a.svg and python count_nodes.py trace-b.svg, then put both files side by side at the same zoom. Fewer segments for the same silhouette means easier edits and lighter files downstream; a non-zero "embedded images" count means part of the file is still a bitmap. The script reads <path> elements only (shapes like <circle> are skipped), doesn't count the implicit closing line of z, and expects arc flags separated by spaces or commas. On a 60-path test file it matched svgpathtools' segment count exactly.

The full guide has the side-by-side comparison table, when each tool is the right call, where both approaches struggle, and an FAQ: Image Trace vs AI Vectorizer: Choose the Right Tool

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

Claude Can Write SVG. That Doesn't Mean It Vectorized Your PNG

PerfectVector — Thu, 05 Nov 2026 14:00:00 +0000

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

Ask Claude to turn your PNG logo into an SVG and you'll get a file that opens, scales and validates. That isn't the same as vectorizing it. Writing SVG is text generation: the model emits <path> and <circle> elements that describe a picture. Tracing is measurement: a system reads the pixels of one specific image and rebuilds its boundaries as geometry. Both end in .svg. Only one starts from a source it has to match.

Anthropic's own docs draw the same line. Claude's upload guide says it can analyze JPEG, PNG, GIF and WebP images, and artifacts cover things like images and diagrams. Neither describes a raster-to-vector tracing feature. So "look at this logo and write SVG like it" is reconstruction by interpretation: it can work for a simple mark, but curves, proportions and small details drift.

Where Claude-written SVG shines is new graphics you can describe: an icon built from a few shapes, a flowchart, a badge, a pattern. Ask for a defined viewBox, no external images, and no scripts or remote resources. Then open the file in a browser (does it render?) and in a vector editor (can you select and recolor the parts?).

Whatever made the file, read the markup before you ship it. A valid SVG can still be a bitmap in a wrapper, because SVG allows embedded raster content (W3C SVG 2, Embedded Content):

<!-- Looks like a vector, isn't one: a PNG inside an SVG wrapper -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <image href="data:image/png;base64,iVBORw0KGgo..." width="512" height="512"/>
</svg>

<!-- Real geometry: the outline is path data you can edit -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M96 256C96 168 168 96 256 96s160 72 160 160-72 160-160 160S96 344 96 256z" fill="#1d9b5f"/>
</svg>

Look for <image>, <script> and remote hrefs, then zoom in and see how much cleanup one simple edit takes. The rule of thumb: if you need a new graphic, let Claude write it. If you already have an image that has to stay itself (a logo, a line drawing, flat artwork), use a tracing tool and compare its paths with the source side by side.

The full guide covers the three kinds of "vectorize" requests, a five-step workflow for Claude-authored SVGs, a pre-ship audit and an FAQ: Can Claude Vectorize an Image? SVG Code vs Tracing

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