PNG to SVG Converter - Trace Images into Vector Paths
Turn a flat logo, icon, or piece of line art into a resolution-independent SVG. Tracing runs locally in this tab, so the file never leaves your device.
- No upload, no sign-up
- Editable vector output
- Tells you first if the image suits tracing
What a PNG to SVG conversion actually does
A PNG stores a grid of pixels. An SVG stores shapes — filled outlines described by coordinates and curves. Converting PNG to SVG is therefore not a format swap the way PNG to JPG is: nothing in a pixel grid records where one shape ends and the next begins. The converter has to infer it, by grouping pixels of similar colour into regions and drawing an outline around each region. That inference is called tracing, or vectorising, and how well it works depends almost entirely on what is in the picture.
When it works, the result is better than the file you started with. The outline is resolution independent, so the same asset stays sharp on a business card, a website header, and a printed banner, and flat artwork frequently ends up smaller than the raster original. In our own measurements a 2.3 KB logo became a 0.5 KB SVG built from two paths, with the difference from the original invisible at normal viewing size.
When it does not work, the failure is not subtle. A photograph has no flat regions to group: every pixel differs slightly from its neighbour, so the tracer produces thousands of tiny paths that together weigh several times more than the JPEG did, while looking like a bad watercolour of the original. That is why this converter inspects the image and tells you which case you are in before you spend time on settings.
Which images convert to SVG well
We measured this instead of guessing. Each test image was traced, the resulting SVG was rasterised back to the original dimensions, and the two were compared pixel by pixel. A lower error means the vector is closer to the source.
| Flat logo, few solid colours | 2.3 KB PNG became a 0.5 KB SVG with 2 paths; error 2.1 | The ideal case. Flat art at 16 colours. |
| Icon or pictogram | A handful of paths, well under 1 KB | Ideal. Minimal gives the smallest file with no visible loss. |
| Line art or a signature | Traces cleanly; the colour count makes no measurable difference on monochrome input | Use Minimal — extra colours cost file size and buy nothing here. |
| Badge or stamp with transparency | 1.1 KB, transparent areas preserved; error 6.8 | Works well. Keep colours at 8 or above or the tones shift. |
| Interface screenshot with text | Panels and buttons trace fine, but each letter fragments into several paths | Usable for the shapes. Set the text again in your editor. |
| Photograph | Quantises to thousands of colours; the SVG is several times larger than the PNG | Not suitable. Keep the raster file, or compress it instead. |
The tool runs this check on your own image automatically and shows a verdict before the PNG to SVG conversion starts, so you find out in advance rather than after downloading something unusable.
What each setting does
A PNG to SVG trace exposes four controls, but they are not equally important. One of them decides the quality of the result and the rest are fine adjustment.
Colours
How many palette entries the tracer may use, and by far the most consequential setting. Eight is the floor: below it, coloured artwork visibly distorts. In our measurements a flat logo scored an error of 2.1 at eight colours, 15.1 at four, and 56.9 at two. Above eight the curve flattens quickly, which is why 16 is the default and 32 is reserved for detailed illustration rather than being the recommended maximum.
Discard small shapes
Throws away paths below a given area, which clears the specks left behind by anti-aliased edges. We measured almost no difference between the lowest and highest values on real artwork, so it is an advanced control rather than something the presets vary. Raise it if a trace comes back speckled.
Curve tolerance
How closely the traced outline is allowed to depart from the pixel edge. Looser tolerance gives fewer, smoother curves and a smaller file; tighter tolerance follows every step in the original, including the jagged ones. The presets set this alongside the colour count.
Pre-blur
Softens the image before tracing. Useful on a noisy scan, where it stops the tracer from turning film grain or JPEG artefacts into hundreds of paths. Leave it at zero for artwork that is already clean.
How to convert PNG to SVG
Everything happens inside this browser tab. Nothing is uploaded, which matters for unreleased branding and anything covered by an NDA.
- Drop a PNG onto the tool or pick one from your device. JPG, WebP and GIF are accepted as well.
- Read the suitability verdict. Good means flat artwork that will trace cleanly; not suited means the image is photographic and the SVG would be larger and less accurate than the original.
- Pick a detail level, or open the advanced settings to control the colour count, small-shape removal, curve tolerance, and pre-blur yourself.
- Press Convert to SVG and compare the traced result against the original preview.
- Download the SVG. It is plain markup that opens in Figma, Illustrator, Inkscape, or any text editor.
When a PNG will not convert well
Photographs are the clearest failure, and it is worth being blunt about it because a great many PNG to SVG conversions are attempted on exactly the wrong file. Tracing works by finding regions of one colour. A photograph has none: the sky in a landscape may look uniform but contains hundreds of subtly different blues, and the tracer will faithfully outline every one of them. The output is enormous, slow to render, and visibly worse than the photograph. If you need a smaller photo, compress it — do not vectorise it.
Text is the second common disappointment. Letterforms trace as shapes, not as text, so the result is not selectable, not searchable, and not re-editable as type. Small text also suffers because anti-aliasing blurs the boundary the tracer needs, and each letter shatters into several overlapping paths. When a logo contains a wordmark, the honest workflow is to trace the symbol here and set the words again in your design tool with the real font.
Soft gradients and drop shadows sit in between. They convert without error, but a smooth gradient becomes a stack of flat bands — the same posterisation you would see if you reduced a photograph to sixteen colours. Sometimes that is a pleasing effect and sometimes it wrecks the design, so check the preview at full size rather than trusting the file size alone.
Finally, no tracer can recover detail the source never had. A 64-pixel logo pulled off a website will trace into a lumpy approximation of itself, because the lumps genuinely are what the pixels say. Start from the largest, cleanest copy you can find — an original export rather than a screenshot, and a PNG rather than a JPG, since JPEG compression adds its own blocky edges that the tracer will dutifully turn into paths.
Common questions
Is the SVG editable afterwards? ▾
Yes. The output is standard SVG markup made of filled paths, so it opens in Figma, Illustrator, Inkscape, and any code editor. You can recolour individual paths, delete them, or scale the whole thing without any loss.
Will the SVG be smaller than the PNG? ▾
For flat artwork, usually yes — often dramatically so. A 2.3 KB logo traced to 0.5 KB in our tests. For photographs it is the opposite: the SVG can be several times larger than the image it came from, which is one of the signals the suitability check uses.
Is my image uploaded to a server? ▾
No. The tracer runs as WebAssembly and JavaScript inside this page, in a background worker. Your file is never sent anywhere, so you can safely convert unreleased logos and client work.
Can I convert a photo to SVG? ▾
Technically yes, and the result will almost certainly be worse than the photo. Expect thousands of paths, a much larger file, and a posterised look. The tool will flag a photographic image before you convert so the outcome is not a surprise.
Why did the text in my image come out wrong? ▾
Because tracing sees letterforms as shapes, not as text. Small or anti-aliased type fragments into multiple paths per character. Trace the graphic elements here, then set the text again with a real font in your design tool.
What is the difference between this and redrawing by hand? ▾
A hand redraw reconstructs the design with the fewest possible clean curves and the correct font. Tracing follows the pixels, so it produces more points and inherits any softness in the source. For a simple flat logo the difference is often invisible; for a complex or low-resolution mark, a redraw is still better.
Which file formats can I convert? ▾
PNG, JPG, WebP and GIF are all accepted, since the image is decoded by the browser before tracing. PNG is the best starting point because it has no compression artefacts for the tracer to mistake for detail.
Is transparency preserved? ▾
Yes. Transparent regions stay transparent in the SVG, so a traced badge or sticker will sit correctly on any background colour.