How to Use the SVG Path Q Command for Bezier Curves

The Q (or q) command in an SVG <path> element creates a quadratic Bézier curve, a smooth curve defined by three key locations: a start point, a single control point, and an end point. Unlike cubic Bézier curves, which use two control points, quadratic curves require only one, making them simpler to calculate and ideal for symmetric curves, arches, and smooth transitions in vector graphics.

Syntax and Parameters

The standard syntax for the quadratic Bézier curve command within the d attribute of a <path> element is:

Q x1 y1, x y

• Start Point: The curve starts at the current pen position, which is established by a preceding command such as M (MoveTo) or the end of a previous path segment.
• Control Point (x1, y1): The coordinate that dictates the direction and curvature. The curve bends toward this point without actually passing through it.
• End Point (x, y): The final coordinate where the curve segment terminates.

Absolute vs. Relative Commands

• Q (Uppercase): Uses absolute coordinates relative to the SVG coordinate system origin (0,0).
• q (Lowercase): Uses relative coordinates based on the current pen position.

How the Geometry Works

A quadratic Bézier curve is generated through linear interpolation between three points:

1. Start Point (\(P_0\)): The initial pen location.
2. Control Point (\(P_1\)): The x1 y1 values.
3. End Point (\(P_2\)): The x y values.

The curve is tangent to the line segment \(P_0P_1\) at the start, and tangent to the line segment \(P_1P_2\) at the end. Pulling the control point further away from the baseline increases the steepness and height of the curve.

Code Example

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 150 Q 150 50, 250 150" stroke="black" fill="transparent" stroke-width="2" />
</svg>

In this example: * M 50 150 moves the pen to (50, 150). * Q 150 50, 250 150 pulls the curve upward toward the control point at (150, 50) and finishes at the end point (250, 150).

Chaining and the Smooth Shortcut (T Command)

Multiple quadratic curves can be chained together inside a single path definition:

d="M 10 80 Q 52.5 10, 95 80 Q 137.5 150, 180 80"

To create continuous, smooth curves without calculating new control points manually, SVG provides the T (or t) command. The T command automatically calculates a reflected control point based on the previous Q command’s control point:

d="M 10 80 Q 52.5 10, 95 80 T 180 80"

The T command only requires the next end point coordinate (x y), ensuring a smooth transition between consecutive curve segments.