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 / vectorise (vtracer) |
PNG to SVG Vectoriser — VTracer WASM + PNG Transparency
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 VTracer (visioncortex/vtracer, Rust, MIT-licensed), compiled to WebAssembly by this project and running in a module Web Worker. PNG is the ideal input for logo and icon vectorisation: lossless DEFLATE compression means no 8×8 block artefacts to suppress before tracing, and PNG's alpha channel (RGBA mode or tRNS chunk) carries transparency that the tool preserves. Four intent-based presets cover PNG's primary use cases: **Logo** (aggressive speckle cleanup, flat colors — ideal for logotypes and icons exported as PNG), **Illustration** (balanced color clustering, smooth curves — ideal for flat-color illustrations and screenshots with discrete UI regions), **Photo** (maximum color precision, finest layer separation — a detailed vector painting from photographic PNGs; more paths, bigger file), and **B&W** (binary tracing — ideal for line art, sketches, and scanned documents). Tracing works on a downsampled copy (max 2048 px longest edge) and is deterministic: same PNG with same preset always produces the same SVG. **Embed** mode wraps the original PNG raster in an SVG `<image>` element at full resolution with alpha preserved end-to-end (PNG's RGBA mode and tRNS chunk both round-trip byte-exactly into the SVG `<image>` data URL). Optional Sobel edge outline adds a vector contour for cut/print workflows.
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.
- Choose a preset: Logo (flat colors, speckle cleanup — PNG's primary content), Illustration (balanced, suited for screenshots and flat graphics), Photo (max detail — more paths, bigger file), B&W (binary outline for line art), or Embed (original raster in SVG wrapper, alpha preserved).
- 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 and set the edge magnitude threshold.
- 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 (Logo preset) for laser cutters, vinyl plotters, or vector editors that need extractable paths.
- Producing an SVG of a PNG screenshot for a design-system slot that expects SVG — use Illustration preset for discrete UI regions.
- Embedding a transparent PNG inside an SVG-only environment via Embed mode — the alpha channel round-trips byte-exactly into the SVG `<image>` element.
- Generating sticker / decal artwork from a PNG: Embed mode raster + Sobel edge outline 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?
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 PNG raster inside an `<image>` element — it scales via viewBox but the pixel content remains resolution-bound. Pick a tracing preset for genuine vectorisation; Embed for raster-in-SVG wrapping.
Will the SVG be larger than the PNG?
Depends on preset. Logo and B&W SVGs are typically smaller than the source PNG for flat-color content. Illustration is comparable. Photo SVG grows with color precision — it can be larger than the PNG for photographic content because the path data is verbose. Embed SVG is larger because Base64 encoding the raster adds ~33% overhead on top of the PNG bytes.
Does PNG transparency survive?
In Embed mode, yes — PNG's RGBA mode (8-bit alpha per pixel) and tRNS chunk (per-entry alpha for indexed-colour PNG, or single colour-key for grayscale/truecolour) round-trip byte-exactly into the SVG `<image>` element data URL. In the tracing presets, transparent areas (pixels below the alpha threshold) are excluded from tracing and become absent paths in the output.
Does the SVG scale cleanly to any size?
The four tracing presets produce true vectors that scale losslessly to any resolution. Embed mode SVG scales via viewBox but the embedded raster pixelates beyond its original resolution. For destinations that may zoom (signage, large-format print), use a tracing 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 from the in-memory result.
PNG-to-SVG trade-offs: VTracer presets vs Embed mode
PNG → SVG benefits from PNG's structural advantages over JPG: lossless DEFLATE compression (RFC 1951) means there are no 8×8 block quantisation artefacts to suppress before tracing, and PNG's transparency — RGBA mode (full 8-bit alpha per pixel) or tRNS chunk (per-entry alpha for indexed-colour PNG, or single colour-key for grayscale/truecolour) — carries cleanly into the SVG output. The presets pick different trade-offs: **Logo** applies aggressive speckle filtering (Detail slider) and clusters into a small number of flat-color regions — clean compact paths, ideal for PNG logos and icons. **Illustration** balances color precision (Colors slider, 1–8 levels) and curve smoothness (Smoothness slider, corner threshold) — suited to vector-style illustrations, flat-color graphics, and screenshots with discrete UI regions. **Photo** maximises color precision and layer separation, producing a detailed vector painting from photographic PNGs — the trade-off is more paths and a larger file than the source PNG. **B&W** applies binary tracing — the source is reduced to two values before VTracer runs, producing a clean monochrome outline ideal for line art, scanned documents, and stamps. **Embed** mode wraps the original PNG raster (with alpha intact) inside an SVG `<image>` element; the file is valid SVG and scales via viewBox, but 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. VTracer outputs cubic Bezier splines using a stacked layering strategy, and the tracing is deterministic: same PNG, same preset, same sliders → same SVG output every time.
- VTracer WASM engine (visioncortex/vtracer, Rust, MIT) — self-built, vendored ~122 KB, module Web Worker
- Four tracing presets: Logo, Illustration, Photo (more paths, bigger file), B&W (binary)
- PNG transparency preserved in Embed mode — RGBA mode and tRNS chunk both round-trip byte-exactly
- Deterministic output: same PNG + preset + sliders = same SVG every time
- 2048 px downsampling before trace — handles high-resolution logo exports cleanly
- Embed mode: wraps original PNG in SVG <image> at full resolution + optional Sobel edge outline
- 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 (7)
- 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 (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 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 the Embed preset.
- 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 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.