The SVG path (d) commands explained
Reference with examples
The <path> is the most powerful SVG shape. Its d attribute describes the stroke with a series of commands. Uppercase are absolute; lowercase are relative to the current point.
Move and lines
- M x y - move the "pen" to a point (without drawing).
- L x y - straight line to x,y.
- H x - horizontal line to x.
- V y - vertical line to y.
- Z - close the path (back to the start).
Bezier curves
- C x1 y1 x2 y2 x y - cubic curve with two control points.
- S x2 y2 x y - smooth cubic (mirrors the previous control).
- Q x1 y1 x y - quadratic curve (one control).
- T x y - smooth quadratic (mirrors the previous control).
Arcs
- A rx ry rot large-arc sweep x y - elliptical arc to x,y.
Example: a triangle
<path d="M 50 10 L 90 90 L 10 90 Z" fill="#6c8cff"/>
Move to (50,10), line to (90,90), line to (10,90), close.
Example: a curve
<path d="M 10 80 C 40 10 65 10 95 80" fill="none" stroke="#ff6c9c" stroke-width="4"/>
Don't write it by hand
Calculating curves by hand is tedious. In svgdesk you draw with the pen or pencil and edit the nodes visually; the d attribute is generated for you. You see it in the code panel.