PNG vectorises to SVG by tracing color regions — a typical logo shrinks 5-10× (40 KB → 4 KB).Best for logos, icons, and posterised images where sharp scaling matters. Photos lose fine detail in the trace — vectorise designed assets, not real-world raster photography.
PNG vs SVG comparison
| Property | PNG | SVG |
|---|---|---|
| Format type | Raster (pixel grid) | Vector (XML paths) |
| Scalable to any size | No (blurs when enlarged) | Yes (infinite zoom, sharp) |
| Typical logo file | 30-50 KB | 1-10 KB (much smaller) |
| Editable in text editor | No (DEFLATE binary) | Yes (plain-text XML) |
| Year introduced | 1996 (RFC 2083) | 2001 (W3C SVG 1.0) |
| Browser support | Universal (~100%) | Universal (~100%) |
| Best for | Photos, screenshots | Logos, icons, diagrams |
| Alpha channel | Yes (RGBA) | Yes (per-path opacity) |
| Animation | No (use APNG) | Yes (SMIL + CSS + JS) |
| CSS/JS interactive | No | Yes (DOM-addressable) |
| Color depth | 8 or 16 bits/channel | 24-bit + gradients + filters |
| Conversion method | Direct lossless compression | Trace + posterize / vectorise |
PNG to SVG Vectoriser — d3-contour Marching Squares + LAB k-means
Convert PNG images (W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004, DEFLATE-compressed lossless raster per RFC 1951 Deutsch May 1996) to SVG (W3C SVG 1.1 Second Edition, Recommendation 16 August 2011) using a three-mode pipeline that addresses the fundamental tension between PNG's discrete 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 smooth anti-aliased edges without softening logo geometry, 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 flat-colour artwork (PNG's primary content type); photographic PNGs render stylised. (2) **Faithful** mode wraps the raster PNG inside an SVG <image> element with the alpha channel preserved end-to-end (PNG's RGBA mode round-trips byte-exactly 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 — useful for sticker / vinyl-cut workflows where the raster gives the visual and the paths drive the cutter. Processing runs entirely client-side on a downsampled copy (max 400 px longest edge) for k-means + tracing; Faithful mode keeps the full-resolution raster.
How to convert PNG to SVG
- Drop a .png file onto the tool or click to browse. The browser decodes the PNG (W3C 2nd Edition / ISO/IEC 15948:2004) to an RGB(A) pixel array via getImageData.
- Pick a mode: Posterize (true vector, ideal for logos/icons/illustrations — PNG's primary content), Faithful (raster wrapper preserving alpha, ideal for photographic PNGs), 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 and alpha intact).
- Download the SVG. The original PNG stays on disk untouched — files never leave the device.
Common use cases
- Vectorising flat-colour PNG logos or icons (Posterize mode) for laser cutters, vinyl plotters, or vector editors that need extractable paths.
- Producing a Hybrid SVG of a PNG screenshot for a design-system slot that expects SVG but wants the original pixel fidelity (raster base) plus extractable path geometry (overlay).
- Embedding a transparent PNG inside an SVG-only environment via Faithful mode — the alpha channel round-trips byte-exactly into the SVG <image> element.
- Generating sticker / decal artwork from a PNG: Faithful mode raster + Sobel outline overlay drives a cutter from the SVG paths while the raster shows the design.
- Converting a PNG icon set back to scalable vector SVG for a design system migrating 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 with alpha preserved. 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 PNG?
Depends on mode. Posterize SVG is typically smaller than the source PNG for low-colour content (logos, icons, flat artwork — PNG's primary content) 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 PNG bytes. Hybrid is the largest — it carries the raster plus the traced paths. Pick the mode that matches the destination's size constraints.
Does PNG transparency survive?
In Faithful and Hybrid modes, yes — PNG's RGBA mode (8-bit alpha per pixel) and tRNS chunk (per-entry 8-bit alpha for indexed-colour PNG, or single colour-key for grayscale/truecolour) round-trip byte-exactly into the SVG <image> element data URL. 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, so transparent areas in the source become absent paths in the output (also transparent when rendered).
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: PNG-specific Posterize / Faithful / Hybrid trade-offs
PNG → SVG benefits from PNG's structural advantages over JPG: lossless DEFLATE compression means there are no 8×8 block quantisation artefacts to suppress, and PNG's tRNS chunk (per-entry 8-bit alpha for indexed-colour PNG, or single colour-key for grayscale/truecolour) or RGBA mode (full 8-bit alpha) preserves transparency that the vectoriser can carry through to the output SVG. The three modes pick different trade-offs: (1) **Posterize** is true vectorisation. The bilateral filter (sigma_space ≈ 2 px, sigma_colour ≈ 28) smooths anti-aliased edges and 1-pixel noise without flattening crisp logo geometry; 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 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 PNG's primary content: logos, icons, illustrations, screenshots with discrete UI regions, flat-colour artwork. (2) **Faithful** mode wraps the original PNG raster (with alpha intact) 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. (3) **Hybrid** is the fidelity-plus-vectors compromise: Faithful's raster base preserves the PNG's pixels (alpha-preserved) 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. Pick the mode that matches the destination: cutter / plotter / editable vector → Posterize; pixel-faithful display in SVG-only context → Faithful; both purposes from one file → Hybrid.
- 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)
- 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
- PNG transparency preserved in Faithful and Hybrid modes — tRNS chunk (per-entry alpha for indexed-colour PNG) and RGBA mode (8-bit alpha) both round-trip cleanly
- 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
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 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; for PNG sources with sharp anti-aliased edges, the bilateral filter prevents the alpha-edge ringing from becoming 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 so palette colours match human-perceived colour distance rather than raw RGB Euclidean distance.
- 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 used for the optional outline overlay in Faithful and Hybrid modes.
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — source PNG container with alpha channel; tRNS chunk (per-entry alpha for indexed-colour PNG) and RGBA mode (full 8-bit alpha) decoded losslessly via the browser's built-in PNG decoder before LAB conversion and tracing.
- Deutsch, P. (1996). DEFLATE Compressed Data Format Specification version 1.3. RFC 1951, IETF (May 1996, Aladdin Enterprises — LZ77 + Huffman; 32 KB sliding window) — PNG IDAT compression algorithm; the source PNG is decompressed 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 PNG 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. ·