Why Vectorizing a Raster Image Is Harder Than It Looks

To a human observer, converting a sharp raster logo into a clean vector SVG seems like an intuitive translation: trace the edges of the shape, make them smooth, and write out XML path commands.

In computer science, however, vectorization is a mathematically ill-posed inverse problem.

Rasterization destroys information. A continuous mathematical curve is discretized onto an orthogonal pixel grid, discarding continuous coordinate topology, introducing quantization noise, and blending boundaries across partial sub-pixel coverage. Reconstructing continuous, resolution-independent parametric curves from a grid of discrete integers requires solving complex combinatorial optimization problems (such as minimum-vertex polygonal approximation under strict error bounds) followed by non-linear Bézier spline fitting.

---

The Fundamental Obstacles of Raster-to-Vector Conversion

Continuous World        Discretization (Raster)         Vectorization (Inverse Problem)
[Smooth Bezier Curve] ───────(Sensor/Scan)───────► [Pixel Grid Array] ───────(Potrace/CV)───────► [Fitted SVG Paths]
                             Lossy Sampling                   Mathematical Reconstruction

1. Quantization Noise & Aliasing: On a 2D bitmap, diagonal and curved edges must be approximated as jagged staircases (Bresenham discretization) or anti-aliased shades of gray. The vectorizer must deduce whether a 1-pixel step is an intentional notch or quantization artifact.
2. Ambiguous Topology: At pixel corners where four pixels meet diagonally (e.g., checkerboard pattern), topology is formally undefined. Without strict topological conventions, path traces will intersect themselves or create non-manifold holes.
3. Parametric Complexity vs. Fidelity: You can trivially turn every single pixel into a microscopic vector polygon. However, an SVG with 50,000 polygon nodes is worse than a PNG: it causes rendering lag, huge file sizes, and is impossible for a designer to edit. The true challenge is finding the minimal set of cubic Bézier curves that faithfully reproduces the silhouette.

---

The Anatomy of the Potrace Pipeline

The classical standard for solving binary raster vectorization deterministically is Peter Selinger’s Potrace algorithm. Softeem implements this algorithm directly in the client browser across four discrete stages:

Step 1: Dynamic Binarization

The input image is converted to grayscale using luminance weighting:

$$Y = 0.299R + 0.587G + 0.114B$$

A high-frequency threshold partitions pixels into a binary bitfield ($1$ for foreground, $0$ for background).

Step 2: Path Decomposition & Contour Loop Extraction

The bitfield is scanned along horizontal scanlines. When a boundary transition between $0$ and $1$ is detected, the algorithm traces a closed path along the boundaries between pixels.

To maintain Euler characteristic consistency and avoid ambiguous corner connectivity, Potrace enforces a single unambiguous traversal rule (e.g., always turn right when traversing positive contours, turn left on negative holes). The output is a collection of closed, self-avoiding raster polygons.

Step 3: Optimal Polygonal Approximation

Raw pixel contours contain thousands of orthogonal vertices along jagged staircases. Potrace computes a simplified polygon by searching for straight-line shortcuts that do not deviate from the original boundary by more than a specified tolerance $\epsilon$.

This is framed as an optimization problem: $$\min \{ \text{vertices } V_k \} \quad \text{subject to} \quad \text{deviation}(P, V_k) \le \epsilon$$

Step 4: Smooth Bézier Curve Fitting

Finally, consecutive straight-line segments with angles below a corner threshold are fitted with parametric cubic Bézier curves:

$$\mathbf{B}(t) = (1-t)^3 \mathbf{P}_0 + 3(1-t)^2 t \mathbf{P}_1 + 3(1-t) t^2 \mathbf{P}_2 + t^3 \mathbf{P}_3, \quad t \in [0, 1]$$

Control points $\mathbf{P}_1$ and $\mathbf{P}_2$ are positioned to minimize least-squares error relative to the original polygonal vertices while enforcing $G^1$ continuity (tangent collinearity) at curve junctions.

---

Practical Trade-Offs in Vector Production

When preparing assets for design systems, web icons, or physical manufacturing (CNC, vinyl cutting, silkscreen), vector tuning requires balancing three contradictory vectors:

Parameter	Setting Too Low	Setting Too High	Optimal Sweet Spot
Color Quantization	Flat silhouette; lost depth	Excessive overlapping SVG layers	4–8 indexed color palettes
Curve Smoothness	Rigid, robotic polygonal edges	Over-smoothed curves; rounded sharp corners	Moderate tension with adaptive corner detection
Speckle Filter (Turdsize)	Stray dust particles vectorized into tiny nodes	Small lettering and punctuation dots deleted	2–4 pixel suppression

---

Try It Live in Your Browser

Convert raster bitmaps, sketch scans, and brand logos into clean, production-grade SVGs with real-time vector path optimization.

👉 Launch Image to SVG Vectorizer