Image to SVG Vectoriser — VTracer WASM Engine, Format-Agnostic
Convert any raster image (JPG via ITU-T T.81, PNG via W3C 2nd Edition / ISO/IEC 15948:2004, WebP via RFC 9649 + RFC 6386 VP8, AVIF via AOMedia spec, HEIC via Safari 17+ native) to SVG (W3C SVG 1.1 Second Edition, Recommendation 16 August 2011) using VTracer (visioncortex/vtracer, Rust, MIT-licensed open source), compiled to WebAssembly by this project and running in a module Web Worker — your files never leave the device, and the CSP 'wasm-unsafe-eval' directive is the only permission required. The browser's HTMLImageElement decoder handles every supported raster format; VTracer then traces the decoded pixels. Four intent-based presets cover the main use cases: **Logo** (aggressive speckle cleanup, flat colors — ideal for logotypes and icons), **Illustration** (balanced color clustering, smooth curves — ideal for vector-style artwork), **Photo** (maximum color precision, finest layer separation — a detailed vector painting; more paths, bigger file), and **B&W** (binary tracing — ideal for line art, sketches, and QR codes). Tracing uses VTracer's Spline output mode (cubic Bezier splines) and a stacked layering strategy. The input is downsampled to a maximum of 2048 px on the longest edge before tracing, so high-resolution sources trace with full detail. The algorithm is deterministic: the same input image with the same preset and sliders always produces the same SVG output. **Embed** mode (the tool labels it Embed) wraps the original raster in an SVG `<image>` element at full resolution with alpha preserved per source format (PNG RGBA, WebP ALPH per RFC 9649 §2.7.1.2, AVIF auxiliary plane per ISO/IEC 23008-12 HEIF). An optional Sobel edge outline (Sobel & Feldman 1968 SAIL) adds a vector contour for cut/print workflows — this outline uses d3-contour internally.
How to convert an image to SVG
- Drop any raster image (JPG, PNG, WebP, AVIF, HEIC) onto the tool or click to browse. The browser decodes it to an RGB(A) pixel array.
- Choose a preset by intent: Logo (flat colors, speckle cleanup), Illustration (balanced), Photo (max detail — more paths, bigger file), B&W (binary outline), or Embed (original raster in SVG wrapper).
- Adjust advanced sliders if needed: Colors (color precision 1–8), Smoothness (corner rounding threshold), Detail (minimum speckle size). The tool re-traces automatically on change — no Vectorize button.
- For Embed mode, optionally enable the Sobel edge outline and set the edge magnitude threshold for a vector contour on top of the raster.
- Download the SVG. The original file stays on disk — nothing is uploaded.
Common use cases
- Vectorising a mixed-format icon library (JPG + PNG + WebP) into a single SVG output set using the Logo preset — no format conversion required first.
- Converting a logo scan or screenshot to an editable SVG using the Logo or Illustration preset for laser cutters, vinyl plotters, or vector editors.
- Producing a detailed vector painting from a photograph using the Photo preset — useful for design-system slots that expect SVG.
- Generating binary line-art SVG from sketches or QR codes using the B&W preset.
- Embedding a photographic raster (AVIF, HEIC, WebP) inside an SVG-only environment using Embed mode — full resolution and alpha preserved.
Frequently asked questions
Which preset should I pick?
Logo for logotypes, icons, and flat-color artwork where you want clean compact paths. Illustration for vector-style drawings and posters. Photo for photographs where you want the most detailed vector output — expect more paths and a larger file. B&W for line art, sketches, stamps, and QR codes. Embed when you need the original raster preserved pixel-exactly inside a valid SVG file (useful for SVG-only contexts that still need photographic content), with an optional vector outline on top.
Is the output true vectorisation?
For the four tracing presets (Logo, Illustration, Photo, B&W) yes — the SVG contains real `<path>` elements with cubic Bezier spline data that scale losslessly to any resolution and are editable in Inkscape, Illustrator, or any SVG-capable editor. Embed mode produces a technically valid SVG but the content is the original raster inside an `<image>` element — it scales via viewBox but the pixel content remains resolution-bound.
Is my file uploaded?
No. VTracer runs as a WASM module inside a Web Worker in your browser — zero server round-trips. DevTools Network tab shows no upload requests. The SVG is generated in-memory and exposed via URL.createObjectURL.
Does the result depend on the source format?
The tracing pipeline is format-agnostic — VTracer runs on the decoded pixel array regardless of whether the source was JPG, PNG, WebP, AVIF, or HEIC. Embed mode additionally preserves format-specific alpha (PNG RGBA, WebP ALPH, AVIF auxiliary plane) in the SVG `<image>` data URL.
Format-agnostic vectorisation — VTracer presets vs Embed trade-offs
Image → SVG is format-agnostic at the input because the browser's HTMLImageElement decodes every supported raster format (JPG, PNG, WebP, AVIF, HEIC if Safari 17+) into the same RGB(A) pixel array; VTracer then traces that array regardless of source format. The presets pick different trade-offs: **Logo** applies aggressive speckle filtering (the Detail slider controls minimum speckle size) and clusters into a small number of flat-color regions — output paths are clean and compact, ideal for logotypes and icons from any source format. **Illustration** balances color precision and smoothness — the Smoothness slider (corner threshold) controls how aggressively corners are rounded into Bezier curves. **Photo** uses maximum color precision (the Colors slider, color precision 1–8) and finest layer separation, producing a detailed vector painting from photographs; the trade-off is more paths and a larger file. **B&W** applies binary tracing — the source is reduced to two values before VTracer runs, producing a single-color outline SVG ideal for line art, sketches, and stamps. **Embed** mode is a different category: it wraps the original raster inside an SVG `<image>` element at full resolution with alpha preserved where the source format carries it (PNG RGBA mode and tRNS chunk, WebP ALPH chunk per RFC 9649 §2.7.1.2, AVIF auxiliary alpha plane per ISO/IEC 23008-12 HEIF; JPG and HEIC are typically opaque). Optional Sobel edge overlay (3×3 isotropic gradient operator, Sobel & Feldman 1968 Stanford SAIL) adds a vector outline thresholded at user-defined edge magnitude — useful for sticker / vinyl-cut workflows.
- VTracer WASM engine (visioncortex/vtracer, Rust, MIT) — self-built, vendored ~122 KB, runs in a module Web Worker
- Four tracing presets by intent: Logo, Illustration, Photo, B&W (binary tracing)
- Embed mode: wraps original raster in SVG <image> at full resolution, alpha preserved per source format
- Deterministic output: same input + preset + sliders = same SVG every time
- 2048 px downsampling before trace — 5× the previous 400 px edge limit, handles high-resolution sources
- Advanced sliders: Colors (color precision 1–8), Smoothness (corner threshold), Detail (speckle filter)
- Output SVG per W3C SVG 1.1 Second Edition (16 August 2011) — cubic Bezier splines, stacked layering
- Browser-side via Web Worker — files never leave the device
Free. No signup. No file uploads. Ads via AdSense (consent required).
Sources (6)
- VisionCortex contributors (2025). VTracer — raster to vector graphics converter. github.com/visioncortex/vtracer (Rust crate vtracer 0.6, MIT OR Apache-2.0) — the tracing engine behind the Logo / Illustration / Photo / B&W presets; compiled to WebAssembly by this project (vendored build, runs in a module Web Worker), performs colour clustering and cubic Bezier spline fitting (Spline mode) with stacked layering.
- Bostock, M. (D3.js) (2024). d3-contour — compute contour polygons using marching squares. github.com/d3/d3-contour (ISC license, npm v4.0.2) — contour extraction used ONLY for the optional Sobel edge outline in the Embed preset; the main tracing presets run on VTracer instead.
- Sobel, I., & Feldman, G. M. (1968). A 3×3 Isotropic Gradient Operator for Image Processing. Stanford Artificial Intelligence Laboratory (SAIL) talk, 1968 (unpublished; documented in subsequent SAIL technical reports) — gradient operator for the optional edge outline in the Embed preset; produces an edge mask thresholded into a binary contour set traced by d3-contour.
- WHATWG (live). HTML Living Standard — HTMLImageElement decoding via the browser's image registry. html.spec.whatwg.org/#htmlimageelement — generic source decoding mechanism: any image format the browser natively decodes (JPG via ITU-T T.81, PNG via W3C 2nd Edition, WebP via RFC 9649 / RFC 6386, AVIF via AOMedia spec, HEIC via Safari 17+ native) loads into HTMLImageElement and reaches getImageData uniformly.
- W3C (SVG Working Group) (2011). Scalable Vector Graphics (SVG) 1.1 (Second Edition). W3C Recommendation 16 August 2011 (w3.org/TR/SVG11/) — target SVG container format; <path d='M…'> elements carry the traced polygons, <image> element carries the embedded raster in the Embed preset.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: getImageData(). html.spec.whatwg.org/#dom-context-2d-getimagedata + canvas section 4.12.5 — browser-side raster sampling: any decoded source bitmap → getImageData returns the pixel array transferred to the vectorize worker for tracing, format-agnostic.
These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.