Cubic vs Quadratic Bezier Curves in SVG Syntax

In Scalable Vector Graphics (SVG), curved paths are primarily constructed using Bezier curves defined inside the d attribute of a <path> element. The primary difference between a cubic Bezier curve and a quadratic Bezier curve in SVG syntax lies in the number of control points used to shape the curve: a quadratic curve relies on a single control point to create simpler arcs, whereas a cubic curve utilizes two distinct control points to produce more complex trajectories, such as inflection points and S-curves.

Control Point Differences

The mathematical definition translates directly into the number of coordinate pairs required in the SVG command:

• Quadratic Bezier Curve: Uses one control point. The curve starts at the current path position, bends toward the single control point, and ends at the designated end point.
• Cubic Bezier Curve: Uses two control points. The curve starts at the current path position, bends toward the first control point, transitions toward the second control point, and finishes at the end point.

Because cubic curves have an additional control point, they allow independent manipulation of the departure angle from the start point and the arrival angle at the end point.

SVG Command Syntax

Both curve types have standard and smooth (shorthand) command variants, supporting uppercase letters for absolute coordinates and lowercase letters for relative coordinates.

1. Quadratic Bezier Commands (Q, q, T, t)

The standard quadratic command requires two sets of coordinates: the single control point followed by the end point.

M x0 y0 Q x1 y1, x y

• x0, y0: Starting point (set by M).
• x1, y1: The single control point.
• x, y: The end point of the curve.

The smooth quadratic command (T or t) extends a previous quadratic curve by automatically inferring a new control point as the reflection of the previous one:

T x y

• x, y: The end point of the continued curve.

2. Cubic Bezier Commands (C, c, S, s)

The standard cubic command requires three sets of coordinates: two control points followed by the end point.

M x0 y0 C x1 y1, x2 y2, x y

• x0, y0: Starting point (set by M).
• x1, y1: The first control point (affects start slope).
• x2, y2: The second control point (affects end slope).
• x, y: The end point of the curve.

The smooth cubic command (S or s) chains cubic curves together. It automatically calculates the first control point as a reflection of the previous curve’s second control point, requiring you to specify only the second control point and the end point:

S x2 y2, x y

• x2, y2: The second control point.
• x, y: The end point of the continued curve.

Summary of Syntax Differences