The d attribute of a "<path>" element defines the shape of the path as a sequence of commands, each a single letter followed by numeric parameters (e.g., M 40 50). To parse a d attribute in code, use PathParser::Parse.

A path is a sequence of sub-paths, each starting with a M (moveto) and optionally ending with a Z (closepath). Between them, line, curve, and arc commands draw shapes relative to the current point, which advances after every drawing command.

Absolute vs. relative: Commands use uppercase letters for absolute coordinates and lowercase for coordinates relative to the current point. For example, L 100 50 draws to the point (100, 50) in user space, while l 10 5 draws to a point 10 units right and 5 units down from wherever the current point is.

Compact form: Whitespace and commas are interchangeable, and repeated command letters may be omitted. The following are all equivalent:

M 40 50 L 80 90 L 120 90
M40,50 L80,90 120,90
M40 50 L80 90,120 90

See also: https://www.w3.org/TR/SVG2/paths.html#PathData

Moveto and closepath

M starts a new sub-path at the given point without drawing anything, and Z closes the current sub-path by drawing a straight line back to its starting point. Every path must begin with an M command.

Command	Function	Parameters	Description
M	PathBuilder::moveTo	(x y)+	Start a new sub-path at (x, y). If additional coordinate pairs follow, they are treated as implicit L commands.
Z	PathBuilder::closePath	(none)	Close the current sub-path by drawing a line from the current point to the starting point of the sub-path.

Line commands

Line commands draw straight line segments from the current point to a new point.

Command	Function	Parameters	Description
L	PathBuilder::lineTo	(x y)+	Draw a line to (x, y).
H	Horizontal line to	x+	Draw a horizontal line to (x, currentY).
V	Vertical line to	y+	Draw a vertical line to (currentX, y).

Cubic Bézier curves

Cubic Bézier commands draw a smooth curve to a new point using two control points that pull the curve tangent at each endpoint.

Command	Function	Parameters	Description
C	PathBuilder::curveTo	(x1 y1 x2 y2 x y)+	Draw a cubic Bézier from the current point to (x, y) with control points (x1, y1) (for the start) and (x2, y2) (for the end).
S	Smooth cubic curve to	(x2 y2 x y)+	Same as C, but the first control point is implicitly the reflection of the previous command's second control point across the current point. Chains after a C or another S.

The dashed red handles are the explicit control points for the first C command. The S that follows reuses a reflected first control point automatically (shown in teal) to continue the curve with C¹ continuity.

Quadratic Bézier curves

Quadratic Bézier commands use a single control point shared by both endpoints. Use them when cubic curves are more precision than you need.

Command	Function	Parameters	Description
Q	Quadratic curve to	(x1 y1 x y)+	Draw a quadratic Bézier from the current point to (x, y) with control point (x1, y1).
T	Smooth quadratic curve to	(x y)+	Same as Q, but the control point is implicitly the reflection of the previous command's control point across the current point. Chains after a Q or another T.

Elliptical arc

The A command draws a portion of an ellipse between the current point and a new endpoint. Four parameters disambiguate which of the (up to) four possible ellipse arcs to draw:

Command	Parameters	Description
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	Draw an elliptical arc to (x, y) using radii rx and ry, rotated by x-axis-rotation degrees. large-arc-flag chooses the longer (1) or shorter (0) of the two possible arcs, and sweep-flag chooses the arc going clockwise (1) or counter-clockwise (0). See PathBuilder::arcTo.

The four flag combinations pick out the four distinct arcs between the same pair of endpoints on the same ellipse:

All four curves use rx=60 ry=40 x-axis-rotation=0, but different large-arc-flag / sweep-flag combinations produce the four distinct arcs between the same endpoints.