Trace a bitmap into vector paths, in your browser. It works on flat artwork — logos, icons, screenshots of solid shapes — and not on photographs, and a trace never recovers the original vector file.
Drop a PNG here, or click to choose
JPG, GIF, WebP and BMP work too. Nothing is uploaded — the tracing happens on this device.
This is a colour-layer trace, not a conversion. Flat artwork traces well and photographs do not, and the result is an approximation of the picture rather than the vector file it may once have come from. Images over 512 px on the longest side are downscaled before tracing, so the browser stays responsive.
Original
Traced SVG
A PNG is a grid of pixels. An SVG is a set of shapes. Nothing in the PNG records where the shapes were, so a tracer has to infer them. This one reduces the image to a palette of two to eight colours, walks the boundary of every region with marching squares, thins each outline with the Ramer-Douglas-Peucker algorithm, and writes one path per colour using even-odd fill so enclosed regions become real holes.
The output is a stack of flat colour shapes, an approximation of the picture rather than a reconstruction of the file it came from.
Flat artwork: logos and wordmarks already in solid colour, icons, screenshots of solid-colour interfaces, flat-filled charts, and scanned line art at two colours.
Photographs do not, and neither do gradients, soft shadows, blur, or text under about ten pixels tall. A gradient has no boundary to find, so the quantiser invents one and you get banding; a photograph becomes hundreds of ragged paths that weigh more than the PNG and look worse. If the result resembles a bad screen print, the input was the wrong kind of image, not the wrong setting.
If the artwork began in Figma or Illustrator, the original has named layers, exact curves, live text and the intent of whoever drew it. A trace has polygons approximating a bitmap, built from straight segments rather than fitted curves, so the edges facet when you zoom in.
When the artwork matters — a logo going on a sign, a mark that will be scaled or edited later — ask whoever made it for the source, or redraw it. Half an hour with the pen tool beats an afternoon cleaning up traced anchor points. Tracing is for when the source genuinely no longer exists. Going the other way is lossless, which is what SVG to PNG is for.
Colours sets the palette size. Count the flat colours in the image, add one for the background, and stop there; more only splits antialiased edges into extra layers. Detail controls the simplification. Sharp keeps pixel-level steps, for pixel art and small icons; Smooth strips them, for large shapes; Balanced holds about 99% of the original area with a fifth of the points. Background drops the colour that dominates the edges of the image, usually the ground behind a logo.
Every step above runs inside this page: decode, palette, boundary walk, path writing. The pixels are read from the file you picked and go nowhere else, so an unreleased mark never reaches anyone’s server. The tool works offline. The cost is the resolution cap: the work grows with pixels multiplied by colours, so anything over 512 pixels on the longest side is downscaled first. The SVG still carries the original width and height, so it drops into a layout at the size you expect.
SVG to PNG
Convert SVG files to PNG at any scale, in the browser. Batch and transparent background.
HEX to RGB
Paste a hex colour, get RGB, HSL and CSS you can copy.
RGB to HEX
The other direction, with the same converter underneath.
CSS Grid generator
Draw a grid, copy the CSS. Flexbox on a second tab.
Mesh gradient generator
Layered radial gradients, exportable as CSS or PNG.
OG image generator
Make a 1200x630 share card, and check the tags on a page you already have.
Website mockup generator
Drop a screenshot into a browser or device frame and export it.
Designing a site? Siter.io builds it from Figma.