ToolzyLabPNG to SVG: What Vector Tracing Can Do
Tracing a PNG into SVG is the only way to make pixels scalable again — but it is reconstruction, not recovery. This guide sets honest expectations and shows how to prepare images so the trace comes out clean.
Updated 2026-08-06 · ~7 min read
What tracing actually does
Vectorization analyzes the pixel grid, finds regions of similar color, fits closed paths around their boundaries, and outputs those paths as SVG. The result looks like the source at any size — but it is a reconstruction: curves are approximations, colors are flattened into regions, and fine detail below roughly one pixel is gone forever. Think of it as a very careful re-drawing, not an unlock.
That framing answers the most common disappointment: tracing cannot restore a low-resolution logo to its original crispness. It can only describe the pixels that exist. If the source is a 90px thumbnail, the best trace of it is a smooth description of a blurry thumbnail.
Content that traces well — and content that does not
| Content | Tracing result |
|---|---|
| Flat logos, 2-6 colors | Excellent — the ideal case |
| Icons and line art | Excellent, watch hairline strokes |
| Text as pixels | Usable at high resolution; letterforms approximate |
| Simple illustrations | Good, file size grows with color count |
| Photographs | Technically possible, practically wrong — thousands of paths, huge files |
| Gradients | Converted to stepped color bands unless the tracer supports gradient fitting |
The pattern: tracing excels where the image was vector-born (logos saved as PNG by accident) and struggles where content is inherently continuous-tone.
Preparing the image for a clean trace
Tracing quality is mostly decided before you click convert. Three preparation steps move almost every result up a tier:
- Upscale small sources first with the Image Resizer — a 600px logo traces dramatically better than a 120px one, because boundaries are defined by more pixels.
- Increase contrast between regions. Faded or JPEG-artifacted edges make the tracer hesitate, producing wobbly paths.
- Reduce color count. Every near-duplicate shade becomes a separate path family; a logo that should have 4 colors but carries 40 anti-aliasing shades produces 10× the paths.
Choosing color settings
The converter's color count is the single biggest quality lever. Start at the number of colors you believe the artwork actually has, then adjust: too few merges distinct regions (a red circle melts into an orange one), too many spawns speckle paths around anti-aliased edges. For logos, hitting the true count — usually between 2 and 8 — produces the cleanest output.
Reading the output: paths, nodes, file size
A successful trace produces a small number of smooth paths; a struggling one produces thousands of tiny jagged ones. File size is the quick diagnostic: a simple logo should trace to a few KB of SVG. If the output is hundreds of KB, the tracer found noise and treated it as art — reduce colors, smooth the source, or accept that this image is not trace-clean.
Node count matters for editing too: paths with hundreds of control points are painful to refine in Illustrator or Inkscape. Most editors have a simplify/smooth command; running it once after import usually halves node counts with no visible change.
Transparency and backgrounds
Transparent regions trace as absence of paths — the SVG keeps its transparency. But JPEG-derived PNGs (flattened on white at some point) carry their fake white background as real pixels, which the tracer dutifully outlines. If you need a transparent logo, remove the background before tracing, or delete the background rectangle path in the SVG afterward.
The honest alternative: rebuild
For logos destined for serious use, compare the traced result against hand-rebuilding: a designer redrawing from the traced output as reference often delivers cleaner curves in under an hour. Tracing wins for volume (icon sets, batch assets, one-off needs); rebuilding wins for the one logo that defines a brand. The trace is also an excellent starting point for the rebuild.
What to do with the SVG afterward
A fresh trace rarely ships as-is. The standard finishing passes in a vector editor: simplify paths to halve node counts, snap near-identical colors to single values (the tracer often produces 7 shades where the artwork has 4), and align the artboard to the content bounds so the file has no invisible margin. Ten minutes of cleanup converts an automated trace into an asset a designer can work with. If the traced logo will be printed large, check curves at 400% zoom — traces sometimes approximate circles as many tiny line segments, which the editor's smooth command collapses into proper curves.
Batch tracing realities
Icon sets trace well in batch when the sources are consistent: same background treatment, similar color complexity, comparable resolution. Inconsistent sets need grouped settings — dark icons want different color counts than pale ones. Run one representative icon first, lock in settings, then batch the rest and spot-check extremes (the most detailed and the simplest). The economics favor tracing for volume: an hour of manual redrawing per icon is defensible for a brand logo but absurd for a 200-icon migration, where automated traces plus light cleanup finish in a fraction of the time.
What tracing can and cannot recover
PNG-to-SVG conversion is tracing, not upscaling: the tool finds edges in the bitmap and rebuilds them as vector paths. That succeeds brilliantly for flat artwork — logos, icons, line drawings, silhouettes — where the original geometry is describable in a few hundred curves, and the result scales infinitely with a fraction of the file size. It fails structurally for photographs: a photo contains millions of distinct colors and no true edges, so tracing it produces thousands of tiny paths — a larger file than the bitmap, still resolution-dependent in practice, only wearing a vector costume.
Color quantization is the lever that controls trace quality. A full-color trace splinters gradients into banded layers of paths; reducing the palette to the colors the artwork actually uses (often 4–12 for a logo) produces clean, mergeable shapes. The preprocessing order matters: a crisp, high-contrast source traces cleanly, while a blurry or noisy source traces as noise. If the output looks hairy, increase smoothing or simplify the source — do not lower the threshold further.
Inspect output path count before committing to SVG. A trace with 8,000 paths renders slowly in browsers and bloats HTML when inlined; that is the failure mode of over-detailed tracing. Practical SVG for the web wants under roughly 2,000 paths for complex artwork and under 200 for icons. When a trace exceeds that, simplify — fewer colors, more smoothing — until the path count and the visual quality reach their usual truce.
Common mistakes with this tool
- Tracing a tiny thumbnail and expecting logo-grade crispness — upscale first.
- Leaving the color count at maximum and generating megabytes of noise paths.
- Tracing photographs and wondering why the SVG is 2 MB and still looks worse than the PNG.
- Forgetting a fake white background traces as a real white rectangle.
Frequently asked questions
Can I convert any PNG to SVG?
Technically yes, but results depend on content: flat graphics trace excellently; photographs produce huge, poor-quality files and should stay raster.
Why is my traced SVG so large?
Too many detected colors or noisy anti-aliased edges. Reduce the color count and simplify the source image.
Does the SVG keep transparency?
Yes — transparent areas become empty regions in the SVG unless a background color was traced as a path.
Will text survive as editable text?
No — traced text becomes outlines (paths). Editable text requires manual re-typing in a vector editor.
Can I convert a photo to SVG?
Technically yes, usefully no. Photos have no real edges and millions of colors, so tracing produces huge multi-thousand-path files that render slower than the original bitmap. SVG suits flat graphics, not photos.
Why is my traced SVG file larger than the PNG?
Too much detail survived tracing — every texture and gradient band became paths. Reduce the color palette and increase smoothing; a logo should trace to tens of paths, not thousands.