The Scalable Vector Graphics (SVG) <path> element is the fundamental building block of vector graphics on the modern web. Understanding the mathematical equations governing cubic and quadratic Bézier curves allows developers to build high-performance vector editors, procedural charting libraries, and procedural animation engines.
1. SVG Path Command Grammar
Every SVG path definition is composed of coordinate commands executed in sequence by the browser's vector rasterizer:
| Command | Name | Mathematical Parameters & Coordinate Space |
|---|---|---|
M / m | MoveTo | (x, y): Establishes a new current subpath origin point without drawing a stroke. |
L / l | LineTo | (x, y): Renders a linear vector stroke from current point to target coordinate. |
C / c | Cubic Bézier | (x1, y1, x2, y2, x, y): Interpolates third-order polynomial using two distinct control handles. |
Q / q | Quadratic Bézier | (x1, y1, x, y): Interpolates second-order polynomial using a single shared control point. |
A / a | Elliptical Arc | (rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y): Renders an ellipse segment. |
Z / z | ClosePath | Draws a straight line from current position back to initial subpath origin. |
2. Bézier Curve Calculus & Bernstein Polynomials
A cubic Bézier curve is mathematically defined by four control points: origin $P_0$, first tangent $P_1$, second tangent $P_2$, and endpoint $P_3$ evaluated across normalized time $t \in [0, 1]$:
B(t) = (1 - t)^3 * P0 + 3 * (1 - t)^2 * t * P1 + 3 * (1 - t) * t^2 * P2 + t^3 * P3📐 Performance Optimization: De Casteljau's Algorithm
When evaluating Bézier intersections or rendering hit-testing boundaries in a canvas vector editor, De Casteljau's algorithm provides numerically stable subdivision without floating-point polynomial drift.