Free PNG to SVG converter
Trace a PNG into editable vector paths
Free, no signup, and the tracing runs in your browser: pick between 2 and 16 colors and every boundary in the picture is followed and written out as path data you can drag in Illustrator, Figma or Inkscape. It is built for flat artwork — logos, icons, chart screenshots, scanned line drawings — where a 512 × 512 trace re-rasterizes to within 1.8 of 255 per channel of the original. A photograph is out of scope, and rather than take that on trust you get the color error in ΔE on screen, next to the ring and node counts.
- 100% free
- No signup
- 2-16 colors
- Real path data
- Built for flat art
Drop a PNG — a logo, an icon, a screenshot of a chart, a scanned line drawing. Flat color is what contour tracing is for.
Press Ctrl+V anywhere on the page to drop in a screenshot or a copied image — no need to click the field first.
How to trace a PNG into SVG
Three steps: open flat artwork, tune two sliders, read the markup you are about to keep.
Open something flat
Drop a logo, an app icon, a screenshot of a chart or a scanned line drawing — anything whose colors sit in solid areas rather than fading into each other. PNG, JPEG, WebP, GIF and BMP all decode; a file that is already an SVG is turned away, because there is nothing in it to follow. Pixels with an alpha value below 128 are treated as absent, so a logo on a transparent background keeps that background.
Set the palette, then the tolerance
The color slider decides how many fills the drawing is allowed, from 2 up to 16, and it is the setting that matters most: a two-color mark wants 2, a flat illustration wants 5 or 6, and pushing it higher on a shaded image buys ΔE at the price of hundreds of extra rings. Detail tolerance controls how far a simplified outline may stray from the pixel staircase — 0 keeps every step, 0.8 straightens the diagonals without moving a corner, and above 2 the geometry visibly rounds. The island slider deletes speckles under the size you set by merging them into whichever neighbor they touch most.
Read the markup before you trust it
The panel lists every layer with its hex value, its share of the artwork and how many rings and nodes it contributed, and the disclosure below it shows the file itself — search that text for “image” or “base64” and you will not find either. Copy the markup or download the .svg, then open it in Illustrator, Figma or Inkscape: the nodes are draggable and each color is one compound path, so recoloring is a single click rather than a re-export.
Technical specifications
| Tracing method | Marching-squares boundary following along the pixel lattice, then Ramer-Douglas-Peucker simplification; one path per color holding all of its rings under fill-rule evenodd, so counters stay open |
|---|---|
| Palette | 2 to 16 colors: median cut, six Lloyd refinement passes in CIE Lab, then each centre snapped onto the exact color holding 25% or more of its cluster. An image with fewer distinct colors than the setting keeps its own values untouched |
| Accepted input | PNG, JPEG, WebP, GIF and BMP — anything the browser can decode. An SVG is refused rather than passed through |
| Transparency | Pixels under alpha 128 join no layer, so a transparent PNG traces to a transparent SVG. Partial alpha is not reproduced: a traced area is filled or it is absent |
| Trace grid | 512, 768 or 1024 px on the long side; anything smaller is traced at its own size with no resampling, and coordinates are scaled back to the source dimensions before they are written |
| Measured fidelity | A 512 × 512 antialiased logo at 3 colors and tolerance 0.8 re-rasterizes to a mean error of 1.8 per channel out of 255, with 1.1% of pixels off by more than 32 — all of them on the antialiased edge |
| Cost of simplification | Tolerance 1.0 px on a 52 px circle takes 116 lattice corners down to 20 nodes and moves 0.8% of pixels across the outline; at 0.5 px the reconstruction is pixel-exact |
| Speed | Flat artwork on the 768 px grid finishes in about 0.1 s. The worst case measured — a 1024 px grid of photographic noise at 12 colors — took 0.9 s and produced 41,000 rings, which is the output telling you to stop |
Frequently asked questions
Can this vectorise a photograph?
No, and the page will tell you so with a number rather than letting you find out later. Tracing needs a boundary, and a photograph has none: the pixel values change continuously, so reducing them to 16 fills produces the posterised bands you get from a screen-print filter, cut into thousands of rings. The mean ΔE readout above the output measures exactly this — under 2 the palette fits the artwork, over 6 you are looking at shading, and in the teens you have a photograph, at which point the honest advice is to keep the raster and export it at the size you need instead.
Does the SVG contain the original bitmap?
No, and that distinction is the reason this page exists. A large share of converters that answer to this search wrap the PNG in a base64 data URI inside an image element and rename the result .svg: the file has the extension and none of the properties, since it will not scale cleanly, cannot be edited, and lands roughly a third larger than the PNG it swallowed. Any converter takes five seconds to check — open the file in a text editor and look for the string base64. Here you will find nothing but M, L, C and Z followed by coordinates.
Why do the edges of my logo look slightly rough?
Because the antialiased pixels along an edge have to be assigned to one side or the other before anything can be traced. A blend pixel that is 60% blue and 40% white is quantised to whichever palette color is nearer in Lab, and the boundary therefore lands on the pixel grid rather than between the grid lines. Three things help: trace on the 1024 px grid instead of 512 so each edge decision is finer, switch corners to Curved, which fits a Catmull-Rom curve through the simplified nodes, and raise the tolerance to about 1.2 so the staircase is replaced by a straight run rather than followed faithfully.
Is the result editable in Illustrator, Figma or Inkscape?
Yes — each color arrives as one compound path with real anchor points, so a node tool grabs them and a fill swatch recolors the whole layer at once. The one thing to know before you start pulling nodes about is that every path carries fill-rule="evenodd", which is how the counters survive: the inside of an O is a second ring within the same path, and the even-odd rule is what punches it out. If your editor rewrites the fill rule to nonzero on import, holes will fill in, and the cure is to reverse the direction of the inner ring rather than to redraw it.
What happens to text in the image?
It comes out as outlines, not as text, because nothing here reads letters. There is no OCR step: a capital R is a shape with a hole in it as far as the tracer is concerned, and the SVG will contain path data rather than a text element with a font-family. For a wordmark that is usually the correct outcome, since outlines are exactly what a logo file should hold. For a paragraph it is not — retype it in your design tool, where it stays searchable, selectable and a tenth of the size.
Why is my SVG larger than the PNG it came from?
Because vector data is only smaller when the drawing is simple, and the byte counts on screen let you see where the crossover sits for your image. The three-color mark used to measure this page came to 7.4 kB of path data against the 24.8 kB PNG it was traced from, and the gap widens in the vector's favour every time the display size goes up, because the path data does not change. A busy or noisy image goes the other way fast: raise the tolerance, cut the color count, or turn the island slider up, and watch the node total fall. If none of those get the file below the PNG, that is the measurement telling you this picture wants to stay a bitmap.
Where did the small details go?
Two controls throw detail away deliberately, and both are yours to switch off. The island slider merges any connected area smaller than its value into the neighbor it shares the most edge with, which is what removes JPEG speckle and stray anti-alias crumbs — set it to 0 and every speck is kept. Detail tolerance discards nodes that sit within its distance of the straight line between their neighbors, so a one-pixel notch disappears at 1.5 and survives at 0. Trace at 1024 px with both at zero if you need everything, then simplify from there.
About raster-to-vector tracing
Search for this conversion and most of what comes back does not perform it. The common trick is to base64 the bitmap into a data URI, drop it inside an image element, wrap that in an svg root and hand you a file with the right extension — which scales as badly as the PNG did, cannot be edited node by node, and weighs about a third more than the original because base64 costs four bytes for every three. It is worth knowing how to catch: open any converter's output in a text editor and search for the string base64. A real trace has no bitmap in it, only coordinates, which is why the panel above lets you read the file before you download it. Once you have genuine geometry, the SVG optimizer has something to work on — rounding coordinates and dropping editor metadata does nothing for a wrapped bitmap.
The tracing itself is three ideas stacked. First quantisation, because a boundary needs two sides: the picture is reduced to a small palette by median cut, refined with Lloyd iterations in CIE Lab so the centres settle on the colors the eye separates rather than the ones RGB arithmetic prefers, then each centre is snapped onto the exact value that dominates its cluster — which is how a brand blue survives as #2563eb instead of drifting to #2461e9 under the weight of a few thousand antialiased edge pixels. Then marching squares walks the lattice between “this color” and “everything else”, turning the same way at every saddle so a ring can never cross itself, and every closed loop comes back as integer corners. Finally Ramer-Douglas-Peucker throws away the corners that sit within the tolerance of a straight line, which is what turns a 116-step staircase around a circle into 20 nodes. Holes are handled by keeping all the rings of one color in a single path under the even-odd rule, so the middle of a letter O is a second loop rather than a second shape.
What it cannot do is worth saying plainly. Gradients, soft shadows, blur and partial transparency have no edge to follow, so they either band into steps or vanish; a photograph traced at any setting is a mosaic that is bigger than the JPEG and no more editable. Scanned line art works if the scan is clean, but a JPEG of a scan carries ringing around every stroke, and the island slider exists mainly to sweep that up. When the trace is good, it is usually the start of something else: a mark that has become paths can be dropped into the favicon generator for the tab-icon ladder, pushed through image to ICO when a single legacy file is all that is wanted, or sent back the other way by SVG to PNG once it is clean, which is the round trip that shows you what the tracing actually changed. And if the source is a screenshot you were only ever after the colors from, the dominant-color extractor answers that question without any of this machinery.
Where your image is read
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The picture is decoded into an off-screen canvas and read back one array of pixels at a time; that array, the palette and the path data all live in this tab's memory and are discarded when you close it. Dropping a screenshot of unreleased work here is safe in the only sense that matters — the bytes never reach a server, because there is no server in the loop.