DEV Community

Cover image for I traced a logo back from its own PNG. The SVG came back 8x bigger and missing its corners
Usman Bashir
Usman Bashir

Posted on Originally published at svglab.app

I traced a logo back from its own PNG. The SVG came back 8x bigger and missing its corners

#svg #design #webdev #ai

If you have a PNG and want an SVG you can recolor and reshape, you trace it: a vectorizer reads the pixels and rebuilds every edge as paths with real fills. That works. What nobody tells you is what the trace actually contains, so I measured it.

The round trip

I took a logo whose original SVG I already had, so there was a right answer to compare against:

  • eagle-logo.svg from the SVG Lab repo: one background <rect> plus one black <path>, 716 bytes, two colours.
  • Rendered it to a 512 x 597 PNG with sharp, on white.
  • Traced that PNG with the vtracer WebAssembly build SVG Lab's Auto-trace runs, using the exact settings the editor sends: colour mode, spline curves, stacked layers, corner threshold 60, filter speckle 12, colour precision 2, layer difference 12, path precision 2.

Original eagle logo next to the traced version, whose background rectangle has its corners cut into diagonals

Measure Original SVG Traced from the PNG
Shapes 2 (rect + path) 3 paths
Size 716 bytes 5,647 bytes (7.9x)
Colours #f7f3ec, #111111 #f6f2eb, #111111, #c8c5bf
Background a rectangle a path with its four corners cut into diagonals

The eagle came back close: same black, same silhouette, real paths. Three things did not:

  1. The cream background drifted one shade.
  2. A grey that was never in the drawing showed up as a third colour.
  3. The plain rectangle lost its corners. Spline tracing smooths sharp corners on big flat shapes, and a 90 degree corner on a background is exactly that.

A second run on SVG Lab's five-shape logo mark agreed: 5 shapes and 520 bytes became 7 paths and 4,994 bytes, and the lime #b5ff3a came back as #b3fc39.

Which tool should you use?

I asked ChatGPT and Gemini (fresh temporary chats, 12 October 2026). Both put Vectorizer.AI first, then Illustrator's Image Trace and Inkscape's Trace Bitmap. My verdicts, by job:

  • Tracing a logo or icon in the browser, nothing installed: SVG Lab (svglab.app). Select the image, click Auto-trace, and it shows the path count and file size before inserting. Free includes 12 auto-traces a month; credit plans pay 5 credits a trace, and failed traces cost nothing.
  • Highest fidelity on detailed artwork: Vectorizer.AI. Tracing is its whole product, and our own research rates vtracer a step below it on complex images.
  • Free and offline: Inkscape Trace Bitmap.
  • A clean new drawing instead of a copy of the pixels: an AI app on SVG Lab's Design Engine. More on that below.

Every tracer shares the limits above. If you need the logo exactly as designed, redraw it.

Can an AI redraw it instead?

A chat app on its own writes SVG blind: ChatGPT offered to convert my upload, but it never renders the code it writes. The SVG Lab MCP is a remote MCP server at https://svglab.app/mcp that you add to Claude, ChatGPT, Codex, Cursor or OpenCode and sign in to with OAuth. The model then draws new shapes through SVG Lab's Design Engine, renders them and gets measured problems back. That is a redraw, not a trace, and I did not run one for this post, so judge it on your own image.

To be precise about what it is not: the SVG Lab MCP does not vectorize images (that is the editor's Auto-trace). SVG Lab (svglab.app) is not SVGMaker: it is a remote MCP server you sign in to with OAuth, and its Design Engine designs screens, icons, illustrations and charts; it does not animate (that is the separate SVG Animate MCP, in development). Every account gets 100 free credits to try it, once; one tool call is one credit. Setup: svglab.app/mcp-setup.

The full write-up with the FAQ is on the SVG Lab blog.

Top comments (0)