Bhinish Dhiman
How to convert a PNG to SVG, and when a vector is the wrong answer
Trace it: choose what kind of image it is (logo, icon, line art, pixel art), lock the output to your exact hex colours, and check the result against the original before downloading. A good trace of a logo is a few kilobytes with a handful of paths. If the image is a photograph, keep the JPEG or WebP: tracing one gives a larger file that looks posterised.
A PNG stores a colour for every pixel. An SVG stores shapes. Converting one into the other is not a change of format but a reconstruction: something has to look at the pixels and decide where the shapes are. That is why one “PNG to SVG” tool can hand back a clean 2 KB logo and another a 100 KB file of slivers, from the same image.
Convert a PNG to SVG with the tool
- Open PNG to SVG. It starts on a sample logo, already traced, so you can see what a result looks like before you add your own.
- Press Choose an image, drop a file anywhere on the page, or paste one. PNG, JPEG, WebP, GIF and AVIF all work; on a phone, Take a photo traces a drawing straight from the camera.
- Under What is it?, pick Logo, Icon, Line art, Pixel art, Illustration or Photo. Each preset was tuned on its own sample image.
- Open More options and look at Colours. For a logo or an icon made of flat colour, the page locks the result to the exact colours it measured and shows them as swatches (the More options line says so while it is closed). To use your brand values instead, type them into Your brand colours, as hex and press Lock.
- In the same group, tick Make the background transparent if the logo should sit on any background. It removes the colour around the edge of the image everywhere it appears, including inside letters.
- Under Compare, switch from Wipe to Difference and set Zoom to 4×. Red marks every pixel the vector got wrong.
- Read SVG size, Paths, Nodes and Matches the original under Result, then press Download SVG or Copy SVG code. Both are also on the bar at the foot of the screen (D and C on a keyboard).
Tracing, in one paragraph
Raster-to-vector tracing is grouping neighbouring pixels of similar colour into regions, following the edge of each region, and fitting curves to that edge. The tool uses VTracer, an open-source tracer under the MIT licence, compiled to WebAssembly and run in a background thread of your browser. Every result then goes through one pass of SVGO, the optimiser behind the site’s SVG optimiser, before the numbers are taken, so the figures describe the file you download.
The ways to do it, compared
| Method | Where the image goes | Cost | What you are told about the result |
|---|---|---|---|
| PNG to SVG | Stays on your device | Free | Bytes, paths, nodes, colours, error per pixel |
| vectorizer.ai | Uploaded | Preview free; $9.99 a month to download | A preview |
| Vector Magic | Uploaded | Preview free; $5.49 a month, or $295 for the desktop edition | A preview |
| Inkscape, Trace Bitmap | Stays on your device | Free, desktop install | The traced objects, to inspect by hand |
Neither macOS Preview nor the Windows Photos app can trace an image. There is no built-in method on either system.
Why a four-colour logo comes back with fourteen colours
Every edge in a PNG is a row of blended pixels, part one colour and part the next, so the edge looks smooth on screen. A tracer sees each blend as a colour of its own. Traced as it is, the tool’s sample logo, which has four colours, came back with 14 fills in 15 paths, and its white came back as #fefefe.
The palette lock reads colours only from the flat parts of the image, where there are no blends, then maps every pixel to the nearest of them before tracing. On the same logo that gave 4 fills in 7 paths, and the share of pixels the eye cannot tell from the original (ΔE 2 or less) went from 95.4% to 98.0%.
Mapping the pixels first matters more as the image gets larger. Enlarged to 2,560 pixels wide, the same logo traced to 493 paths when only the finished shapes were snapped to the palette. With the pixels mapped first it took 12.
What a good result looks like
These are the tool’s own samples, measured after the SVGO pass:
| Sample | Source | SVG | Paths | Pixels within ΔE 2 |
|---|---|---|---|---|
| Logo, 640 × 280 | 18,748 B PNG | 2,157 B | 7 | 98.0% |
| Icon, 128 × 128 | 5,233 B PNG | 810 B | 1 | 95.1% |
| Line art, 720 × 480 | 49,442 B PNG | 4,201 B | 1 | 93.7% |
| Pixel art, 192 × 192 | 1,884 B PNG | 883 B | 11 | 100% |
| Illustration, 720 × 440 | 42,674 B PNG | 1,971 B | 9 | 64.4% |
| Photo, 480 × 480 | 39,044 B WebP | 228,206 B | 636 | 42.3% |
The illustration’s low figure is its sky. A vector fill is one colour, so a soft gradient is traced as a few bands, and every pixel between two bands counts as a difference. Line art scores lower than the logo for a different reason: its thin strokes are mostly edge.
A photograph is the wrong input
A photograph has almost no flat colour. Before tracing, the tool measures the share of pixels whose neighbours all match them: the five graphic samples measured 66% or more, even re-saved as JPEGs at quality 70, and every photograph tried measured 40% or less. Anything under 55% is flagged with a warning before you download.
The table shows why. The photo sample traced to a file 5.8 times the size of the WebP it came from, in 636 flat patches, and less than half of its pixels matched. If someone asks for a photo “as a vector”, the useful answer is usually the original file.
Pixel art and line art
Pixel art that has been enlarged for sharing is detected from its blocks: the page finds the common size of every run of identical pixels, traces the sprite at its true size and scales it back up, so every pixel comes out as an exact square. The sample, 16 × 16 pixels shared at 12×, matched the original at every pixel.
Line art is traced as ink only, so the paper is transparent without asking. Note that the tool traces outlines: a pen line becomes a thin filled shape, not a stroke whose width you can change later. Inkscape’s Trace Bitmap has a centre-line mode, which its manual recommends for handwriting and line drawings, if you need strokes.
Check that nothing was uploaded
Open your browser’s developer tools, choose the Network panel and drop an image onto the page. The tracing engine, a WebAssembly file of about 650 KB, arrives from the site the first time you use it; your image never leaves. After that the tool works with the network switched off.
When the SVG is ready, PNG to SVG is where to make it, and the SVG optimiser is where to tune an SVG you already have. Going the other way, from a vector back to a picture, is the job of SVG to PNG.