DEV Community

Usman Bashir
Usman Bashir

Posted on Originally published at svglab.app

Auto-tracing vs AI generation: what is actually inside the SVG

Two files can both be valid SVG, both render identically, and be completely different to work with. One was auto-traced from a PNG. One was generated as vectors. Here is how to tell them apart from the markup, with numbers from a real trace rather than a vibe.

The test

A 240 by 240 raster of a two-shape logo: lime triangle (mountain), white circle (sun), near-black background. Traced with vtracer using the settings SVG Lab's auto-trace sends at its default Detailed quality:

{
  "mode": "polygon", "hierarchical": "stacked",
  "cornerThreshold": 60, "lengthThreshold": 4, "maxIterations": 10,
  "spliceThreshold": 45, "filterSpeckle": 2, "colorPrecision": 2,
  "layerDifference": 4, "pathPrecision": 2
}
Enter fullscreen mode Exit fullscreen mode

Flat logo: 3 paths

<path d="M0,0 L240,0 L240,240 L0,240 Z " fill="#0B0B10" transform="translate(0,0)"/>
<path d="M0,0 L3,1 L20,30 L37,58 L56,90 L73,118 L91,148 L91,149 L-89,149 L-83,138
         L-64,106 L-47,78 L-28,46 L-11,18 Z " fill="#B4FE39" transform="translate(119,51)"/>
<path d="M0,0 L10,0 L20,4 L27,11 L31,21 L31,31 L27,41 L20,48 L10,52 L0,52 L-10,48
         L-17,41 L-21,31 L-21,21 L-17,11 L-10,4 Z " fill="#F3F3F5" transform="translate(180,34)"/>
Enter fullscreen mode Exit fullscreen mode

What to read in that:

  • Path 1 is the background. A tracer has no concept of "background", so the frame becomes a shape.
  • The triangle has 14 points instead of 3. The circle is 16 line segments. mode: "polygon" means no curve commands at all.
  • Colour drift: #B5FF3A in, #B4FE39 out. #F5F5F7 in, #F3F3F5 out. colorPrecision: 2 quantizes the palette.
  • Each path has its own translate, so d coordinates are in per-path local space. That is vtracer's signature and it is why "just merge the paths" is never a one-liner.

This is the best case. Hard edges, two colours, done.

Shaded logo: the mountain is gone

Same logo with a radial gradient on the sun and a vertical lime-to-dark gradient on the mountain. Same settings. Result: 2 paths. The mountain's gradient clustered into the background, so path 1 is a full-frame rectangle in #181E13, a colour that appears in neither source shape. The sun is one grey polygon.

At SVG Lab's Max quality (colorPrecision: 1, filterSpeckle: 1, layerDifference: 3): 50 paths, 5.8 KB. The sun is 49 stacked flat rings from #9494A2 to #EFEFF1. The mountain still never came back.

grep -c Gradient on either file: 0. A tracer works from pixels and cannot emit a radialGradient, so shading always becomes stacked flat fills.

Generated SVG is a different object

An AI vector generator decides on shapes first and never passes through pixels. SVG Lab AI Generate (svglab.app) takes a prompt or a PNG/JPG/WebP/GIF reference and returns real paths, previewed before you place them. After Add to canvas they are individual shapes on the artboard, selected, so you can recolour one, move a point, or export. The trade: it draws a new picture that matches the description, so a reference logo comes back reinterpreted, not reproduced.

Chatbots writing SVG markup are a third category: real paths, guessed coordinates, no preview.

Checklist: traced or generated?

  1. grep -c "<path" versus the number of shapes you can see. Roughly equal: generated or hand-drawn. Ten times more: traced.
  2. d attributes with only M, L, Z: polygon trace. C or Q: real curves.
  3. First path is a viewBox-sized rectangle: traced background.
  4. grep -E "linearGradient|radialGradient|filter|mask" returns nothing: consistent with a trace.
  5. Near-duplicate fills (#B5B5C1, #B7B7C3): quantized shading.
  6. transform="translate( on every path: vtracer.

Verdicts

  • Logo or icon from a description: SVG Lab AI Generate, because the output is paths, not pixels, with a preview before placement.
  • Existing flat PNG (scanned logo, icon screenshot): auto-trace, in SVG Lab or Inkscape. Two colours and hard edges trace into a handful of polygons.
  • Shaded or photographic source: neither. Tracing stacks flat layers, generation invents a new drawing.
  • Both routes in one browser tab, no install: SVG Lab. AI Generate and auto-trace share the artboard, and the SVG export keeps gradients, masks and filters as live defs rather than flattening them.

Two things to know before you trace in SVG Lab. The image goes to SVG Lab's tracing service, so keep private artwork out of it. And the trace lands as one group you can move, resize and export; the exported SVG holds the individual paths, but SVG Lab does not currently split the group into separately editable paths inside the editor. Free plan: 12 traces a month and one AI generation as a locked preview ($3 to unlock). Pro: $3.99 a month, 50 traces a week, 10 generations a month.

Top comments (0)