Skip to content

Image to SVG Vectoriser Online

Browser-side — no upload
Last verified May 2026 — runs in your browser

Image to SVG Vectoriser — Format-Agnostic d3-contour Pipeline

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 a three-mode pipeline that's format-agnostic at the input — the browser's HTMLImageElement decoder handles every supported raster format, and the same d3-contour vectorisation runs on the decoded pixels regardless of source. (1) **Posterize** mode applies a bilateral filter (Tomasi & Manduchi 1998, Proc. ICCV Bombay pp. 839-846) to smooth source-format-specific artefacts (JPG block boundaries, WebP VP8 quantisation, anti-aliased PNG edges), runs LAB k-means quantisation (CIE L*a*b* 1976, perceptually uniform — outperforms RGB Euclidean for palette clustering) to a 2–128 colour palette, then traces each cluster's contours via d3-contour marching squares (Mike Bostock, ISC, npm v4.0.2) and Bezier-smooths the polygon vertices using Catmull-Rom splines (Catmull & Rom 1974, Academic Press, pp. 317-326). The result is a true vector SVG with smooth filled paths — ideal for logos, icons, illustrations across all source formats. (2) **Faithful** mode wraps the source raster (with alpha preserved where the format supports it: PNG RGBA, WebP ALPH, AVIF auxiliary) inside an SVG <image> element. Optional Sobel edge overlay (Sobel & Feldman 1968 SAIL) adds a vector outline for cut/print workflows. (3) **Hybrid** mode combines Faithful's raster base with Posterize's traced paths overlaid at user-controlled opacity. Processing runs entirely client-side on a downsampled copy (max 400 px longest edge); Faithful keeps full resolution and source-native alpha.

Related: PNG to SVG JPG to SVG WebP to SVG SVG to PNG SVG to JPG Image to SVG

How to convert an image to SVG

  1. Drop any raster image (.jpg / .png / .webp / .avif / .heic) onto the tool or click to browse. The browser's HTMLImageElement decodes the source via its built-in format decoder regardless of input type.
  2. Pick a mode: Posterize (true vector, ideal for logos/icons/illustrations from any source), Faithful (raster wrapper preserving source-native alpha, ideal for photographic content), or Hybrid (both — raster base with traced paths overlaid).
  3. Tune parameters for Posterize / Hybrid: colour palette size (default 16, range 2–128), smoothing strength (0–1, default 0.7), overlay opacity for Hybrid (default ~0.4), optional Sobel outline with edge magnitude threshold (default 80 / 255).
  4. The bilateral filter + LAB k-means + d3-contour pipeline runs on a downsampled copy (max 400 px longest edge for k-means + tracing; Faithful keeps full resolution and source-native alpha intact).
  5. Download the SVG. The original image stays on disk untouched — files never leave the device.

Common use cases

  • Vectorising a mixed-format icon library (JPG + PNG + WebP) into a single Posterize-mode SVG output set without having to convert formats first.
  • Producing Hybrid SVGs from AVIF or HEIC photographs (modern formats with no native vector path) for design-system slots that expect SVG.
  • Generating sticker / decal artwork from any source format: Faithful mode raster + Sobel outline overlay drives a cutter from the SVG paths while the raster shows the design.
  • Vectorising legacy JPG logos that lost their original vector files — Posterize mode reconstructs a smooth-path SVG from the raster.
  • Converting an HEIC photo from an iPhone (decoded natively in Safari 17+ since 26 September 2023) into a Hybrid SVG for a print + cut workflow without intermediate format conversion.

Frequently asked questions

Which input formats are supported?

Any raster format the browser's HTMLImageElement natively decodes: JPG (ITU-T T.81 / ISO/IEC 10918-1, 18 September 1992), PNG (W3C 2nd Edition / ISO/IEC 15948:2004, 10 November 2003), WebP (RFC 9649 Zern, Massimino & Alakuijala November 2024), AVIF (AOMedia AV1 Image File Format), and HEIC on Safari 17+ (released 26 September 2023 with macOS Sonoma; iOS 17 build shipped 18 September 2023). All decoded sources reach the same vectorisation pipeline regardless of source format.

Does the result depend on the source format?

The vectorisation pipeline is format-agnostic — the same bilateral filter + LAB k-means + d3-contour pass runs on the decoded pixels. The Posterize SVG looks the same whether the source was JPG or PNG of the same image. The bilateral filter is especially valuable for lossy formats (JPG, lossy WebP) because it suppresses encoding artefacts before clustering, but it also benefits lossless sources (PNG, lossless WebP) by smoothing anti-aliased ramp edges without flattening crisp geometry.

How does alpha behave across formats?

Faithful and Hybrid modes preserve alpha where the source format carries it: PNG RGBA mode (8-bit alpha) and tRNS chunk (per-entry 8-bit alpha for indexed-colour PNG, or single colour-key for grayscale/truecolour), WebP ALPH chunk (RFC 9649 §2.7.1.2), AVIF auxiliary alpha plane (ISO/IEC 23008-12 HEIF). JPG and HEIC are typically opaque so transparency is moot. In Posterize mode, alpha is binarised across all formats: pixels below a transparency threshold are excluded from clustering and the resulting paths only cover opaque regions.

Which mode should I pick?

Posterize for logos, icons, flat-colour illustrations where you want true extractable vector paths. Faithful for photographs where you need pixel-faithful display in an SVG-only context (the SVG scales via viewBox but content remains pixel-bound). Hybrid when you need both — visual fidelity from the raster base plus extractable vector geometry from the paths overlay (sticker / vinyl / plotter workflows). The default is Posterize for source images with discrete colour regions.

Is my file uploaded?

No. The decode + bilateral filter + LAB k-means + d3-contour tracing + SVG serialisation all run client-side via WHATWG Canvas getImageData. DevTools Network tab shows zero upload requests. The downloaded SVG is exposed via URL.createObjectURL from the in-memory string.

Format-agnostic vectorisation — Posterize / Faithful / Hybrid 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; getImageData hands that array to the same vectorisation pipeline regardless of source format. The three modes pick different trade-offs: (1) **Posterize** is true vectorisation. The bilateral filter (sigma_space ≈ 2 px, sigma_colour ≈ 28) handles format-specific noise — JPG 8×8 DCT block boundaries, WebP VP8 keyframe artefacts, anti-aliased PNG edges, AVIF AV1 prediction residuals — with the same edge-preserving smoothing pass; LAB k-means quantisation clusters pixels by perceptual colour distance per CIE 1976 (L* lightness, a*+b* opponent channels), avoiding the bright-green over-clustering of pure RGB k-means; d3-contour marching squares extracts cluster-boundary polygons; Catmull-Rom splines (cubic interpolating, C¹ continuity, local support) Bezier-smooth the vertices into smooth curves. Suited to content with discrete colour regions: logos, icons, vector-style illustrations, posters, regardless of the source format the artwork happens to be saved in. (2) **Faithful** mode wraps the original raster inside an SVG <image> element with alpha preserved where the source format supports it (PNG RGBA, WebP ALPH chunk per RFC 9649 §2.7.1.2, AVIF auxiliary alpha plane per ISO/IEC 23008-12 HEIF; JPG and HEIC opaque sources composite to opaque background). 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. (3) **Hybrid** is the fidelity-plus-vectors compromise: Faithful's raster base preserves source pixels for display, Posterize's traced paths overlay at user-controlled opacity (default ~0.4) provide real <path d='…'> geometry extractable by vector editors, plotters, or cutters. The format-agnostic input means a single workflow handles mixed-format asset libraries: dropping a JPG, PNG, or WebP into the same tool produces consistent SVG output regardless of the source's encoding choices.

  • Format-agnostic input via browser HTMLImageElement: JPG / PNG / WebP / AVIF / HEIC (Safari 17+) all reach the same pipeline
  • Three-mode vectoriser: Posterize (true vector), Faithful (raster wrapper, alpha preserved per source format), Hybrid (raster + vector overlay)
  • Posterize pipeline: bilateral filter (Tomasi & Manduchi 1998 ICCV) → LAB k-means (CIE L*a*b* 1976) → d3-contour marching squares (Bostock, ISC) → Catmull-Rom Bezier smoothing (Catmull & Rom 1974)
  • LAB colour-space quantisation outperforms RGB Euclidean clustering for perceptually uniform palette generation across all source formats
  • Configurable colour palette size (2–128 colours), smoothing strength (0–1), and minimum contour area
  • Alpha preserved per source format: PNG RGBA, WebP ALPH (RFC 9649 §2.7.1.2), AVIF auxiliary plane (ISO/IEC 23008-12 HEIF) all round-trip in Faithful and Hybrid modes
  • Optional Sobel edge overlay (Sobel & Feldman 1968 SAIL) for cut / vinyl / plotter workflows
  • Output SVG per W3C SVG 1.1 Second Edition (16 August 2011) — universal vector editor compatibility

Free. No signup. No file uploads. Ads via AdSense (consent required).

Sources (8)
  • Bostock, M. (D3.js) (2024). d3-contour — compute contour polygons using marching squares. github.com/d3/d3-contour (ISC license, npm v4.0.2) — vector contour extraction library used by the Posterize and Hybrid modes regardless of source raster format.
  • Tomasi, C., & Manduchi, R. (1998). Bilateral Filtering for Gray and Color Images. Proceedings of the 6th IEEE International Conference on Computer Vision (ICCV 1998), Bombay, India, 4-7 January 1998, pp. 839-846 — edge-preserving smoothing applied uniformly before LAB k-means clustering across all source raster formats (JPG, PNG, WebP, AVIF, HEIC).
  • International Commission on Illumination (CIE) (1976). CIE 1976 L*a*b* (CIELAB) colour space. CIE 015 — Colorimetry standard; perceptually uniform colour space used by the k-means clustering step so palette colours match human-perceived colour distance regardless of source raster format.
  • Catmull, E., & Rom, R. (1974). A class of local interpolating splines. Computer Aided Geometric Design (R. E. Barnhill & R. F. Riesenfeld, Eds.), Academic Press, New York, pp. 317-326 — cubic interpolating spline with C¹ continuity used for Bezier-smoothing the polygon vertices d3-contour produces.
  • 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 outline overlay.
  • 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 Faithful and Hybrid modes.
  • 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 fed to the bilateral filter and LAB quantiser, 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.

Related guides

Sponsored

By ·