Image vectorizer
Convert flat PNG, JPEG, WebP, AVIF, or canonical KTX2 artwork into an SVG in
your browser. Files are not uploaded. The tool first decodes the image to
canonical RGBA8 sRGB KTX2, then traces connected color regions as grid-aligned
SVG paths.
What it produces #
The component reduces retained pixels to one through eight representative RGB
colors, groups 4-connected pixels of each color, and traces their outer edges
and holes. It emits only grid-aligned M, H, V, and Z path commands.
The result is deterministic and preserves the source dimensions, but it is not
a smooth curve tracer.
Colors controls the number of retained palette colors. Alpha threshold
controls transparency: pixels below the threshold are omitted, while retained
pixels become opaque in the SVG. The tracing component accepts at most eight
million pixels. The browser tool reduces larger inputs to that limit before
tracing and reports the resulting dimensions. The component also rejects paths
or SVG output that exceed its fixed limits.
When to use it #
Use it for small logos, pixel art, flat diagrams, and icons with large color
regions. It can make an editable SVG that remains recognizably close to the
source.
Do not use it for photos, gradients, shadows, or anti-aliased illustrations.
Palette reduction turns those details into many stepped regions; the SVG can
be larger than the raster source or be rejected by the component limit.
Run with Node.js and qipx #
qipx is the Node.js Content-component host. For a PNG, it
downloads missing components from qip.dev once, validates them, and then runs
the decoder and vectorizer as one local pipeline:
npx @qip.dev/qipx qip.dev run \
image/png/png-to-ktx2-r8g8b8a8-srgb.wasm \
image/ktx2/ktx2-r8g8b8a8-srgb-vectorize-to-svg.wasm \
-u colors=6 -u alpha_threshold=128 \
< badge.png > badge.svg
Replace the PNG decoder with the JPEG, WebP, or AVIF KTX2 decoder for those
formats. A canonical RGBA8 sRGB KTX2 can start at the vectorizer stage. Use
Node.js 22 or later for qipx.
Component #