Colour-Aware Tracing With vtracer

The web version of Vectalyze uses potrace — a mature, single-colour tracer that works well for logos and line art. The desktop app uses vtracer, a newer Rust library that handles colour natively. The difference in output quality on multi-colour 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 colour 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 colour accuracy at region boundaries.

How vtracer approaches colour

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

1. Colour quantisation

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

2. Region segmentation

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

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-colour logos and brand marks
• App icons and emoji
• Flat illustrations
• Any image where colour accuracy matters

When potrace is still fine

• Single-colour 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.