Image models draw pixels. When a tool hands you an SVG of a generated logo or icon, there is almost always a tracing step in between: a vectorizer walks the raster, groups pixels by color, and fits curves around each patch. That step is genuinely useful. It is also where most "the SVG looked fine" bugs come from.

The .svg extension tells you very little. The file might be four clean shapes, or 229 slightly different grays, or a PNG wearing an <svg> costume. It might scale in a responsive layout, or crop the moment CSS touches it. You only find out when it hits production.

This post builds two small checks you can run before an SVG goes into a repo, a design system or a CMS:

1. a structural audit that reads the XML (standard library only), and
2. a render-back diff that rasterizes the SVG and compares it with the image it was traced from.

Then we fix what they find, including one trap in a very popular optimizer.

The test files

To keep this reproducible, I generated test rasters with Pillow instead of using model output: flat.png (a flat three-color logo on white, anti-aliased) and shaded.png (the same logo with a soft gradient, blur and grain, the "make it look premium" version). Both were traced with vtracer, an open-source color tracer, through a three-line wrapper (trace.py) that calls vtracer.convert_image_to_svg_py() in color/spline mode with filter_speckle=4, color_precision=6 and a configurable splice_threshold (vtracer's default is 45). The anti-aliasing matters: real renders have soft edges, and soft edges are where tracers produce extra in-between colors.

A third file, wrapped.svg, is just a base64 PNG inside an <image> tag, which is more common in the wild than it should be. All numbers below come from these synthetic files, not from a benchmark.

Check 1: read the structure

#!/usr/bin/env python3
"""Pre-ship audit for traced / AI-generated SVG files. Stdlib only."""
import re, sys
import xml.etree.ElementTree as ET
from collections import Counter

NUM = re.compile(r"-?\d*\.?\d+(?:e-?\d+)?")

def local(tag):                      # '{http://www.w3.org/2000/svg}path' -> 'path'
    return tag.rsplit("}", 1)[-1]

def hex_to_rgb(h):
    h = h.lstrip("#")
    if len(h) == 3:
        h = "".join(c * 2 for c in h)
    return tuple(int(h[i:i + 2], 16) for i in (0, 2, 4))

def near_duplicates(colors, tol=12):
    """Pairs of fills that differ by <= tol per channel: usually anti-aliasing debris."""
    rgb = [(c, hex_to_rgb(c)) for c in colors if re.fullmatch(r"#[0-9a-fA-F]{3,6}", c)]
    pairs = 0
    for i in range(len(rgb)):
        for j in range(i + 1, len(rgb)):
            if max(abs(a - b) for a, b in zip(rgb[i][1], rgb[j][1])) <= tol:
                pairs += 1
    return pairs

def audit(path):
    root = ET.parse(path).getroot()
    els = list(root.iter())
    tags = Counter(local(e.tag) for e in els)
    fills = Counter((e.get("fill") or "").upper() for e in els if local(e.tag) == "path")
    fills.pop("", None)
    d_chars = sum(len(e.get("d", "")) for e in els if local(e.tag) == "path")
    w, h = root.get("width"), root.get("height")
    problems, blockers = [], []

    if not root.get("viewBox"):
        blockers.append(f"no viewBox (width={w}, height={h}): resizing crops or pads instead of scaling")
    if tags["image"]:
        blockers.append(f"{tags['image']} embedded <image>: raster inside, not a real vector")
    if tags["path"] > 500:
        problems.append(f"{tags['path']} paths: too busy to hand-edit")
    if len(fills) > 16:
        problems.append(f"{len(fills)} distinct fills: palette not flat")
    dup = near_duplicates(list(fills))
    if dup:
        problems.append(f"{dup} near-duplicate fill pairs (<=12/channel apart)")
    if tags["text"] == 0:
        problems.append("no <text>: any lettering is outlines, not retypeable")
    unsafe = [local(e.tag) for e in els if local(e.tag) in ("script", "foreignObject")]
    unsafe += [k for e in els for k in e.attrib if k.lower().startswith("on")]
    if unsafe:
        blockers.append(f"active content: {sorted(set(unsafe))}")

    # A first shape covering the whole canvas is almost always a traced background
    first = next((e for e in els if local(e.tag) == "path"), None)
    if first is not None and w and h:
        xs_ys = [float(n) for n in NUM.findall(first.get("d", ""))]
        if xs_ys and max(xs_ys) >= float(w.rstrip("px")) * 0.99 and min(xs_ys) <= 1:
            problems.append(f"first path spans the canvas (fill {first.get('fill')}): traced background")

    print(f"{path}: {tags['path']} paths, {len(fills)} fills, "
          f"{d_chars / 1000:.0f}k chars of path data")
    for p in blockers:
        print("  BLOCK", p)
    for p in problems:
        print("  warn ", p)
    return not blockers

if __name__ == "__main__":
    ok = all([audit(p) for p in sys.argv[1:]])
    sys.exit(0 if ok else 1)

Output on the three raw files:

$ python svg_audit.py flat.svg shaded.svg wrapped.svg
flat.svg: 5 paths, 5 fills, 9k chars of path data
  BLOCK no viewBox (width=1024, height=1024): resizing crops or pads instead of scaling
  warn  no <text>: any lettering is outlines, not retypeable
  warn  first path spans the canvas (fill #FEFEFE): traced background
shaded.svg: 229 paths, 205 fills, 275k chars of path data
  BLOCK no viewBox (width=1024, height=1024): resizing crops or pads instead of scaling
  warn  205 distinct fills: palette not flat
  warn  1551 near-duplicate fill pairs (<=12/channel apart)
  warn  no <text>: any lettering is outlines, not retypeable
  warn  first path spans the canvas (fill #E8E8E8): traced background
wrapped.svg: 0 paths, 0 fills, 0k chars of path data
  BLOCK no viewBox (width=1024, height=1024): resizing crops or pads instead of scaling
  BLOCK 1 embedded <image>: raster inside, not a real vector
  warn  no <text>: any lettering is outlines, not retypeable

What each line is telling you:

• No viewBox. The tracer wrote width="1024" height="1024" and nothing else. Without a viewBox there is no coordinate system to scale from, so when the element is resized the drawing doesn't follow: you get cropping or empty space. This is the one I'd fail a build on.
• Embedded <image>. No paths at all. It will "open in Figma", and it will blur like any PNG.
• 205 fills, 1,551 near-duplicate pairs. The gradient and grain became hundreds of almost-identical grays. Nobody can recolor that by hand, and "swap the brand blue" now means editing dozens of fills.
• No <text>. In a traced file, letters are outlines. That's fine for a logo mark; it's a problem if someone expects to fix a typo in the tagline.
• Full-canvas first path. Tracers usually emit the background as one big shape at the bottom of the stack. You'll want to delete it for a transparent asset, but read Check 3 before you do.

Check 2: render it back and diff

Structure tells you whether the file is workable. It doesn't tell you whether it looks like the source. For that, rasterize the SVG with a real renderer (resvg, via the resvg_py binding) and compare pixels:

#!/usr/bin/env python3
"""Render an SVG back to pixels and compare it with the raster it was traced from."""
import io, sys
import resvg_py
from PIL import Image, ImageChops

svg_path, png_path = sys.argv[1], sys.argv[2]
bg = sys.argv[3] if len(sys.argv) > 3 else "#ff00ff"   # what transparent areas should look like
src = Image.open(png_path).convert("RGB")
data = resvg_py.svg_to_bytes(svg_string=open(svg_path).read(), width=src.width)
# default magenta: any area the SVG leaves empty is counted as wrong
out = Image.new("RGBA", src.size, bg)
out.alpha_composite(Image.open(io.BytesIO(bytes(data))).convert("RGBA").resize(src.size))
diff = ImageChops.difference(src, out.convert("RGB")).convert("L")
bad = sum(diff.histogram()[48:]) / (src.width * src.height)   # >48/255 = visibly off
print(f"{svg_path}: {bad:.2%} of pixels visibly different from {png_path}")
diff.point(lambda v: 255 if v > 48 else 0).save(svg_path.rsplit(".", 1)[0] + "_diff.png")
sys.exit(1 if bad > 0.01 else 0)

$ python render_diff.py flat.svg flat.png
flat.svg: 0.80% of pixels visibly different from flat.png

0.80% sounds harmless, and the script's 1% threshold passed it. Then I opened flat_diff.png: almost all of that error was one place, a flattened arc along the top of the circle where the spline fitter had cut a corner. On a logo, that's the first thing anyone notices.

Lowering vtracer's splice_threshold from its default of 45 to 20 fixed it:

$ python trace.py flat.png flat_s20.svg 20 && python render_diff.py flat_s20.svg flat.png
flat_s20.svg: 0.17% of pixels visibly different from flat.png

Two lessons. A global percentage hides local damage, so always look at the mask, not just the number. And tracer settings matter as much as the prompt; don't assume the defaults suit your artwork.

Check 3: the background trap

Deleting the full-canvas background shape is the obvious way to get a transparent SVG. Here's a tiny fixer that also adds the missing viewBox and removes the fixed size so CSS decides:

#!/usr/bin/env python3
"""Add a viewBox, make the SVG responsive, optionally drop a traced background."""
import sys
import xml.etree.ElementTree as ET

SVG = "http://www.w3.org/2000/svg"
ET.register_namespace("", SVG)           # keep plain <svg>, not <ns0:svg>

src, dst = sys.argv[1], sys.argv[2]
drop_bg = "--drop-bg" in sys.argv
tree = ET.parse(src)
root = tree.getroot()

w = float(root.get("width", "0").rstrip("px"))
h = float(root.get("height", "0").rstrip("px"))
if not root.get("viewBox") and w and h:
    root.set("viewBox", f"0 0 {w:g} {h:g}")
for attr in ("width", "height"):         # let CSS / the container decide the size
    root.attrib.pop(attr, None)

if drop_bg:
    first = root.find(f"{{{SVG}}}path")
    if first is not None:
        root.remove(first)
        print("removed background path, fill", first.get("fill"))

tree.write(dst, encoding="utf-8", xml_declaration=True)

On the flat logo it works. Rendered over white, the cleaned file is still 0.15% off the source. But on the shaded version, after flattening its palette to six colors (more on that below), the same fix produced this:

$ python render_diff.py shaded_q6_min.svg shaded_q6.png
shaded_q6_min.svg: 41.00% of pixels visibly different from shaded_q6.png

The diff run without a background color (magenta stands in for "transparent") showed a hollow ring around the circle. Tracers like vtracer stack shapes, and the background color was doing double duty: it was also the visible color of a band inside the artwork. Remove the bottom shape and that band becomes a hole.

So: only drop the background after a render-back diff on magenta, and if a hole appears, recolor that region instead of deleting it.

Fixing the rest

Precision and size. Tracers write coordinates like 23.903061523437486. One decimal place is plenty at this scale:

$ npx -y svgo@4 -p 1 flat_fixed.svg -o flat_min.svg

That took the flat logo from 9,727 to 1,287 bytes, and the render diff stayed at 0.15%.

The optimizer trap. In svgo 3, the default preset includes removeViewBox, which strips the viewBox when width and height are present. To check, I put width and height back on the cleaned file (wh.svg) and ran both major versions (output trimmed):

$ npx -y svgo@3 -p 1 wh.svg -o - | head -c 100
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024"><path fill="#1F6FEA" d="M604.4 21
$ npx -y svgo@4 -p 1 wh.svg -o - | head -c 100
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path fil

svgo 3 silently threw the viewBox away; svgo 4 kept it. The file still renders at its fixed size, so nothing looks broken until someone puts the icon in a flexible container.

If your pipeline pins svgo 3 (plenty do, through older build plugins), either disable that plugin, or remove width/height first like fix_svg.py does. Then run the audit after optimizing, not before.

Busy palettes start upstream. Quantizing shaded.png to six colors with Pillow before tracing cut 205 fills to 5. The path data, though, was still 64k characters, because a radial gradient quantizes into wobbly concentric bands. You can't optimize your way out of shading. The real fix is asking for flat artwork in the first place: flat fills, a small palette, bold outlines, plain background.

Where generated SVGs fit

That last point is also how our own GPT Image 2 SVG generator is designed. Its Visual Asset mode generates an image and then traces it, and the page tells you to prompt for flat colors and a plain background, warns that gradients and textures turn into hundreds or thousands of paths, notes that letters become outlines, and says the background usually ends up as a separate shape you can delete. In other words: everything above still applies, so run both checks on its output too.

For eyeballing a suspicious file, a viewer with a checkerboard background and click-to-source is handy. Our browser-based SVG viewer does that, rendering client-side with a Pick mode that jumps from a shape to its line in the source. Inkscape's XML editor or browser devtools work too.

What the audit doesn't catch (yet)

• Fills set through style="" or CSS classes rather than fill="" attributes
• Gradients in <defs>, strokes, and <use> references
• Thresholds (500 paths, 16 fills, 1% diff) that are guesses tuned on a handful of files; adjust them for your assets

Both scripts exit non-zero on failure, so they drop into CI as-is:

python svg_audit.py assets/icons/*.svg
for f in assets/icons/*.svg; do python render_diff.py "$f" "sources/$(basename "${f%.svg}").png"; done

What's the worst thing you've found inside an SVG that "looked fine" — and which check would have caught it before it shipped?