SVG Smooth Quadratic Bezier Curve T Command Explained

This article provides a comprehensive overview of the smooth quadratic Bézier curve command, represented by the letter T (or lowercase t) in SVG path data (d attribute). You will learn about the exact coordinate parameters the command accepts, how it automatically calculates control points to maintain a continuous curvature, and the differences between absolute and relative implementations.

The Parameters of the T Command

Unlike standard quadratic Bézier curve commands (Q or q) which require both a control point and an endpoint, the T command only requires the coordinates of the end point of the curve.

The syntax is defined as:

Absolute: T x y (or T x,y)
Relative: t dx dy (or t dx,dy)

Parameter Definitions

x (or dx): The absolute X-coordinate (or relative horizontal distance for t) of the final point where the curve segment ends.
y (or dy): The absolute Y-coordinate (or relative vertical distance for t) of the final point where the curve segment ends.

Multiple pairs of coordinates can be provided consecutively (e.g., T x1 y1 x2 y2), which creates a polybezier sequence of smooth curve segments.

How the Control Point is Derived

Although the quadratic curve requires a control point to define its curvature, you do not pass control point parameters into the T command. Instead, the SVG rendering engine automatically calculates it:

Reflection Mechanism: The control point for the T command is assumed to be the reflection of the control point from the previous command relative to the current point (the starting point of the T segment).
Smooth Continuity: Because the incoming tangent matches the outgoing tangent, this automatic reflection ensures a smooth, continuous C1 transition between curve segments without sharp angles.

Fallback Behavior

If a T command does not immediately follow another quadratic Bézier command (Q, q, T, or t), the implicit control point is assumed to be coincident with the current point (the start point of the segment). In this scenario, the resulting segment renders as a straight line to (x, y).

Absolute (`T`) vs. Relative (`t`)

T x y (Uppercase): Uses absolute coordinates within the SVG canvas coordinate space.
t dx dy (Lowercase): Uses relative coordinates offset from the current pen position at the start of the command segment.