JPG vectorises to SVG by tracing color regions — a typical logo shrinks 5-10× (50 KB → 5 KB).Works well for logos, icons, and posterised images; raw photos lose fine detail because raster pixel grids do not map cleanly to scalable curves. Output is editable XML, scales infinitely without blur.
JPG vs SVG comparison
| Property | JPG | SVG |
|---|---|---|
| Format type | Raster (pixel grid) | Vector (XML paths) |
| Scalable to any size | No (blurs when enlarged) | Yes (infinite zoom, sharp) |
| Typical photo file | 50-80 KB | 200 KB+ (loses fine detail) |
| Typical logo file | 30-50 KB | 1-10 KB (much smaller) |
| Editable in text editor | No (binary DCT) | Yes (plain-text XML) |
| Year introduced | 1992 (ISO 10918) | 2001 (W3C SVG 1.0) |
| Browser support | Universal (~100%) | Universal (~100%) |
| Best for | Photos, real-world images | Logos, icons, diagrams |
| Animation | No | Yes (SMIL + CSS + JS) |
| CSS/JS interactive | No | Yes (DOM-addressable) |
| Color depth | 8 bits/channel | 24-bit + gradients + filters |
| Conversion method | Direct compression | Trace + posterize / vectorise |
JPG to SVG Vectoriser — d3-contour Marching Squares + LAB k-means
Convert JPG photographs to SVG (W3C SVG 1.1 Second Edition, Recommendation 16 August 2011) using a three-mode pipeline that addresses the fundamental tension between continuous-tone JPG content (continuous colour variation per pixel) and SVG's discrete-region representation: (1) **Posterize** mode applies a bilateral filter (Tomasi & Manduchi 1998, ICCV 1998) to suppress JPG block artefacts, runs LAB k-means quantisation (CIE L*a*b* 1976 colour space, 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, and posters; photographs render stylised. (2) **Faithful** mode wraps the raster JPG inside an SVG <image> element (technically a vector file — scales via viewBox — but pixel-faithful for photographic content). 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 — visually photo-faithful with extractable vector geometry underneath for cutters and plotters. Processing runs entirely client-side on a downsampled copy (max 400 px longest edge) to keep k-means + tracing under ~3 s on mid-range laptops; Faithful mode keeps the full-resolution raster.
How to convert JPG to SVG
- Drop a .jpg file onto the tool or click to browse. The browser decodes the JPG to an RGB pixel array via getImageData.
- Pick a mode: Posterize (true vector, ideal for logos/icons/illustrations), Faithful (raster wrapper, ideal for photos), or Hybrid (both — raster base with traced paths overlaid).
- 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).
- 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). Processing typically completes within a few seconds on mid-range laptops.
- Download the SVG. The original JPG stays on disk untouched — files never leave the device.
Common use cases
- Vectorising flat-colour logos or illustrations (Posterize mode) for laser cutters, vinyl plotters, or vector editors that need extractable paths.
- Producing a Hybrid SVG of a product photograph for a design-system slot that expects SVG but wants visual fidelity (raster base) plus extractable vector outlines (paths overlay).
- Embedding a photographic JPG inside an SVG-only environment via Faithful mode — the SVG scales via viewBox while preserving pixel content.
- Generating a sticker / decal artwork from a photo: Faithful mode raster + Sobel outline overlay drives a cutter from the SVG paths while the raster shows the design.
- Converting an icon set from raster JPG sources back to scalable vector SVG for a design system that has migrated from raster to SVG primary artwork.
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 raster wrapped in an <image> element. Pick Posterize for genuine vectorisation, Faithful for raster-in-SVG wrapping, Hybrid for both at once. 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.
Will the SVG be larger than the JPG?
Depends on mode. Posterize SVG is typically smaller than the source JPG for low-colour content (logos, icons) but larger for photographic content (the path data grows with cluster count). Faithful SVG is larger because Base64 encoding the raster adds ~33% overhead on top of the JPG bytes. Hybrid is the largest — it carries the raster plus the traced paths. Pick the mode that matches the destination's size constraints; Posterize for size-sensitive vector pipelines, Faithful when fidelity outweighs size.
How does the LAB k-means quantisation differ from RGB-based tools?
RGB Euclidean distance (used by ImageTracer and similar trace-only tools) under-weights luminance perception — bright greens get over-clustered while subtle skin-tone shifts get under-clustered. CIE L*a*b* 1976 was designed to be perceptually uniform: equal numerical distances correspond to roughly equal perceived colour differences. Clustering in LAB produces palettes that match what the eye notices, so the resulting Posterize SVG retains visual structure rather than collapsing into a few dominant hues. The bilateral filter pre-pass (Tomasi & Manduchi 1998) also suppresses JPEG 8×8 block artefacts before clustering, preventing artefact boundaries from becoming spurious cluster boundaries.
Does the SVG scale cleanly to any size?
Posterize mode yes — the paths are true vectors and scale losslessly to any resolution. Faithful mode no — the embedded raster pixelates beyond its original resolution because <image> content is bound to the source pixel grid. Hybrid is mixed: the raster base pixelates as in Faithful, but the overlaid Posterize paths scale losslessly. For destinations that may zoom (signage, large-format print), Posterize-only is the safe choice.
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.
Three modes, three pipelines: Posterize / Faithful / Hybrid trade-offs
JPG → SVG is genuinely hard because JPG photos vary in every pixel and SVG fundamentally represents discrete regions. The three modes pick different trade-offs: (1) **Posterize** is true vectorisation. The bilateral filter (sigma_space ≈ 2 px, sigma_colour ≈ 28) preserves edges while smoothing JPEG 8×8 block artefacts; LAB k-means quantisation clusters pixels by perceptual colour distance (the L* axis approximates lightness perception, a* and b* approximate red-green and blue-yellow opponent channels per CIE 1976), avoiding the over-clustering of bright greens that pure-RGB k-means produces; d3-contour marching squares extracts cluster-boundary polygons; Catmull-Rom splines (cubic interpolating, C¹ continuity, local support) Bezier-smooth the vertices so paths render as smooth curves rather than jagged polylines. Suited to content that already has discrete colour regions: logos, icons, vector-style illustrations, posters. Photographic content gets stylised (the 'posterized' look). (2) **Faithful** mode wraps the original raster inside an SVG <image> element; the file IS valid SVG and scales via viewBox, but the content remains pixel-bound. 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 where the raster gives the visual and the outline drives the cutter. (3) **Hybrid** is the fidelity-plus-vectors compromise: Faithful's raster base preserves photographic detail for display, Posterize's traced paths overlay at user-controlled opacity (default ~0.4) provide real <path d='…'> geometry that can be extracted by vector editors, plotters, or cutters. Pick the mode that matches the destination: cutter / plotter / editable vector → Posterize; visual reproduction in SVG-only context → Faithful; both purposes from one file → Hybrid.
- Three-mode vectoriser: Posterize (true vector), Faithful (raster wrapper), 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
- 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
- Hybrid mode: raster base + vector paths at user-controlled overlay opacity (default ~0.4)
- 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
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; marching squares applied to a per-cluster binary mask 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 quantisation to reduce JPEG block artefacts without softening the contour boundaries the tracer detects.
- 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 rather than raw RGB Euclidean distance (which under-weights luminance differences).
- 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, so the SVG paths render as smooth curves instead of jagged polylines.
- 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 used for the optional outline overlay in Faithful and Hybrid modes; produces an edge mask thresholded into a binary contour set traced by d3-contour.
- 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.
- ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — source JPG bitstream decoded to RGB pixels via the browser's built-in JPEG decoder before LAB conversion and tracing.
- 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 JPG 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.
By Marco B. ·