🖊️ Image to SVG Converter
Trace PNG/JPG images to real vector SVGs, entirely in your browser
<path> elements you can edit in Illustrator or Inkscape, not a bitmap wrapped in SVG tags. Best results come from flat-color art: a logo traced to 8 colors typically lands a handful of KB and scales to billboard size. Photos are the wrong input — they posterize. Everything runs locally with the public-domain imagetracerjs engine; nothing is uploaded.Trace an Image
Click or drag an image here (PNG, JPG, WebP, GIF, BMP)
Tracing Presets, Measured
| Preset | Key Settings | Measured on a 64×64 logo test | Best For |
|---|---|---|---|
| Default | 16 colors, pathomit 8 | 18 paths, 2.7 KB | General icons and logos |
| Posterized (4) | 4 colors, blur 5 | 4 paths, 1.0 KB | Stencils, screen-print art, bold marks |
| Detailed | 64 colors, pathomit 0 | 38 paths, 5.8 KB | Shaded icons where fidelity matters |
| Curvy | loose curve fitting | fewer, smoother nodes | Organic shapes, rounded lettering |
| Sharp | right-angle emphasis | crisp corners | Pixellated or geometric art |
| Grayscale | 7 gray tones, 1 quantization cycle | monochrome layers | Litho-style single-color output |
| Artistic | loose tracing, stroke outlines | painterly paths | Deliberate poster effects |
The path/size figures were measured by running this page's tracer engine on a 64×64 test image (a red disc on a blue-to-teal gradient). Your numbers will differ with your artwork — the pattern won't: more colors and lower pathomit mean more paths and more bytes.
What to Trace, and What Not To
| Input | Trace? | Why |
|---|---|---|
| Flat-color logos | ✅ Ideal | Few colors, clean edges — small file, perfect scaling |
| Icons and pictograms | ✅ Ideal | Usually trace cleaner at 2–8 colors than the original looked |
| Diagrams, charts, screenshots of UI outlines | ✅ Good | Large uniform regions compress to a handful of paths |
| Line art / stencils | ✅ Good | 2-color posterize gives clean cut lines |
| Photographs | ⚠️ Rarely | Continuous tone posterizes; files balloon past the JPEG original |
| Noisy JPEGs / phone photos of logos | ⚠️ Clean up first | JPEG artifacts trace as speckles — raise pathomit or denoise |
How Image Tracing Works
Tracing (vectorization) runs the vector pipeline backwards. Your raster image is a grid of pixels; the tracer first reduces it to a limited palette — that's color quantization, the same family of algorithm behind GIF and PNG-8 encoding. Then, for each color, it walks the boundary between that color and its neighbors (edge following), converts the boundary into a polygon of sample points, and fits spline curves through the points so the outline is smooth rather than staircase-jagged. Each color region becomes one <path> element with a fill — that's the entire output file.
What the knobs do
Colors is the quantizer's palette size: 2 for stencil-black-and-white, 4–8 for typical logos, 16 default, 32+ only for deliberate gradient banding. pathomit discards traced regions shorter than that node count — the speckle filter that saves noisy JPEGs; raise it when your source is dirty, drop to 0 when every detail matters. The presets bundle curve-fitting tolerance (ltres/qtres), blur, and layering choices so you don't have to.
A worked example
On the 64×64 test logo (a red disc over a linear gradient), the default preset quantized to 16 colors and produced 18 paths totaling 2,713 bytes of SVG. Dropping to the 4-color posterized preset collapsed the gradient into flat bands: 4 paths, 1,036 bytes — 62% smaller at the cost of smooth shading. Pushing the other way to detailed (64 colors, no speckle filtering) yielded 38 paths and 5,773 bytes. That's the trade in miniature: every extra color band you keep becomes more path data. The same dynamic holds at 512×512 and beyond; traced file size scales with the number of color transitions, not the pixel dimensions, which is exactly why a 16-color logo traces to a few KB while a photo traces to megabytes.
Editing the result
Because the output is plain SVG, every region is editable: select a path in Inkscape or Illustrator, change its fill, delete a stray band, round the corners, or export to AI/EPS/PDF. For web use, drop the SVG inline and restyle colors with CSS — the traced shapes accept fill overrides like any hand-drawn SVG. When a platform wants raster anyway, pair this with SVG to PNG: trace once, then re-rasterize at every size you need.
Privacy, concretely
The engine is imagetracerjs by András Jankovics — released to the public domain under the Unlicense — pinned at version 1.2.6 and loaded from a CDN. Your image is decoded to pixels on a local canvas, traced in JavaScript, and returned as a download. No uploads, no accounts, no watermarks; the page works offline after it loads.
Frequently Asked Questions
Is the output a real vector SVG or an embedded bitmap?
A real vector file. The tracer color-quantizes your image, finds the boundary of each color region, and fits spline curves to those boundaries, writing ordinary <path> elements with fill colors — no base64 PNG hidden inside an SVG wrapper. You can open the output in Illustrator, Inkscape, or Figma and edit individual shapes, recolor them, and scale to any size.
Does converting a photo to SVG make sense?
Usually not. Photos are continuous-tone: tracing one to 32 colors produces thousands of paths and a file far larger than the original JPEG, with a posterized look rather than photographic detail. Tracing shines on flat-color art — logos, icons, screenshots of diagrams, stencils, line drawings. If you have a photo, keep it raster; if you need it bigger, use an upscaler instead.
What do the color count and presets actually do?
Color count sets how many colors the quantizer keeps: 2 gives a pure black-and-white stencil, 4–8 suits flat logos, 16 (the default) handles shaded icons, and 32+ only helps gradients you deliberately want banded. Presets bundle the fine-tuning: Posterized uses 4 colors, Detailed turns off path-omitting and keeps 64 colors for maximum fidelity, Curvy fits looser curves for smooth organic shapes.
Why is my traced SVG bigger than the original PNG?
Vector isn't automatically smaller — it's smaller when the artwork has few colors and large uniform regions. Each color boundary becomes path data, so a noisy photo traces to enormous files. On a 64×64 logo test, the default preset produced 18 paths (2.7 KB) while the detailed preset produced 38 paths (5.8 KB) from the same image. Fewer colors and a higher path-omit threshold shrink the output fast.
Are the images I convert here private?
Yes. Tracing runs entirely in your browser with the open-source imagetracerjs engine (public domain via the Unlicense). Your file is read locally, decoded to pixels on a canvas, traced, and handed back as a download. Nothing is uploaded, and the page keeps working offline once loaded.