Image to SVG Tracer

The tracer runs a fixed multi-stage pipeline on the image's canvas pixels, entirely in your browser. Before anything is traced, large inputs are scaled so the longest edge is at most 800px (for performance), then an optional separable Gaussian blur is applied as two passes (horizontal then vertical) with a kernel whose radius you set from 0 to 5px in 0.5 steps. In Black & White mode each pixel is reduced to luma using the standard weights 0.299R + 0.587G + 0.114B and compared against a threshold you control from 1 to 255 (default 128); pixels below threshold become foreground, and the Invert toggle flips that test and additionally writes a full black background rectangle with white paths. In Color mode the tool instead runs median-cut color quantization down to a palette of 2 to 16 colors (the 'Color Layers' slider, default 6), then traces each palette color as its own separate SVG layer, so a 6-layer trace emits up to six groups of like-colored paths.

Outlines are extracted with an 8-directional chain-code boundary follower: a pixel is a 'border pixel' if it is filled but has at least one empty neighbor among its eight, and the tracer walks those border pixels into closed contours. Contours shorter than the Min Path Length you set (2 to 50 pixels, default 5) are discarded, which is the knob for dropping speckle and noise. Each surviving contour is then smoothed by running 0 to 10 averaging passes (default 2), where each pass nudges every point a quarter of the way toward the midpoint of its two neighbors, and is finally simplified with the Ramer-Douglas-Peucker algorithm at a fixed tolerance of 1.0 to drop redundant collinear points. The simplified points are emitted as an SVG path built mostly from quadratic bezier (Q) segments running through point midpoints (with a closing line-to on the final segment), which is what gives the output its rounded, curve-fitted look instead of jagged stair-stepping.

Output is real SVG markup with a viewBox matching the (possibly downscaled) pixel dimensions. In Filled mode each path is written with fill-rule="evenodd" so nested contours form holes correctly (think the inside of an 'O'); in Outline mode paths are emitted with fill="none" and a stroke whose width you set from 0.5 to 5px. The side panel reports live stats - path count, output size in KB (computed from the SVG string length), and dimensions - and tracing re-runs automatically about 300ms after you change the image or any setting, executed inside a setTimeout so the UI stays responsive. You can copy the SVG source or download it as traced.svg. Because this is contour tracing of thresholded regions, it is built for logos, icons, line art, and flat illustrations; photographs with smooth gradients quantize into blocky color bands and produce hundreds of noisy paths, which is an inherent limit of the approach rather than a tuning problem.