People reach for "convert PNG to SVG" expecting the same one-click swap they get moving between JPG and PNG. It is not that, and understanding why saves a lot of disappointment. A PNG is a grid of pixels. An SVG is a set of shapes described as maths. There is no pixel grid inside an SVG to copy your pixels into, so the picture has to be re-drawn from scratch as vector shapes. That redraw is called vectorisation, or tracing, and the quality of the result depends far more on what is in your image than on which tool you use.
This guide covers what the conversion actually does, the images that trace beautifully and the ones that turn into an unusable mess, the free and paid tools, and the single most common way the whole exercise backfires: ending up with an SVG that is larger and slower than the PNG you started with.
Why PNG to SVG is not a normal conversion
Swapping a JPG for a PNG re-encodes the same grid of pixels a different way. The image is fundamentally unchanged; only the container differs. Converting a PNG to SVG is a different kind of operation, because the two formats store an image in completely different ways. If that distinction is new, the vector versus raster guide is the fastest way to get it straight, and what an SVG file is explains the vector side in detail.
A tracer works by inspecting the pixels, finding the edges where colour changes sharply, grouping regions of similar colour together, and then fitting vector paths around those boundaries. The output is a stack of filled shapes that approximates the original. The key word is approximates: tracing can never recover detail the image never had, and it always makes decisions about where an edge "really" is. On the right image those decisions are invisible. On the wrong image they are everywhere.
When it works and when it does not
The rule is simple: the fewer distinct colours and the harder the edges, the better an image traces. If you can count the colours on one hand, tracing will look excellent. If it is a photograph, do not even start.
| What you are tracing | Result |
|---|---|
| Flat logo, one to three colours | Excellent, this is what tracing is for |
| Icon or line art | Excellent, clean paths |
| Simple illustration with hard edges | Good |
| Text captured as an image | Usable, but re-typing it in a real font is better |
| Screenshot or UI capture | Poor, text and soft edges trace badly |
| Gradients, soft shadows, blur | Poor, you get colour banding and hundreds of shapes |
| Photograph | Bad, thousands of paths, a huge file, no benefit |
The reason photographs fail is worth stating plainly. A photo has no flat regions and no hard edges, just millions of subtly different pixels. A tracer has to carve that into discrete shapes, so it emits an enormous number of tiny paths and still looks worse than the original. Vector is the wrong tool for photographic content, full stop.
Method 1: automatic tracing
Automatic tracing is the quick route, and for a clean logo or icon it is all you need. The options, from free to paid:
- Inkscape (free, desktop). The best free choice. Open your PNG, select it, then
Path › Trace Bitmap. Choose a single brightness cutoff for a one-colour result, or switch to the colours mode and set how many colours to detect. It is built on potrace and produces genuinely clean paths. - Adobe Illustrator. Select the image and use
Image Tracewith a preset such as Black and White Logo or 3 Colors, then clickExpandto turn the preview into real paths. - One-click web tools. Adobe Express, Canva's vectoriser, Vectorizer.ai, Vector Magic, Recraft and Convertio all take an upload and hand back an SVG. The AI-based ones handle more colours and messier sources; the simple ones are best on clean logos.
- Command line.
potraceconverts a bitmap to a one-colour SVG and is ideal when you need to script conversions in a build pipeline.
A reliable free workflow in Inkscape: open the PNG, select it, run Path › Trace Bitmap, pick brightness cutoff for a single colour or colours mode with the smallest colour count that still looks right, click Apply, delete the original bitmap that is left sitting underneath, and save as Plain SVG. Set that colour count deliberately, because every extra colour is more shapes and a bigger file.
Method 2: redraw it by hand
For a logo that matters, the highest-quality vector is one a person draws, using the PNG only as a reference. Drop the PNG onto a locked layer underneath in Inkscape, Illustrator, Figma or Affinity Designer, then rebuild the artwork on top with the pen tool and basic shapes. If there is text, set it in the actual font rather than tracing the letterforms, so it stays sharp and editable.
It is slower, but you get clean geometry, editable paths, real type and a tiny file, with none of the wobble and stray nodes that automatic tracing leaves behind. This is exactly what a designer does during a brand refresh when the only surviving copy of a logo is a low-resolution PNG. Reach for it when the logo will be printed, used at large sizes, or edited later.
The file-size trap
Here is the disappointment that catches most people: the SVG that comes out is larger and slower than the PNG that went in. It happens whenever the source has many colours or photographic detail, because the tracer produces thousands of small paths, each carrying long decimal coordinates. A traced photo can weigh several megabytes, dwarfing the original, and the browser then burns processing time drawing every one of those paths.
SVG only wins on simple graphics. If your traced file runs to hundreds of kilobytes or thousands of nodes, treat that as the signal to stop: either the source is too complex to be a vector, or you traced with far too many colours. Reduce the colour count, run Path › Simplify in Inkscape to cut node counts, or accept that a PNG or WebP is simply the correct format for that particular image. A guide on optimising SVG files covers how far a legitimately simple SVG can come down, but no optimiser rescues a traced photograph.
The option most people actually want
Step back and look at why you wanted the conversion. Most of the time it is this: you have a PNG of an icon or a logo, and you need it crisp and scalable. Tracing a lossy PNG is the worst possible way to get there, because you are making an approximation of an image that was already a compressed copy.
The better move is almost always to find the original vector. Brand logos nearly always exist as SVG on the company's own brand or press page, or in a logo library. UI icons exist as SVG in icon sets, drawn cleanly and consistently. Start from the real vector and you get perfect geometry and a tiny file with zero tracing artefacts. You can search the icon library or pull a brand logo directly, recolour it with the colour controls, and export clean SVG in seconds. Only trace when no vector original exists anywhere, such as a hand-drawn sketch, an old scan, or artwork you genuinely cannot re-source.
Cleaning up the result
Any traced SVG benefits from a tidy-up before you ship it. Remove the leftover background rectangle the tracer often leaves, merge or group the shapes sensibly, and run the file through an optimiser to strip editor metadata and cut the decimal precision right down. Then view it in a browser at both large and small sizes and look for two common artefacts: thin gaps or halos between shapes, from anti-aliasing in the source, and stray specks, which you fix by raising the speckle suppression and tracing again.
If the result is a single-colour icon, set its fill to currentColor so it inherits the surrounding text colour, as covered in changing icon colour. Finally, confirm the transparency from the PNG carried through as genuinely empty areas rather than a baked-in white box.
Frequently asked questions
Not sure vector is even what you need here? Read vector vs raster first, then decide whether tracing is worth it at all.
Going the other way, from SVG back to a pixel image? That is a straight export, covered in SVG to PNG.