You drop a 40 KB PNG logo into a hero section, then a designer asks for a 4x retina version, then marketing wants it on a billboard. By the third request you realize you've been solving the same problem in three different sizes, and the edges still look fuzzy at 200% zoom. That's the moment people start asking whether to convert the file to SVG — and the moment a lot of bad SVGs get made by tracing things that should never have been traced.
Vector and raster aren't competing formats so much as different jobs. Knowing which job you have decides whether tracing pays off, makes things worse, or doesn't matter at all. This post walks through the difference, the algorithms behind PNG-to-SVG conversion, and a checklist for when to bother.
The Real Difference Between Raster and Vector
Raster formats — PNG, JPG, WebP, AVIF, GIF — store an explicit grid of pixels. A 256x256 PNG is literally 65,536 colored squares. Scale it up to 1024x1024 and the browser invents pixels in between using interpolation, which is why edges blur. Scale it down and information is permanently lost.
Vector formats — SVG primarily, but also PDF and EPS — store geometric instructions. A circle is <circle cx="50" cy="50" r="40" fill="#f5c842"/>, not 100x100 colored cells. The browser rasterizes that instruction at whatever size and DPI the device asks for, every time. There is no "native resolution" because there are no pixels in the source.
That difference cascades into everything else: file size, scaling behavior, edit-ability, animation, accessibility, and how well a tracer can handle the conversion.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#f5c842" stroke="#0d0d0d" stroke-width="3"/>
</svg>That's 130 bytes. A PNG of the same circle at 256x256 is roughly 4 KB; at 1024x1024 it's 15 KB. The SVG is sharper at every size, and you can change the fill color by editing one attribute.
When Tracing Actually Helps
Vector conversion is the right call in a narrow but common set of cases:
- Logos with flat colors and clean edges. A 2-4 color brand mark traces cleanly because there are obvious color regions to convert into closed paths.
- Icons and pictograms. Simple shapes, hard edges, no gradients. Most icon sets started as vector and were rasterized for use; tracing reverses that loss.
- Black-and-white line art, sketches, signatures. High contrast, single-color. Potrace was literally invented for this.
- Print-scaling needs. Anything destined for a physical print run, vinyl cutter, laser engraver, or screen print needs vector paths.
- Color-themed UI assets. If you want one icon to flip between dark and light mode by changing
currentColor, it has to be SVG.
In all of these the original raster either threw away vector information that existed at some earlier stage, or the source content is genuinely shape-based rather than texture-based.
When Tracing Will Make You Sad
The other half of the decision is knowing when not to trace.
- Photographs. A photo of a coffee cup contains tens of thousands of distinct color samples per square inch. Tracing collapses those into a tractable number of regions, and what comes out the other side either looks like a low-poly painting or balloons to a 2 MB SVG with 50,000 paths. You almost always want WebP or AVIF instead.
- Images with smooth gradients. Tracers handle hard color transitions well and smooth ones poorly. A sunset photo turns into banded geometry.
- Anything with subtle texture or grain. Film grain, fabric weave, paper texture — all of it disappears or becomes splotches.
- Anti-aliased screenshots. A screenshot of UI text already has the pixel grid baked in, with grayscale anti-aliasing at edge boundaries. Tracing it produces ugly, slightly-fat letterforms. Use the original font and re-typeset in vector.
Rule of thumb: if you can draw the image with under ~30 distinct color regions and the boundaries are sharp, tracing is going to work. If you can't, render the asset with a vector tool from scratch instead.
How Tracing Algorithms Actually Work
There's no magic here. Most raster-to-vector tracers follow the same three-stage pipeline:
1. Quantize. Reduce the image to a small palette — usually 2 to 16 colors. K-means or median cut is standard. Photos with thousands of colors get hammered into something tractable. This is also where you lose the most fidelity if the source isn't suited.
2. Find regions and edges. For each color, find connected pixel regions, then walk the boundary of each region to produce a sequence of edge points. This is closely related to image segmentation. The output is a polygonal path with hundreds or thousands of vertices, one per pixel boundary.
3. Smooth and fit curves. Replace those jagged polylines with smooth Bezier curves. The classic algorithm here is Potrace by Peter Selinger — it does this in two stages, first turning pixel staircases into straight-line approximations, then fitting cubic Beziers. Modern color tracers like the one in our Image to SVG Tracer layer color quantization on top of that core idea.
The output is sensitive to two knobs:
- Color count — fewer colors means smaller, cleaner output but loses detail.
- Path simplification / curve tolerance — looser tolerance means fewer anchor points and smaller files, but rounder, less faithful shapes.
You're always trading file size against fidelity. A 3-color logo trace might be 2 KB and pixel-perfect; bump it to 12 colors and the same logo might be 28 KB with marginal visual gain.
A Practical Decision Checklist
Before you trace, run through these questions:
- Is the source under ~30 distinct color regions with hard edges? If yes, candidate. If no, stop here — use a raster format.
- Do you need it to scale beyond its current resolution? If you're only rendering it at one size and that size already exists as a sharp PNG, you don't need SVG. Just optimize the PNG.
- Do you need to recolor it dynamically (theme-aware, hover state, brand variants)? SVG wins outright.
- Is there a higher-fidelity vector source somewhere? Check Figma, Illustrator files, the brand guidelines PDF. Tracing is always lossy compared to the original. Get the original if you can.
- Is this a one-shot or repeated need? For a single hero image at one size, just optimize the raster. For a logo that ships at 12 sizes across favicons, social cards, and print, vector is the only sane answer.
If steps 1, 3, or 4 came up positive, trace it. Otherwise, reach for compression or a redraw.
Cleaning Up After the Trace
Tracers output usable but rarely optimal SVG. A few cleanup passes pay off:
<!-- Before: typical tracer output -->
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#f5c842">
<path d="M2560 4720 c-13 -13 -20 -33 -20 -55 0 -22 7 ..."/>
</g>
</svg>
<!-- After: hand-edited -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M256 472a5 5 0 0 0 -2 -5z..."/>
</svg>Things to look for:
- Drop fixed
width/height. KeepviewBoxonly so the SVG scales fluidly with CSS. - Replace hardcoded fills with
currentColorwhen you want CSS to drive the color. - Flatten transforms. Tracers love wrapping paths in
<g transform="...">to handle Y-axis flips. Run an SVG optimizer to bake them in. - Round coordinates. Two decimal places is plenty for most logos and saves bytes.
- Run SVGO or paste through an online minifier. Routine 30-60% size reductions without visible difference.
Once cleaned up, you can convert your SVG back to PNG at any size for legacy contexts, or feed it into a favicon generator for the full icon pack you actually need.
Hand-Drawn vs Generated SVG
One more wrinkle worth knowing: a lot of decorative SVG on the modern web isn't traced from anything. It's generated procedurally — organic blob shapes, repeating patterns, mesh gradients. If your design need is "I want an interesting background shape," tracing a stock photo of a cloud is the wrong tool. Generators make this directly.
Try the SVG Blob Generator for organic hero shapes, or the SVG Pattern Generator for tileable backgrounds. Both produce clean, hand-crafted SVG with a fraction of the path count any tracer would emit, and you skip the lossy round-trip through pixel space entirely.
Use tracing when you have an existing raster you can't otherwise replace. Use generators when you're starting from intent. They're different problems.
When in Doubt, Measure
The honest test for whether tracing was worth it is to compare the resulting SVG to a well-optimized raster at the sizes you actually use. Compress the PNG with pngquant or convert to WebP at 80% quality, then put it next to your traced SVG.
# Compare file sizes
ls -lh logo.png logo.webp logo.svg
# Or with cwebp + svgo
cwebp -q 80 logo.png -o logo.webp
svgo logo.svg -o logo.min.svgIf the optimized WebP is smaller than the SVG and you don't need any of the SVG-specific superpowers (recoloring, infinite scale, animation, accessibility text), keep the WebP. If the SVG is smaller or any of those superpowers matter, ship the SVG. The vector format isn't categorically better — it's better at certain jobs, and the way you tell is by measuring.
For deeper SVG references, the MDN SVG documentation covers every element and attribute, CSS-Tricks' SVG guide collects practical techniques, and the Inkscape learning resources walk through tracing and editing in an open-source tool.
The short version: trace when the source is shape-based, the destination needs to scale or theme, and you've checked there's no better vector original hiding somewhere. Skip the trace for photos, gradients, and texture. The fastest way to ship the right asset is knowing in advance which one you have.
FAQ
Should I trace a photograph to make it scalable?
No — almost never. Photos contain tens of thousands of distinct color samples per square inch. A tracer collapses those into a manageable number of regions, producing either a low-poly painting that doesn't look like the original or a 2 MB SVG with 50,000 paths. Use WebP or AVIF for photos; reserve tracing for shape-based content with under ~30 distinct color regions and hard edges.
What's the right tool for converting a logo PNG to SVG?
For 2-color logos (signatures, line art), Potrace is the gold standard — it's the algorithm behind most production tracers. For multicolor flat logos, browser-based tools like Vector Magic, Adobe Illustrator's Image Trace, or our own Image to SVG Tracer handle color quantization plus path fitting. For best results, find the original vector source — your brand guidelines PDF, Figma file, or designer's archive — before tracing. Original always beats traced.
Why does my traced SVG look fuzzy or jagged?
Two common causes: the source raster was already low-resolution (tracing from a 64×64 favicon produces fewer detail points than a 512×512 PNG) or the curve simplification was too aggressive. Try a higher-resolution source if available, and reduce the smoothing/simplification tolerance in your tracer. For text in the source, never trace — re-typeset in vector with the actual font.
Does SVG always beat PNG for logos in 2026?
Usually, but not always. SVG wins for logos that scale, theme (dark/light mode via currentColor), or animate. PNG wins when the logo has subtle gradients, raster textures, or photographic elements that wouldn't trace cleanly. Always measure: a hand-optimized PNG via pngquant or WebP at quality 80 sometimes beats a traced SVG on file size, especially for small icons.
How small can I make an SVG file?
Very small. A simple icon (one path, one color) fits in 200-400 bytes. A traced multicolor logo typically lands at 2-15 KB. SVGO routinely cuts another 30-60% by removing whitespace, redundant transforms, and excess decimal precision. For inline SVG, gzip compression on the wire reduces size further. The smallest production SVG icons (Heroicons, Lucide) are under 500 bytes uncompressed.
Can I animate a traced SVG?
Yes, but with caveats. SVG supports CSS animations (transforms, opacity), SMIL (deprecated but still works), and JavaScript-driven animation. Traced SVGs often have hundreds of paths, which can hurt animation performance — animating individual paths in a 50-path traced logo is choppy on mobile. For animated icons, redraw in vector with a small path count rather than tracing a high-detail source.
Why is my SVG bigger than the equivalent PNG?
Usually because tracing produced too many paths or too much decimal precision in coordinates. Run SVGO with --multipass to flatten transforms, round coordinates to 1-2 decimals, and remove redundant attributes. If the SVG is still bigger, the source content probably isn't a good fit for vector — gradients, textures, or photos all bloat traced output. Stick with the PNG.
What's the difference between Inkscape's tracer and online tracers?
Inkscape's "Trace Bitmap" uses Potrace under the hood, with a few extra modes (brightness cutoff, edge detection, multiple color quantization). Online tracers usually wrap the same Potrace core or use a custom multicolor algorithm. For 1-2 color line art, all of them produce similar results. For multicolor, Vector Magic and Adobe Illustrator's Image Trace produce noticeably cleaner output than Inkscape's basic mode — but they're paid tools.