PNG to SVG — Trace Raster Images to Vectors
Convert raster images to scalable vector graphics.
Vectorizing a logo, sketch, or icon — turning a raster image into scalable SVG paths — usually means hand-tracing in Illustrator or paying for a tracing service. Dropvert's SVG Trace runs imagetracerjs (a WebAssembly auto-tracer) directly in your browser, with live preview and exposed parameters for tuning.
How it works
3-step walkthrough
How it works
3-step walkthrough
- 1
Drop a PNG, JPEG, or WebP
Best results on high-contrast images: logos, line art, icons, simple illustrations. Photos give noisy results — vector tracing isn't the right tool for photographic content.
- 2
Tune the trace
Color count (2–256), path filtering, blur radius, line/quad thresholds, stroke width. The preview re-renders live as you adjust each control, debounced for performance.
- 3
Download the SVG
Export the vectorized result as standard SVG. Open it in Illustrator, Figma, or any vector editor for further refinement.
Why use Dropvert
Local-first, free, no upload required
Why use Dropvert
Local-first, free, no upload required
- Live preview as you tune — no "regenerate" button.
- Full control over color count, path simplification, and line thresholds.
- Output is standard SVG (paths + fills) compatible with every vector editor.
- Batch tracing: process up to 20 images with the same settings.
- Free, runs in your browser; the source image stays on your device.
Frequently asked questions
6 answered
Frequently asked questions
6 answered
- What kinds of images vectorize well?
- High-contrast images with limited color palettes: logos, icons, line drawings, comic panels, simple illustrations, monochrome scans. The sharper and more poster-like the source, the cleaner the trace.
- What kinds vectorize poorly?
- Photographs, gradient-heavy images, soft watercolors, anything with subtle color transitions. The tracer tries to fit polygons to color regions, which is fundamentally not what photos are. For those, keep them raster (PNG/WebP) instead.
- How do I get a cleaner trace?
- Reduce the color count first — 4–16 colors usually beats 32+ for clean output. Increase path-omit to drop tiny noise paths. Add a small blur (1–2px) to smooth out anti-aliasing artifacts before tracing. Bigger source images don't always help; sometimes downscaling first then tracing gives better edges.
- Why is the output SVG so big?
- Auto-tracing produces many small paths. For a 16-color image, expect 50–500 paths. Open the result in an editor and merge same-color shapes, simplify paths, or use SVGO/svgcleaner to optimize. For a one-color logo, the SVG can be tiny; for a photo-traced result, it can be larger than the original PNG.
- Can I edit the SVG further after tracing?
- Yes — the output is standard SVG. Open it in Illustrator, Inkscape, Figma, or any vector editor and refine paths, change colors, simplify shapes.
- Does the tracer support transparency?
- Yes. Transparent pixels in the source become transparent regions in the SVG. The output preserves the alpha channel.
Related tools
5 suggestions
Related tools
5 suggestions