Convert PNG to SVG
Two honest ways to get from PNG to SVG, and they're good for different things. Trace quantises the image to a handful of colours and emits real vector geometry that scales cleanly — ideal for logos, icons and flat graphics. Embed wraps the bitmap unchanged inside an SVG shell, which is what you want when a system demands an .svg file but the artwork is a photo.
Drop PNGs here
Multiple files allowed
How the trace works
The image is reduced to your chosen number of colours with a median-cut quantiser, then the pixels of each colour are covered by rectangles. The result is genuinely resolution-independent vector geometry — it stays razor-sharp at any zoom — but it is pixel-faithful rather than curve-fitted. You get blocky edges rather than the smooth Bézier outlines a dedicated tracer like Potrace produces.
The rectangles are merged in both directions. Each row is first collapsed into runs of identical colour, and then every run is extended downwards for as long as the row below repeats it exactly. That second step is the difference between a usable file and an unusable one: a flat 300 × 300 background is 300 one-pixel-tall runs and one rectangle, and without the merge the SVG of a simple poster is larger than the PNG it came from. The status line reports both numbers and the percentage saved, so you can see it on your own image.
Shapes then decides how those rectangles are written. One path per colour
emits a single <path> whose d is one
M x y h w v h h-w z per rectangle — fewer bytes than the equivalent
<rect> tags, and one element for the renderer to deal with instead of hundreds.
A rect per rectangle writes them out individually, grouped under a
<g fill="…"> per palette entry, which is larger but far easier to edit by hand
in Illustrator or Figma.
That trade-off is fine, and often preferable, for pixel art, flat icons, screenshots of UI, maps and diagrams. It's the wrong tool for turning a photograph into a clean logo — no automatic tracer does that well, and the honest answer there is to redraw it.
Why the grid size matters
Trace output grows with pixel count: every colour change along a row adds a rect. A 2000-pixel-wide
photo can produce megabytes of markup that no browser enjoys rendering. The
trace grid setting caps the longest side used for tracing (300 px by
default) while the SVG's width and height stay at the original
dimensions, so it still displays at full size. Raise it for more fidelity, lower it for smaller
files. Fewer colours also means far fewer rects.
FAQ
Will this give me smooth curves like a real vectoriser?
No. It produces axis-aligned rectangles that reproduce the pixels exactly. For curve-fitted outlines you need a Bézier tracer such as Potrace, usually with hand cleanup afterwards.
Is embed mode a "real" SVG?
It's a valid SVG file, but the artwork inside is still a bitmap — it will blur if you scale it up. Use it when a pipeline requires the .svg extension, not when you need true scalability.
What happens to transparency?
In trace mode, pixels below 50% alpha are skipped entirely, so the background stays transparent. In embed mode the PNG keeps its own alpha channel.
Why is my traced file so big?
Too many colours, too large a grid, or a noisy source. Drop to 4–8 colours and a 200 px grid; for photographic input, Posterize or Reduce colors first so the runs get longer.
Can I edit the result in Illustrator or Figma?
Yes — the groups and rects import as ordinary editable shapes. Merging them into single paths per colour is a one-click union in either app.