Path Command Quick Reference
Command | Parameters | Description |
---|---|---|
M, m | x, y | MoveTo
Specify the starting (x, y) coordinates of the new sub-path. Subsequent coordinates are treated as parameters of the LineTo (L, l) command. |
L, l | x, y | LineTo
Draw a line from the current coordinates to the given (x, y) coordinates. |
H, h | x | Horizontal LineTo
Draw a horizontal line from the current coordinate to the given (x) and the current y coordinates. |
V, v | y | Vertical LineTo
Draw a vertical line from the current coordinate to the current x and given (y) coordinates. |
C, c | x1, y1, x2, y2, x, y | CurveTo
Draw a cubic Bézier curve from the current coordinates to the given (x, y) coordinates. (x1, y1) are the coordinates of the control point at the start of the curve. (x2, y2) are the coordinates of the control point at the end of the curve. |
S, s | x2, y2, x, y | Shorthand / Smooth CurveTo
Draw a cubic Bézier curve from the current coordinates to the given (x, y) coordinates. (x2, y2) are the coordinates of the control point at the end of the curve. The coordinates of the control point at the start of the curve are reflection of the end control point of the previous curve. If the previous command is not CurveTo (C, c, S, s), the coordinates of the control point at the start of the curve will be the same as the start coordinates of the current curve. |
Q, q | x1, y1, x, y | Quadratic Bézier CurveTo
Draw a quadratic Bézier curve from the current coordinates to the given (x, y) coordinates. (x1, y1) are the coordinates of the control point. |
T, t | x, y | Shorthand / Smooth Quadratic Bézier CurveTo
Draw a quadratic Bézier curve from the current coordinates to the given (x, y) coordinates. The coordinates of the control point reflect the control point of the previous curve. If the previous command is not Quadratic Bézier CurveTo (Q, q, T, t), the coordinates of the control point will be the same as the start coordinates of the current curve. |
A, a | rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y |
Elliptical Arc
Draws an elliptical arc from the current coordinates to the given (x, y) coordinates. (rx, ry) are the radii of the ellipse. x-axis-rotation is the rotation degree of the ellipse relative to the x-axis. large-arc-flag indicates whether to draw the larger arc (1) or the smaller arc (0). sweep-flag indicates whether to draw the arc with clockwise direction (1) or counterclockwise direction (0). |
Z, z | ClosePath
Connect the last coordinate and the first coordinate of the current sub-path, and close the path with a line. |
|
Note
In uppercase commands (M, L, H, V, C, S, Q, T, A), coordinate parameters are given as absolute values, while in lowercase commands (m, l, h, v, c, s, q, t, a), coordinate parameters are given as relative values from the current coordinates. If there are subsequent parameters after a command and its parameters, they are treated as the repetition of the same command. (Excluding the MoveTo (M, m) command and the ClosePath (Z, z) command) |
References: