All posts
potrace — image to vector1import { trace } from 'potrace'2import sharp from 'sharp'4const bmp = await sharp(input)5 .greyscale() .threshold(128)6 .toBuffer()7const svg = await trace(bmp)8return svgENGINEERING
Engineering

Color-aware tracing with vtracer

Unlike potrace, vtracer segments images by color before fitting paths — making it dramatically better on illustrations and icons. Here's how it works.

Vectalyze Team·February 18, 2026·9 min

Color-Aware Tracing With vtracer

The web version of Vectalyze uses potrace — a mature, single-color tracer that works well for logos and line art. The desktop app uses vtracer, a newer Rust library that handles color natively. The difference in output quality on multi-color images is substantial.

The potrace limitation

potrace is a binary tracer. Before it can do anything, the input image must be converted to black and white. Any color information is thrown away.

For a black logo on white, this is fine. For a red, blue, and green illustration, you'd need to run potrace three times (once per channel) and manually composite the results — which is tedious and loses color accuracy at region boundaries.

How vtracer approaches color

vtracer starts with the full color image. Its pipeline looks like this:

1. Color quantisation

The image is first quantised to a limited palette — the number of colors is configurable. This step groups similar colors together, reducing the tracing problem to a manageable number of regions.

2. Region segmentation

Each quantised color becomes a region. vtracer finds connected components for each color — similar to how potrace finds connected black regions, but done N times in parallel for N colors.

3. Hierarchical path building

Regions are organised into a hierarchy: a red circle inside a blue square is represented as a child path of the square, not as two separate unrelated paths. This produces valid SVG with correct stacking and clipping.

4. Curve fitting

The same Bézier fitting approach as potrace, but applied per-region. Smooth curves are fitted to region boundaries, with corner detection and configurable smoothing.

When vtracer wins

  • Multi-color logos and brand marks
  • App icons and emoji
  • Flat illustrations
  • Any image where color accuracy matters

When potrace is still fine

  • Single-color line art
  • Technical drawings
  • QR codes and barcodes
  • High-contrast black and white images
The web app uses potrace because it's well-optimised for Node.js and handles the most common case (logo/icon on solid background) well. For everything else, the desktop app's vtracer pipeline produces noticeably better results.