Skip to content

WebP to SVG Vectoriser Online

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

WebP to SVG Vectoriser — d3-contour Marching Squares + LAB k-means

Convert WebP images (RFC 9649 Zern, Massimino & Alakuijala — Google LLC, November 2024 Informational; lossy mode VP8 keyframes per RFC 6386 Bankoski et al. November 2011, lossless mode LZ77 + Huffman/prefix coding) to SVG (W3C SVG 1.1 Second Edition, Recommendation 16 August 2011) using a three-mode pipeline that addresses the fundamental tension between WebP's pixel grid and SVG's region-based representation: (1) **Posterize** mode applies a bilateral filter (Tomasi & Manduchi 1998, Proc. ICCV Bombay pp. 839-846) to suppress lossy WebP's VP8 quantisation artefacts (or smooth anti-aliased edges in lossless WebP), 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). Result: a true vector SVG with smooth filled paths — ideal for logos, icons, illustrations; photographic WebPs render stylised. (2) **Faithful** mode wraps the WebP raster inside an SVG <image> element with alpha preserved end-to-end (WebP's ALPH chunk per RFC 9649 §2.7.1.2 round-trips into the SVG <image> data URL). 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. WebP browser decoding required: Chrome 32+ (since 2014), Firefox 65+ (since January 2019), Safari 14+ (since 16 September 2020), Edge 79+ (Chromium-based, since 15 January 2020). Processing runs entirely client-side on a downsampled copy (max 400 px longest edge); Faithful keeps full resolution.

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

How to convert WebP to SVG

  1. Drop a .webp file onto the tool or click to browse. The browser decodes the WebP (lossy via VP8 per RFC 6386 or lossless via LZ77 + Huffman per RFC 9649 §3) to an RGB(A) pixel array via getImageData.
  2. Pick a mode: Posterize (true vector, ideal for logos/icons/illustrations), Faithful (raster wrapper preserving alpha, ideal for photographic WebPs), 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 alpha intact).
  5. Download the SVG. The original WebP stays on disk untouched — files never leave the device.

Common use cases

  • Vectorising flat-colour WebP logos or icons (Posterize mode) for laser cutters, vinyl plotters, or vector editors that need extractable paths.
  • Producing a Hybrid SVG of a photographic WebP for a design-system slot that expects SVG but wants visual fidelity (raster base) plus extractable path geometry (overlay).
  • Embedding a transparent WebP inside an SVG-only environment via Faithful mode — the ALPH chunk alpha round-trips byte-exactly into the SVG <image>.
  • Generating sticker / decal artwork from a WebP photo: Faithful mode raster + Sobel outline overlay drives a cutter from the SVG paths while the raster shows the design.
  • Migrating a WebP-first asset pipeline back to SVG when stakeholder requirements demand vector editor compatibility (Posterize mode).

Frequently asked questions

Is this true vectorisation?

Posterize and Hybrid modes produce true vector paths (real <path d='…'> elements traced from the source). Faithful mode is technically a vector file — the SVG scales via viewBox — but the content is the original WebP raster wrapped in an <image> element with alpha preserved via WebP's ALPH chunk. Pick Posterize for genuine vectorisation, Faithful for raster-in-SVG wrapping, Hybrid for both. The Posterize pipeline uses d3-contour marching squares (Mike Bostock, ISC, npm v4.0.2) on LAB-quantised regions rather than the older Potrace approach — the result is smooth Bezier paths via Catmull-Rom interpolation rather than corner-only polylines.

Does it handle both lossy and lossless WebP?

Yes. Lossy WebP uses VP8 keyframe encoding (RFC 6386 Bankoski et al., November 2011) with quantisation similar in spirit to JPG's 8×8 DCT but using a different prediction model — the bilateral filter pre-pass suppresses VP8 block boundaries before LAB clustering. Lossless WebP uses LZ77 + Huffman/prefix coding (RFC 9649 §3) with no quantisation; the bilateral filter still helps by smoothing anti-aliased ramp edges without flattening crisp geometry. Both variants reach the same Posterize / Faithful / Hybrid output pipeline.

Will the SVG be smaller than the WebP?

Depends on mode. Posterize SVG is typically smaller than the source WebP for low-colour content (logos, icons) but larger for photographic content (path data grows with cluster count). Faithful SVG is larger because Base64 encoding the raster adds ~33% overhead on top of the WebP bytes. Hybrid is the largest — it carries the raster plus the traced paths.

Does WebP transparency survive?

In Faithful and Hybrid modes, yes — WebP's ALPH chunk (alpha plane per RFC 9649 §2.7.1.2) round-trips byte-exactly into the SVG <image> element data URL with alpha intact. In Posterize mode, the alpha channel is binarised: pixels below a transparency threshold are excluded from clustering and the resulting paths only cover the opaque 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. Browser WebP decoding required (Chrome 32+ / Firefox 65+ / Safari 14+ since 16 September 2020 / Edge 18+).

Three modes, three pipelines: WebP-specific Posterize / Faithful / Hybrid trade-offs

WebP → SVG handles two distinct WebP variants: lossy WebP (VP8 keyframe encoding per RFC 6386, with quantisation artefacts similar to JPG's 8×8 DCT but using a different prediction model) and lossless WebP (LZ77 + Huffman/prefix coding per RFC 9649 §3, with no quantisation but potentially anti-aliased edges). The bilateral filter pre-pass handles both: (sigma_space ≈ 2 px, sigma_colour ≈ 28) suppresses lossy WebP's VP8 block boundaries while preserving sharp logo edges, and smooths anti-aliased ramp edges in lossless WebP without flattening crisp geometry. The three modes pick different trade-offs: (1) **Posterize** is true vectorisation. LAB k-means quantisation clusters pixels by perceptual colour distance per CIE 1976 (L* approximates lightness perception, a*+b* approximate red-green and blue-yellow opponent channels), avoiding RGB Euclidean's bright-green over-clustering; d3-contour marching squares extracts cluster boundaries; Catmull-Rom splines (cubic interpolating, C¹ continuity, local support) Bezier-smooth the vertices. Suited to WebP content with discrete regions: logos, icons, vector-style illustrations. (2) **Faithful** mode wraps the original raster (with alpha intact via WebP's ALPH chunk) inside an SVG <image> element; the file IS valid SVG and scales via viewBox, but content remains pixel-bound. Optional Sobel edge overlay adds a vector outline for sticker / vinyl-cut workflows. (3) **Hybrid** combines Faithful's raster base with Posterize's traced paths overlaid at user-controlled opacity (default ~0.4) — useful for print + cut workflows where the raster shows the design and the paths drive the cutter. Browser support note: Safari 14+ (16 September 2020) decodes WebP natively, but cluster runs in any browser that decodes WebP — pre-Safari-14 sources need a libwebp WebAssembly polyfill upstream.

  • Three-mode vectoriser: Posterize (true vector), Faithful (raster wrapper, alpha preserved), 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)
  • Source decoding: lossy WebP (VP8 per RFC 6386 Bankoski et al. November 2011) + lossless WebP (LZ77 + Huffman per RFC 9649 §3)
  • WebP alpha preserved in Faithful and Hybrid modes — ALPH chunk per RFC 9649 §2.7.1.2 round-trips byte-exactly
  • Configurable colour palette size (2–128 colours), smoothing strength (0–1), and minimum contour area
  • 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
  • Browser-side via WHATWG Canvas getImageData — files never leave the device (Chrome 32+ / Firefox 65+ / Safari 14+ / Edge 79+ Chromium decode WebP natively)

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

Sources (9)
  • 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; marching squares on per-cluster binary masks after LAB k-means quantisation produces the polygon boundaries that become SVG paths.
  • 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 as a pre-processing step before LAB k-means; especially valuable for lossy WebP sources where VP8 quantisation artefacts would otherwise become spurious cluster boundaries.
  • 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.
  • 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.
  • 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 in Faithful and Hybrid modes.
  • Zern, J., Massimino, P., & Alakuijala, J. (Google LLC) (2024). WebP Image Format. RFC 9649, IETF (November 2024, Informational) — source WebP container; lossy mode (VP8 keyframes) and lossless mode (LZ77 + Huffman/prefix coding) both decoded to RGB(A) pixels via the browser's built-in WebP decoder (Chrome 32+, Firefox 65+, Safari 14+ since 16 September 2020) before LAB conversion and tracing.
  • Bankoski, J., Koleszar, J., Quillio, L., Salonen, J., Wilkins, P., & Xu, Y. (Google Inc.) (2011). VP8 Data Format and Decoding Guide. RFC 6386, IETF (November 2011, Informational) — VP8 keyframe bitstream used by WebP lossy mode; intra-prediction blocks decoded by the browser before pixel sampling.
  • 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 mechanism: decode WebP into a canvas → getImageData returns the pixel array fed to the bilateral filter and LAB quantiser.

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 ·