Image Vectorizer

How the Vectorizer Works

Vectorization (also called bitmap tracing) converts pixel art into resolution-independent paths. The pipeline runs entirely in your browser with three stages. First, the tracer quantizes the input pixels into a small color palette - 2 colors in Black & White mode, or 2-32 colors in Color mode. Second, it walks the boundary of each color region and emits a sequence of edge segments using a marching-squares-style contour walk. Third, it fits cubic Bezier curves to those segments using a curve-fitting algorithm conceptually similar to Peter Selinger's Potrace, then writes them out as <path> elements inside a single <svg> root.

The tracing engine here is imagetracerjs, an MIT/Unlicense JavaScript port of similar ideas. It runs in a dedicated Web Worker so that even multi-second traces of large images leave the page responsive. No SharedArrayBuffer, COOP, or COEP headers are required, which keeps the tool compatible with the rest of zeroutil.com (and AdSense) - the worker is a plain ES module worker.

What the Controls Actually Do

• Mode: Color uses a k-means style palette with deterministic sampling; Black & White forces a 2-color palette and skips the chroma sampling pass. B/W is roughly 3-4x faster on the same input.
• Colors (color mode only): the size of the quantized palette. 4-8 is right for flat illustrations, 12-24 for detailed logos with shading, 32 for posters. More colors means more <path> layers and a larger SVG file.
• Path simplification: maps to imagetracerjs's pathomit threshold. Higher values discard short paths (think: tiny isolated specks of color); lower values keep every contour. Crank this up if you see noise or speckles in the output.
• Corner threshold: maps to ltres + qtres, the line and quadratic curve fitting tolerances. Lower values keep corners sharp (good for typography or pixel art); higher values smooth contours (good for organic shapes and rounded logos).

When Vectorizing Pays Off

• Recovering an editable SVG from a PNG logo when the original AI / SVG file has been lost.
• Preparing artwork for a vinyl cutter, laser engraver, plotter, or embroidery machine - all of which need vector paths, not pixels.
• Scaling an icon from a tiny 64 x 64 PNG up to a 4K hero size without the staircase aliasing of bitmap upscaling.
• Replacing PNG or JPEG icons in a design system with SVGs that re-color via CSS fill without re-exporting per theme.
• Generating SVG path data to feed into a CSS / SMIL / GSAP animation, or to use as a CSS clip-path source.
• Cutting page weight on a marketing site where one 200 KB hero PNG can become a 6 KB SVG that scales to any viewport.

When Vectorizing Will Disappoint You

Tracing has hard physical limits, and three categories of input come out poorly no matter how much you tune the controls.

• Photographs with smooth gradients. Skin, sky, sunsets, blurred bokeh - all of these contain millions of subtly varying pixels. A palette quantizer collapses that range into a handful of bands and the result looks posterized. Keep photos in JPEG, WebP, or AVIF.
• Anti-aliased text on a photo background. The half-transparent edge pixels where the text meets the background become a fuzzy intermediate color, and the tracer renders them as wobbling extra paths. Re-typeset the text using a real font in SVG instead.
• JPEG-compressed line art. JPEG's DCT encoder smears edges and adds 8 x 8 block artifacts. The tracer faithfully reproduces those artifacts as wavy contours. If you have a PNG of the same artwork, use that instead.

Comparison to Other Vectorizers

Vectorizer.ai is the current quality leader for hard inputs - it runs a server-side neural model trained on real vector / raster pairs and can recover convincingly clean paths from photos and shaded art. It is paid (the free tier rasterizes a watermarked preview) and requires uploading your image. Inkscape's "Trace Bitmap" command (Path -> Trace Bitmap) is the desktop standard, exposes Potrace's full parameter space, and runs locally - the trade-off is a heavy desktop install vs. an in-browser tool. Potrace itself is the C reference implementation that powers Inkscape's B/W trace and many others; it is unbeatable for clean line art but does B/W only. Autotracer is another free web service - similar approach to ours but uploads your file. This tool sits in the convenience-first slot: open a tab, drop a file, get an SVG, no upload, no install.

Tips for the Cleanest Trace

• Start with the highest-resolution PNG you have. The tracer downscales above 4000 px on the long edge, but starting from a clean source beats starting from a JPEG or a 256 x 256 PNG.
• For logos, do a B/W trace first to inspect the silhouette, then switch to Color and dial up the palette only if you need shading.
• If the result has speckles, increase Path simplification by 2-3 steps before lowering color count. Speckles usually come from JPEG noise, not from the palette.
• If corners look too rounded, lower Corner threshold by 30-60. Typography and pixel art usually want 30-60; soft illustrations are happy at 100-150.
• Open the downloaded SVG in a text editor or in Inkscape to verify the path count is sensible. A logo that traces to 3000 paths probably wants more simplification.

Privacy and Performance

Every byte of your image stays on your device. The file is read with the standard File / Blob API, decoded into pixel data via createImageBitmap and a <canvas>, then handed to a Web Worker that runs the tracer off the main thread. Nothing is uploaded; the network panel stays silent throughout. On a typical 2020-era laptop, a 1500 x 1500 image traces in roughly 0.5-2 seconds in Color mode and a fraction of that in Black & White mode. The 4000 px long-edge cap keeps the worst case bounded; if you need to trace something larger, downscale separately first or split the image into tiles.