PNG to SVG: How to Auto-Trace a Raster Image to Vector
A PNG is a grid of pixels; an SVG is a set of shapes. Turning one into the other means tracingthe pixels back into vector paths — and the honest truth is it only works well on high-contrast logos, icons, and line art. The fastest free route is Inkscape's Trace Bitmap; the steps are below, along with why the instant one-click converters usually hand you a fake.
First, the trap: "instant" PNG-to-SVG is usually fake
If an online tool converts your PNG to an SVG the moment you drop it in, it almost certainly did not trace anything. It wrapped your PNG, byte for byte, inside an <image> tag in an SVG file. The extension changes; the picture inside is still the same bitmap, so it stays blurry when you scale it and gains none of the advantages of real vectors. A genuine conversion takes a moment of processing and rebuilds the artwork as paths — that is the thing you actually came for, and it is what the rest of this page shows you how to do.
How PNG-to-SVG auto-tracing works
Auto-tracing (also called vectorization or raster-to-vector conversion) reconstructs an image out of shapes instead of pixels. Given a PNG, a tracer works roughly like this:
- Reduce the colours. The tracer either splits the image into light-vs-dark by a brightness threshold, or groups the pixels into a small number of solid colour regions. Fewer colours means cleaner, simpler paths.
- Find the boundaries. It walks the outline of each colour region, producing a jagged, pixel-stepped path around every distinct shape.
- Fit smooth curves. Those stair-stepped outlines are approximated with straight segments and Bézier curves, so a circle becomes a handful of curve handles rather than hundreds of tiny steps. The open-source engine that does this in many tools is called potrace.
- Write the SVG. Each fitted shape becomes a
<path>with a fill colour. The result scales to any size because the shapes are math, not pixels.
Because every step is an approximation, the output is a new interpretation of your image, not a pixel-perfect copy. That is exactly why it shines on simple, deliberate graphics and falls apart on photographs — there is nothing clean for the tracer to latch onto in a photo.
Best results: high-contrast logos and icons
Tracing rewards images that are already close to being vectors. You'll get the cleanest SVG when the source PNG is:
Traces well
- Logos and wordmarks
- Flat icons and pictograms
- Black-and-white line art or sketches
- Silhouettes and simple shapes
- A few solid, high-contrast colours
Traces badly
- Photographs of any kind
- Gradients and soft shadows
- Textures, noise, and film grain
- Tiny screenshots with anti-aliased text
- Anything with hundreds of subtle colours
Two things about the source PNG matter more than most people expect. First, size: trace the largest, cleanest version you have — a 64-pixel favicon has too little detail to rebuild a smooth curve from. Second, hard edges: anti-aliasing (the soft grey pixels that smooth an edge) confuses the tracer into adding stray extra shapes, so a crisp, flat-colour PNG traces far more cleanly than a softened one.
Step by step: Inkscape (free) or Illustrator
There is no reliable one-click button — a good trace needs you to nudge a threshold and look at the result. Both routes below run on your own machine, so your file is never uploaded.
Inkscape — free and open-source
- Open Inkscape and drag your PNG onto the canvas.
- Select the image, then open Path → Trace Bitmap (Shift+Alt+B).
- Pick a mode: Brightness cutoff for a one-colour silhouette, or Colorsunder "Multiple scans" for a logo with a few colours. Set the number of colours or the threshold.
- Click Apply, then close the dialog. The trace is placed directly on top of your PNG.
- Drag the new vector aside and delete the original bitmap underneath it.
- Save with File → Save As → Plain SVG (Optimized SVG if you want the smallest file).
Adobe Illustrator — Image Trace
- Place your PNG (File → Place) and select it.
- Open Window → Image Trace and choose a preset — "Black and White Logo" or a low-colour preset for most icons.
- Refine the Threshold, Paths, and Colors sliders while watching the preview.
- Click Expand to convert the live preview into editable vector paths.
- Clean up stray points if needed, then File → Export → Export As and choose SVG.
Whichever tool you use, treat the trace as a draft. The real payoff comes from opening the resulting paths and tidying them — merging duplicate points, straightening edges that should be straight, and deleting the specks a tracer leaves behind.
PNG vs SVG for web use
| PNG | SVG | |
|---|---|---|
| Stored as | A fixed grid of pixels | Shapes described by math |
| Scaling | Blurs when enlarged past native size | Razor-sharp at any size |
| Best for | Photos, screenshots, complex images | Logos, icons, line art, illustrations |
| File size | Grows with pixel count | Tiny for simple art, huge for traced photos |
| Styling | Static image | Restyled and animated with CSS |
| Transparency | Yes, full 8-bit alpha | Yes, per shape |
For a website, an SVG logo is the ideal: it's crisp on every screen from a phone to a 4K display, it stays sharp at any zoom, and for a simple mark it's often smaller than the PNG it replaces — one asset that serves every size. Keep PNG for photographs and detailed imagery, where vectors have nothing to gain and everything to lose. And when you need to go the other way — a vector that some tool or platform won't accept — the SVG to PNG converter rasterizes it in your browser.
Related Conversions
Frequently Asked Questions
Can you convert a PNG to SVG for free?
Yes. Inkscape is free, open-source, and includes a bitmap tracer (Path → Trace Bitmap) built on potrace, the same engine many paid tools use under the hood. Open your PNG, run Trace Bitmap, adjust the threshold or number of colours, click Apply, delete the original bitmap, and save as Plain SVG. It costs nothing and never uploads your file.
Why does my PNG-to-SVG file still look like a bitmap?
Because it was never traced. Many one-click online 'PNG to SVG' tools finish instantly by embedding your PNG, unchanged, inside an <image> tag in an SVG wrapper. The file has an .svg extension but the picture inside is still the same grid of pixels — it will not scale cleanly and gains none of the benefits of vector graphics. A genuine trace takes a moment of processing and rebuilds the shapes as paths.
Can you turn a photo into an SVG?
You can, but you almost never should. Auto-tracing reconstructs regions of flat colour as filled paths, and a photograph has thousands of subtly different colours and no clean edges. Tracing one produces an enormous SVG — often far larger than the original PNG — that looks like a smeared, posterised version of the photo. Vector tracing is for logos, icons, line art, and other high-contrast graphics with a small number of solid colours.
What's the difference between PNG and SVG?
PNG is a raster format: it stores a fixed grid of pixels, so it looks crisp at its native size and blurry when scaled up. SVG is a vector format: it stores shapes as mathematical paths, so it stays razor-sharp at any size, from a favicon to a billboard. SVG files for simple graphics are often tiny and can be styled and animated with CSS. PNG is the right choice for photographs and anything with complex, continuous tone.
Does Illustrator convert PNG to SVG?
Yes, through its Image Trace feature. Place the PNG, open Window → Image Trace, pick a preset such as 'Black and White Logo' or a low-colour preset, refine the paths and colours, click Expand to turn the preview into real vector paths, then File → Export → Export As and choose SVG. Illustrator's tracer gives you finer control over path fitting and colour count than most free tools.
Will auto-tracing perfectly reproduce my logo?
Not automatically. A tracer approximates the edges it finds, so curves can wobble, thin strokes can break up, and corners can round off — especially if the source PNG is small or has anti-aliased (softened) edges. For a logo you'll reuse everywhere, trace it as a starting point and then clean up the paths by hand, or, if you have it, re-export the vector from the original design file instead of tracing at all.
Related Reading
- SVG to PNG — the reverse trip: flatten a vector to pixels for a platform that won't take SVG.
- PNG to WebP — when your image is a photo or screenshot rather than a logo, WebP shrinks it without leaving the raster world.
- Best image format by use case — a decision guide for web, print, email, and archive, including when a logo belongs in SVG.