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 / vectorise (vtracer) |
JPG to SVG Vectoriser — VTracer WASM, Handles Photos Honestly
Convert JPG photographs to SVG (W3C SVG 1.1 Second Edition, Recommendation 16 August 2011) using VTracer (visioncortex/vtracer, Rust, MIT-licensed), compiled to WebAssembly by this project and running in a module Web Worker — your files never leave the device. JPG to SVG is fundamentally difficult because JPG photographs have continuous color variation per pixel, while SVG represents discrete regions. VTracer's stacked layering strategy handles high-resolution sources (up to 2048 px on the longest edge) with a deterministic, repeatable result. Four intent-based presets: **Logo** (aggressive speckle cleanup, flat colors — ideal for JPG scans of logotypes and icons), **Illustration** (balanced color clustering, smooth curves — ideal for flat-color artwork saved as JPG), **Photo** (maximum color precision, finest layer separation — the most detailed vector output for photographic content; expect more paths and a larger file), and **B&W** (binary tracing — converts the JPG to a monochrome outline, ideal for line art or high-contrast content). For photographic JPGs where visual fidelity matters over true vectorisation, **Embed** mode wraps the original raster in an SVG `<image>` element (technically a vector file — scales via viewBox — while preserving pixel-exact content). Optional Sobel edge outline (Sobel & Feldman 1968 SAIL) adds a vector contour for cut/print workflows.
How to convert JPG to SVG
- Drop a .jpg file onto the tool or click to browse. The browser decodes the JPG (ITU-T T.81) to an RGB pixel array.
- Choose a preset: Logo (flat colors, speckle cleanup — ideal for JPG scans of icons or logos), Illustration (balanced), Photo (max detail — more paths, bigger file, closest to the original photo), B&W (binary monochrome outline), or Embed (original raster in SVG wrapper — best for photographic content).
- Adjust advanced sliders if needed: Colors (color precision 1–8), Smoothness (corner threshold), Detail (speckle filter). Re-tracing happens automatically.
- For Embed mode, optionally enable the Sobel edge outline for a vector contour suitable for cut/print workflows.
- Download the SVG. The original JPG stays on disk untouched — files never leave the device.
Common use cases
- Vectorising flat-colour logos or illustrations (Logo preset) saved as JPG for laser cutters, vinyl plotters, or vector editors.
- Producing the most detailed possible SVG from a JPG photograph using the Photo preset — useful for design-system slots that must be SVG.
- Embedding a photographic JPG inside an SVG-only environment via Embed mode — the SVG scales via viewBox while the raster stays pixel-exact.
- Generating sticker / decal artwork from a photo: Embed mode raster + Sobel edge outline drives a cutter while the raster shows the design.
- Converting an icon set from JPG sources back to scalable vector SVG using the Logo preset.
Frequently asked questions
Is this 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. Embed mode produces a technically valid SVG but the content is the original JPG raster inside an `<image>` element — it scales via viewBox but pixel content remains resolution-bound. For genuine vectorisation use a tracing preset; for pixel-faithful wrapping use Embed.
Will the SVG be larger than the JPG?
Depends on preset. Logo and B&W SVGs are typically smaller than the source JPG for low-colour content. Photo SVG can be substantially larger than the JPG for photographic content because the path data grows with colour precision. Embed SVG is larger because Base64 encoding the raster adds ~33% overhead on top of the JPG bytes.
What does the Photo preset produce vs other tools?
Photo uses VTracer's maximum color precision setting and finest layer separation, producing a detailed 'vector painting' — multiple stacked color layers traced as individual filled path groups. The output is a true SVG with real paths, but it's verbose: more paths and a larger file than the Logo or Illustration presets. Other tools typically produce either a simplistic posterised result or give up and embed the raster. The Photo preset is the most detailed VTracer can produce for continuous-tone content.
Does the SVG scale cleanly to any size?
The four tracing presets produce true vectors that scale losslessly. Embed mode SVG scales via viewBox but the embedded raster pixelates beyond its original resolution. For signage or large-format print, use Photo or Illustration preset.
Is my file uploaded?
No. VTracer runs as a WASM module inside a Web Worker in your browser — no server round-trips. DevTools Network shows no upload requests. The SVG is exposed via URL.createObjectURL.
JPG-to-SVG trade-offs: VTracer presets vs Embed mode
JPG → SVG is genuinely hard because JPG photos vary in every pixel and SVG fundamentally represents discrete regions. The presets pick different trade-offs: **Logo** applies aggressive speckle filtering and flat-color clustering — suited to JPG scans of logos, icons, and flat-color artwork where the JPG was chosen for compatibility rather than quality; the output is clean and compact. **Illustration** balances color precision and smoothness — suited to vector-style artwork or posterised content saved as JPG. **Photo** maximises color precision (Colors slider, 1–8 levels) and layer separation, producing the most detailed vector output for continuous-tone JPG content — the 'detailed vector painting' trade-off: more paths, bigger file, but the closest vectorisation result to the original photograph. **B&W** applies binary tracing — the JPG is thresholded to two values before VTracer runs, producing a monochrome outline SVG from high-contrast or line-art content. **Embed** mode wraps the original JPG raster inside an SVG `<image>` element; the file IS valid SVG and scales via viewBox, but the content remains pixel-bound — photographic detail is preserved because no vectorisation lossy step is applied. 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. VTracer uses cubic Bezier splines and a stacked layering strategy; the output is deterministic.
- VTracer WASM engine (visioncortex/vtracer, Rust, MIT) — self-built, vendored ~122 KB, module Web Worker
- Four tracing presets: Logo, Illustration, Photo (max detail — more paths, bigger file), B&W (binary outline)
- Embed mode: wraps original JPG raster in SVG <image>, pixel-exact for photographic content
- Deterministic output: same JPG + preset + sliders = same SVG every time
- 2048 px downsampling before trace — handles high-resolution JPG sources
- Optional Sobel edge overlay (Sobel & Feldman 1968 SAIL) for cut / vinyl / plotter workflows in Embed mode
- Output SVG per W3C SVG 1.1 Second Edition (16 August 2011) — cubic Bezier splines
- 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.
- 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.
- 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 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 transferred to the vectorize worker for tracing.
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.