SVG Tracer
Convert a logo, icon or lettering into editable SVG paths. Adjust colors, simplification, corners and transparency, and inspect the resulting node count. Tracing runs in a local browser worker, with the image scaled to at most 900 pixels on its longest side. Copy SVG or download SVG and PNG without uploading the source image.
Drop an image here
or drop anywhere on this page · Choose a file · 100 MB
Accepted: JPG, JPEG, PNG, WebP, AVIF, HEIC, HEIF, GIF, BMP
The image is decoded, traced and drawn in this tab. There is no server in this tool, so there is nothing to clean up and no retention policy to read.
How does SVG Tracer work?
The image is reduced to a small palette and each pixel is assigned to its nearest color. Palette entries average the original sampled colors rather than shifting flat artwork to quantization bucket centers. Fully transparent pixels are excluded even when the alpha cutoff is zero.
Directed edges form closed contours. All contours for a color are combined into one evenodd path, which preserves transparent holes. Simplification reduces points and the corner threshold controls how many turns become quadratic curves.
The working image is capped at 900 pixels on its longest side. Tracing runs in a local Web Worker with complexity limits, so changing a slider cancels the previous trace and computes a fresh result. Exports remain disabled until that result is ready.
Use this for flat logos, icons, lettering and line art. Photographs can create many complex contours. Reverse layer order changes painting order, not the source colors. The SVG stays editable; tracing and exports happen in this browser without uploading the image.
Source image and tracing settings
logo.png — 1200 × 400, 2 colours colors 2 simplification 1.2 px corner threshold 60°
Generated SVG
<svg viewBox="0 0 900 300"> <path fill="#1b1b1f" d="M12 44Q…Z"/> <path fill="#ff7a45" d="M310 88Q…Z"/> </svg> 2 paths · 240 points
What options and edge cases does SVG Tracer support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| Colors | 2–8 | 2 | Maximum number of palette entries after quantization. |
| Simplification | pixels | 1.2 | Douglas–Peucker tolerance in working-image pixels. |
| Corner threshold | degrees | 60° | Turns below this angle are smoothed; larger turns remain sharp. |
| Alpha cutoff | 0–255 | 8 | Transparent pixels below this cutoff are excluded. Alpha zero is always excluded. |
| Reverse layer order | toggle | off | Reverses path paint order; it does not invert the palette. |
| Working size | 900 px | capped | The longest working-image edge is capped at 900 pixels and traced by a local worker. |
Frequently asked questions
What images work best?
Flat logos, icons, lettering and line art. Photographs can create many complex paths; use fewer colors or a simpler image if the complexity limit is reached.
How are transparent holes preserved?
Transparent pixels are excluded. Closed contours for each color are combined into one path with the evenodd fill rule, including the contours around holes.
Does changing a slider update the trace?
Yes. A short debounce starts a new local worker and cancels the previous trace. Copy and download wait for the new result.
Does this use Potrace?
No. This tool uses a custom multicolor quantization and contour-tracing pipeline. The SVG has filled paths rather than bitmap content.
Does my image leave the device?
No. The image is decoded locally and a browser Web Worker traces a working image capped at 900 pixels on its longest side. The SVG and PNG are generated locally.
What does Reverse layer order change?
It reverses the order in which the color paths are painted. It does not invert colors or change which transparent pixels are excluded.