Private: nothing you enter is stored or sent
PNG to SVG
Trace a PNG, JPG or WebP into a true vector SVG made of editable paths, with six tracing styles.
Real tracing, not a PNG inside an SVG
There are two ways to “convert” PNG to SVG, and they give very different files.
- Embedding: the PNG is placed inside an SVG wrapper. The file ends in .svg, but it is still the same grid of pixels and goes blurry when you enlarge it. SVG allows this, which is why some converters do it. (MDN (opens in new tab))
- Tracing (vectorising): the shapes in the image are redrawn as paths, which are drawing commands for lines and curves. These stay sharp at any size and can be edited in Inkscape, Illustrator or Figma.
This tool does tracing. It uses ImageTracer, an open-source JavaScript tracer released into the public domain. (ImageTracer on GitHub (opens in new tab)) The steps are:
- Reduce the colours. The image is grouped into a fixed number of colours (16 in the Balanced style).
- Split into layers. Each colour becomes its own layer.
- Trace the edges. The outline of every area is turned into straight lines and curves.
- Write the SVG. Each shape is saved as a
pathfilled with its colour.
How to use the PNG to SVG converter
- Drop one PNG, JPG or WebP file into the box above, or click browse. Logos, icons, signatures and simple drawings give the cleanest result.
- The tool traces it straight away with the Balanced style and shows a preview with the file size.
- Try another Style if the edges look rough or the file is too big. It traces again each time you change it.
- Click Download to save the .svg file.
The six tracing styles
| Style | What it does | Use it for |
|---|---|---|
| Balanced | 16 colours, drops tiny specks | Most logos and icons. Start here. |
| Detailed | 64 colours, keeps tiny shapes, more precise points | Illustrations with many colours. Files get much bigger. |
| Posterized | 4 colours, smooths the image first | Bold, poster-like art and the smallest files. |
| Smooth curves | Prefers curves over straight lines | Rounded lettering and hand-drawn shapes. |
| Sharp edges | Prefers straight lines and corners | Geometric logos, pixel-style icons. |
| Grayscale | 7 fixed shades of grey | Black and white art, stamps and signatures. Transparent areas come out white. |
Real results from our test
We traced three images on 19 October 2026 in a Chromium browser. The numbers show why tracing suits some images and not others.
| Image | PNG size | SVG, Balanced | SVG, Detailed | Verdict |
|---|---|---|---|---|
| Two-colour logo, 800 × 800 px, transparent background | 9.3 KB | 2.6 KB, 9 paths | 39.7 KB, 272 paths | Ideal. Smaller than the PNG and sharp at any size. |
| Web page screenshot, 1200 × 675 px | 430.9 KB | 2.52 MB, 15,495 paths | 8.67 MB, 63,612 paths | Poor. Six times bigger, and small text comes out rough and smudged. |
| Photo-style landscape wallpaper, 1920 × 1920 px | 3.30 MB | 184.9 KB, 158 paths | 2.09 MB, 7,804 paths | Turns into flat colour bands, like a poster. |
The pattern is simple. Flat shapes with a few solid colours become a handful of paths. Photos and screenshots have thousands of tiny colour changes, so you either get a huge file or lose the detail. For those, keep the PNG or JPG.
Transparency and size
- Transparent backgrounds stay transparent in the Balanced, Detailed, Posterized, Smooth curves and Sharp edges styles. Areas that were see-through become shapes with zero opacity.
- Grayscale puts transparent areas on white. Its fixed grey palette has no transparent shade, so see-through areas are filled with white before tracing and come out as white shapes. Pick another style if you need the background to stay clear.
- Large images are traced at up to 1000 px on the longest side, then the paths are scaled back up to the original size. This keeps the browser responsive, but very fine detail in big images is smoothed out.
Using the SVG on a web page
The SVG is ready to scale as soon as you download it. It carries a whole-pixel width and height equal to your image’s size, plus a viewBox, which maps the drawing’s coordinates onto whatever size the SVG is shown at. (MDN (opens in new tab))
The width and height only set the default size. For an 800 × 800 logo, the file starts with <svg width="800" height="800" viewBox="0 0 800 800". Give it a CSS width such as width: 160px or width: 100% with height: auto, and it shrinks or grows to fit while keeping its shape. No text editor needed.
When you need a better vector tool
A colour-based tracer like this one is quick and free, but it is not a designer. It will not rebuild perfect circles, match a font or clean up a blurry, low-resolution logo.
For a brand logo going on signboards, printed merchandise or a laser cutter, trace it here to get a starting point, then tidy the paths in Inkscape (free) or Illustrator. If you still have the original design file from whoever made the logo, use that instead. It will always be better than any trace.
Limitations
- One file at a time.
- Photos and screenshots give huge files or a posterised look.
- Colours are approximated: similar shades are merged, so a gradient becomes bands.
- SVG output only. To turn an SVG back into PNG or JPG, use the SVG converter.
Key facts
- SVG is an XML-based vector format that describes an image as drawing commands for shapes, lines and colours, and scales smoothly to any size. (MDN (opens in new tab))
- SVG is not generally useful for photographic images, although it can contain bitmap images. (MDN (opens in new tab))
- PNG is a lossless raster format, so it stores a fixed grid of pixels. (W3C (opens in new tab))
- ImageTracer, the library this tool uses, is released under the Unlicense into the public domain. (GitHub (opens in new tab))
FAQ
PNG to SVG FAQs
Does this tool really convert PNG to vector?
Yes. It traces the image into SVG paths, so the result is a true vector that stays sharp when enlarged and can be edited in Inkscape, Illustrator or Figma. It does not embed the PNG inside an SVG wrapper. The trade-off is that colours are simplified to a fixed palette, 16 colours in the Balanced style.
Why is my SVG file bigger than the PNG?
Your image probably has lots of small colour changes, like a photo or screenshot. Each colour area becomes its own path, and thousands of paths add up. Our 430.9 KB screenshot became a 2.52 MB SVG. Try the Posterized style for a smaller file, or keep the PNG, since tracing is meant for logos and icons.
Can I convert a photo to SVG?
You can, but the result looks like a flat poster, not a photo. Our 1920 × 1920 landscape wallpaper traced to 158 paths in 16 colours, and its smooth gradients turned into flat bands. The Detailed style kept more but produced a 2.09 MB file. For photos, keep JPG or WebP. SVG is built for shapes and lines.
Will the transparent background stay transparent?
Yes, in five of the six styles: Balanced, Detailed, Posterized, Smooth curves and Sharp edges. Transparent areas become shapes with zero opacity. The Grayscale style is the exception, because its fixed grey palette has no transparent shade. It puts see-through areas on white before tracing, so the background comes out white. Pick another style if it must stay clear.
Which style is best for a logo?
Start with Balanced. Our two-colour test logo came out at 2.6 KB with 9 paths, smaller than the 9.3 KB PNG. Switch to Smooth curves for rounded lettering, Sharp edges for geometric shapes, or Detailed if small parts go missing. Use the largest, cleanest version of the logo you have for the best edges.
Is my image uploaded to a server?
No. Tracing runs inside your browser with the ImageTracer library, which loads from this site the first time you use the tool. Your image is read and traced on your device and never sent anywhere. That matters for unreleased logos and client work you cannot share.
Can I use the SVG for Cricut, laser cutting or printing?
Yes, the output is a standard SVG made of filled paths, which cutting and printing software can open. For cutting, a simple design with few colours works best, so try Posterized or Grayscale. Check the paths in Inkscape first, since tiny stray shapes can confuse a cutter.
Will the SVG resize on my website?
Yes. The SVG has a viewBox as well as a whole-pixel width and height, so CSS can resize it. Set a width in your stylesheet, such as 200px or 100%, with height set to auto, and it scales sharply while keeping its shape. With no CSS at all, it shows at your original image’s pixel size, because that is what its width and height say.