SVG Path Syntax & Bézier Curve Mathematics: Complete Engineering Guide

The SVG Path Command Grammar

The SVG path data micro-syntax executes like an assembly instruction set for a virtual vector pen:

• Case-Sensitive Coordinates: Uppercase commands (e.g., M 100 200) specify absolute coordinates in the current user coordinate space. Lowercase commands (e.g., m 10 20) specify relative offsets from the pen's current position.
• Whitespace & Separator Rules: Parameters may be separated by whitespace, commas, or negative signs (e.g., M10-20L30 40 is fully valid syntax).
• Path Termination: The Z or z command closes the active sub-path by drawing an automatic straight line back to the initial M coordinate of the current contour.

Bézier Curve Mathematics: Bernstein Basis Polynomials

Bézier curves are parametric curves where coordinate positions are evaluated as a function of parameter $t$, where $t \in [0, 1]$.

In general, an $n$-th degree Bézier curve with $n+1$ control points $P_0, P_1, \dots, P_n$ is expressed using Bernstein polynomials:

Quadratic Bézier (Q Command)

A quadratic curve uses three points: start point $P_0$, single control handle $P_1$, and end point $P_2$:

Cubic Bézier (C Command)

The cubic curve provides two independent control handles $P_1$ and $P_2$, granting sufficient degrees of freedom to introduce inflection points (S-curves) within a single path segment:

De Casteljau's Subdivision Algorithm

Evaluating powers of $t$ directly on floating-point hardware introduces cumulative numerical roundoff errors. Modern graphics engines (such as Skia and Cairo) evaluate and subdivide Bézier curves using De Casteljau's Algorithm:

1. Given control points $P_0, P_1, P_2, P_3$ and parameter $t$, compute three first-level interpolated points:
   Q_0 = (1-t)P_0 + t P_1, \quad Q_1 = (1-t)P_1 + t P_2, \quad Q_2 = (1-t)P_2 + t P_3
2. Compute two second-level interpolated points:
   R_0 = (1-t)Q_0 + t Q_1, \quad R_1 = (1-t)Q_1 + t Q_2
3. Compute the final point on the curve:
   S_0 = (1-t)R_0 + t R_1 = B(t)

Crucially, De Casteljau's algorithm splits the original curve into two valid cubic Bézier segments: the left segment defined by control points $[P_0, Q_0, R_0, S_0]$ and the right segment defined by $[S_0, R_1, Q_2, P_3]$. This subdivision enables recursive flattening, precise curve bounding box calculations, and ray-curve intersection testing.

Geometric Continuity: C0, C1, and C2 Transitions

When joining multiple path segments into complex organic contours, the mathematical continuity across boundary junctions dictates visual smoothness:

• $C^0$ Continuity (Positional): Segments touch at the same endpoint, but tangent vectors diverge, producing a sharp corner or kink.
• $C^1$ Continuity (Tangential): The tangent vectors (first derivatives $B'(t)$) at the junction point are collinear. In SVG, the S (smooth cubic) and T (smooth quadratic) commands enforce $C^1$ continuity by automatically reflecting the preceding control handle through the junction point:
  P_{1,\text{new}} = 2 P_{\text{junction}} - P_{2,\text{prev}}
• $C^2$ Continuity (Curvature): Both the tangent angle and the rate of curvature change (second derivative $B''(t)$) match across the boundary. Achieving $C^2$ continuity eliminates subtle visual highlight breaks, which is vital for luxury product rendering and automotive surface design.

Elliptical Arc Trigonometry (A Command)

The SVG A command defines an arc using endpoint parameterization: A rx ry x-axis-rotation large-arc-flag sweep-flag x y.

Because two points on a plane can be connected by an ellipse in four distinct ways, the specification requires two boolean flags:

• large-arc-flag: Determines whether to follow the longer arc angle ($> 180^{\circ}$, flag=1) or the shorter arc angle ($< 180^{\circ}$, flag=0).
• sweep-flag: Governs angular drawing direction: positive clockwise angle (flag=1) or negative counter-clockwise angle (flag=0).

Arc-Length Parameterization & Constant Velocity Motion

A subtle property of Bézier curves that frequently catches graphics developers off guard is that parameter $t$ does not correspond to physical distance along the curve. If an object is animated along a cubic Bézier path by linearly incrementing $t$ from 0 to 1, the object appears to speed up and slow down erratically depending on the spatial distribution of control handles.

To achieve true constant-speed motion (e.g., CSS offset-path or SVG <animateMotion>), rendering engines compute the curve's arc-length integral $s(t) = \int_0^t |B'(u)| du$ using numerical Legendre-Gauss quadrature. The engine pre-calculates an arc-length Lookup Table (LUT), inverting the function so the animator can query $t$ for any normalized physical distance $s$, guaranteeing smooth, uniform velocity motion paths.