Image to SVG Tracer

How do you convert a raster image into a scalable vector?

What this tool does

This tool traces a raster image — PNG, JPG, WebP or GIF — into a scalable vector graphic (SVG) directly in your browser. It quantizes the image into a limited color palette, detects edges between color regions, and fits smooth Bézier paths around each region using the open-source ImageTracer.js library. The result is genuine vector markup made of <path> elements that scales to any size without pixelation, previewed side by side with your original image before you download or copy it.

Why you need it

Logos, icons, and simple illustrations often exist only as flattened PNGs or screenshots — no source vector file in sight. Re-drawing them by hand in a vector editor is slow. Tracing gives you a usable starting SVG in seconds: crisp at any resolution, editable as paths, and small enough to inline directly in HTML or CSS. This matters for favicons that need to look sharp on retina displays, app icons exported at the wrong size, or an old logo where the original Illustrator file was lost years ago.

It is important to be upfront about what tracing is good at: flat, high-contrast graphics with clean edges — logos, icons, line art, simple illustrations. It is not a substitute for professional photo vectorization; feeding it a photograph produces a large, messy SVG with hundreds of jagged color-blob paths rather than a clean illustration.

How to use it

1. Drop or select a PNG, JPG, WebP or GIF image — nothing uploads, everything stays local.
2. Keep the default Optimal preset, or pick Simple logo / Detailed / Maximum / Gradients.
3. Optionally enable Background remover for logos on solid fills.
4. Click Trace, compare the preview, then Download SVG or Copy SVG.

Practical examples

• Recovering a lost logo: Trace a flattened PNG logo into an editable SVG to resize it for a new letterhead.
• Favicon from a screenshot: Trace a small app icon screenshot into SVG, then refine it in the Favicon Generator.
• Two-tone line art: Set colors to 2 and lower path omit for crisp black-and-white line drawings or signatures.
• Flat illustration cleanup: Increase colors to 12-16 for illustrations with several distinct flat fill regions.
• Inline SVG for CSS masks: Copy the SVG markup directly into a stylesheet as a background or mask shape.

How it works

ImageTracer.js first draws your image onto an off-screen canvas and reads its pixel data, then runs k-means-style color quantization to reduce the image to your chosen number of colors. For each color layer, it walks pixel boundaries to build closed polygon outlines, applies an optional Gaussian blur pass first to smooth noisy edges, then fits those outlines with straight and quadratic Bézier segments — the line and curve thresholds control how aggressively corners get simplified into curves. The path omit setting discards regions smaller than the given pixel area, which removes speckle noise from JPEG artifacts or anti-aliasing. The final SVG string is rendered to a preview image using a local blob URL (so nothing resembling raw markup is ever injected into the page), and the same string is available for direct copy or download.

Common mistakes

• Tracing photographs: Photos have thousands of gradient colors — trace results are huge and messy. Use it for flat graphics only.
• Too many colors on simple art: A 2-color logo traced at 16 colors picks up JPEG compression artifacts as extra shapes.
• Path omit set to 0 on noisy images: Keeps every speck as its own path, bloating file size — raise it to filter noise.
• Expecting text to stay editable: Traced text becomes generic vector shapes, not selectable font glyphs.
• Skipping blur on scanned line art: A small blur radius can smooth jagged scan edges before tracing for cleaner curves.

FAQ

Related tools

• SVG Studio
• Image Compressor
• Image Resizer
• Favicon Generator