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

How potrace turns pixels into paths

A deep dive into the bitmap tracing algorithm powering our web app — how it segments regions, fits Bézier curves, and why threshold matters so much.

Vectalyze Team·April 14, 2026·10 min

How potrace Turns Pixels Into Paths

potrace is the open-source bitmap tracing library at the heart of Vectalyze's web conversion pipeline. Released in 2001, it's still the gold standard for single-colour and simple multi-colour tracing. Here's how it works.

Step 1: Thresholding

potrace works on a binary bitmap — every pixel is either black or white. The first step is converting your input image to this binary form.

The threshold parameter controls the cutoff. Pixels with a luminance above the threshold become white; below it, black. Getting this right is crucial:

  • Too high: fine details disappear, thin lines drop out
  • Too low: noise and texture gets included as shapes
  • Default (128/255): works well for clean logos on solid backgrounds

Step 2: Region decomposition

Once we have a binary image, potrace identifies contiguous black regions and finds their outlines. This is a standard connected-components algorithm operating on the pixel grid.

Each outline is represented as an ordered list of pixel corners — essentially a polygon traced around the region edge.

Step 3: Polygon optimisation

Raw pixel outlines are staircase shapes — they only move horizontally or vertically at 45° angles. potrace simplifies these into a minimal polygon by removing redundant vertices while staying within a configurable tolerance.

This is where the turdSize parameter comes in. Any region smaller than turdSize pixels is discarded as noise before polygon fitting begins.

Step 4: Bézier curve fitting

The polygon is then analysed to find corners and smooth sections. Smooth sections get fitted with cubic Bézier curves — the same type of paths you edit in Illustrator or Figma.

The algorithm minimises the squared distance from the Bézier to the original polygon points while trying to keep curves as smooth as possible. The alphaMax parameter controls how aggressively corners are detected.

Step 5: Output

The final path data is emitted as SVG elements using M, L, C commands. For EPS and PDF output, the same paths are converted to their respective format's drawing commands.

What potrace can't do

potrace traces one colour at a time. For multi-colour images, you'd need to run it once per colour channel and stack the results. Our desktop app uses vtracer for this, which handles colour natively. The web app pre-processes images to greyscale before tracing, which works well for logos and line art but loses colour information.