Understanding SVG Path Curve Commands S and T

The S and T commands in SVG path data (d attribute) are shorthand instructions designed to create continuous, smooth curves by chaining multiple Bézier segments together. Instead of requiring manual coordinate inputs for every control point, these commands automatically infer the initial control point by reflecting the previous segment’s control point across the current anchor point. This ensures seamless transitions between adjacent curves without sharp corners or kinks, while reducing the overall verbosity of the SVG code.

The Smooth Cubic Bézier Curve: S (or s)

The standard cubic Bézier command (C) requires two control points and an end point: C x1 y1, x2 y2, x y.

When chaining cubic curves, the smooth cubic Bézier command (S for absolute coordinates, s for relative coordinates) simplifies this by accepting only the second control point and the final anchor point: S x2 y2, x y.

The first control point is automatically calculated as the reflection of the second control point of the preceding C or S command relative to the current start point. If the preceding command is not a C or S, the first control point is assumed to be coincident with the current point, resulting in a quadratic-like curve behavior.

The Smooth Quadratic Bézier Curve: T (or t)

The standard quadratic Bézier command (Q) uses a single control point and an end point: Q x1 y1, x y.

The smooth quadratic Bézier command (T for absolute coordinates, t for relative coordinates) streamlines this further by requiring only the end point: T x y.

The single control point required for the curve is automatically calculated by reflecting the control point of the previous Q or T command across the current start point. If the previous command was not a quadratic curve command, the control point is placed directly on the current point, drawing a straight line.

Key Purposes and Benefits

• Guaranteed Tangent Continuity: Manually aligning control points across multiple Bézier curves to prevent visual seams can lead to calculation errors. The S and T commands mathematically guarantee first-derivative (\(C^1\)) continuity across path segments.
• Reduced File Size: Because fewer coordinates need to be defined in the path string, complex vector illustrations, icons, and wave patterns use significantly fewer bytes.
• Simplified Path Generation: Vector design tools and algorithmic path generators can produce clean, readable path definitions without needing to output redundant mirror points.