How to use it
- Drop a PNG, JPG, WebP, GIF or BMP on the page. It is traced immediately with the default settings (black & white, medium detail).
- Compare the original and the vector preview side by side; the stats show how many paths and colours the SVG has and how its size compares with the source.
- For a monochrome logo adjust the threshold until thin strokes are complete but noise is gone, and pick a fill colour. For a multi-colour logo switch to Colour and choose 4, 8 or 16 colours.
- Use Detail to trade accuracy for node count, “Remove specks” to drop tiny islands, and Smooth to soften JPEG artefacts. Click “Vectorize” to apply changes.
- Download the .svg or copy its source to paste into a code editor.
Example
A 240 × 240 PNG with a white background, a black 100 × 180 rectangle and a blue (#2053cb) 60 × 60 square. In black & white mode at threshold 128 both shapes are darker than the threshold, so the SVG contains 2 paths, both filled black, and the white background is dropped. In Colour mode with 4 colours the tracer finds white, black and #2053cb; with “Remove background colour” ticked the result has 2 colours: a black path and a #2053cb path. The SVG is about 300 bytes against 786 bytes for the PNG.
How tracing works
The image is decoded on a canvas, reduced to at most 2 megapixels and converted to a palette image: in black & white mode by a luminance threshold (0.299 R + 0.587 G + 0.114 B), in colour mode by assigning every pixel to the nearest of the N most common colours (a popularity palette with a spread rule so that a dark and a light shade of the same hue do not crowd out a distinct colour). The palette image is traced with imagetracerjs (public domain), which walks the edges of each colour layer, splits them into straight lines and quadratic curves within the chosen tolerance (Detail: 2 px, 1 px or 0.4 px) and discards paths shorter than the speck limit. The tool then writes its own SVG: one <path> per colour with the even-odd fill rule for holes, hex fills, a viewBox and nothing else – no <image>, no scripts, no metadata.
Limits: anti-aliased edges become slightly wobbly at Low detail; very thin lines (1 px) may break into dashes – scale the image up before tracing or lower the threshold; JPEG noise can create specks, which Smooth and the speck filter remove; photographs are posterised rather than reproduced.
Sources: imagetracerjs – options reference, W3C – SVG paths.
Questions
- Is this a real vector conversion or just a PNG wrapped in an SVG file?
- A real conversion. The SVG contains only path elements with coordinates; you can open it in a text editor and see the curves. Wrapping a bitmap in an SVG would not scale any better than the PNG.
- Why does my photo look like a paint-by-numbers picture?
- Tracing turns areas of similar colour into flat shapes. With 16 colours a photo becomes a poster-style illustration; more colours would only produce a huge, slow file. Use a raster format for photographs.
- The logo has gaps or missing thin lines. What can I do?
- Raise the threshold a little (more pixels count as dark), set Detail to High and Remove specks to 0, or upscale the PNG 2× in the Image Resizer first so that strokes are wider than 2 px.
- Can I keep the white background?
- Yes – untick "Remove background colour". The background then becomes a white rectangle-shaped path behind the other shapes.