Understanding the Quadratic Bezier (Q) SVG Path Command
Learn the SVG quadratic bezier curve command (Q) and how its single control point creates smooth curves. Compare with cubic bezier and smooth quadratic (T).
Detailed Explanation
The Quadratic Bezier Command (Q)
The Q command draws a curve using a single control point. It is simpler than the cubic bezier (C) but still produces smooth, elegant curves.
Syntax
Q x1,y1 x,y
- (x1, y1) — The control point
- (x, y) — The endpoint
Example Path
M 10,80 Q 52,10 95,80
Starting at (10, 80), the curve is pulled toward (52, 10) and ends at (95, 80). The result is a symmetric parabolic arch.
Quadratic vs. Cubic
| Feature | Quadratic (Q) | Cubic (C) |
|---|---|---|
| Control points | 1 | 2 |
| Flexibility | Symmetric curves | Asymmetric curves |
| Parameters | 4 numbers | 6 numbers |
| Use case | Simple arches, UI curves | Complex illustrations |
A quadratic bezier can always be converted to a cubic bezier (by placing both cubic control points at 2/3 along the line from the endpoints to the quadratic control point), but not vice versa.
Smooth Quadratic (T)
The T command continues a quadratic curve by reflecting the previous control point across the current point. This gives you a smooth continuation without specifying the control point:
M 10,80 Q 52,10 95,80 T 180,80
The reflected control point creates a mirror-image curve.
Common Patterns
Quadratic beziers are great for:
- Tooltip arrows: A simple arch connecting two elements
- Underline decorations: Subtle curves under text
- Connection lines: Smooth links between nodes in a graph
Use Case
Quadratic bezier curves are ideal for simple UI decorations, tooltip connectors, graph edges, and any situation where a smooth curve with minimal complexity is needed. They are also used in TrueType font outlines.