FatBlog

SVG Path Commands


SVG paths are the most flexible way to draw shapes in SVG. A path consists of one or more commands stored in the d attribute. Each command moves the current point, draws straight lines, curves, or arcs, and together they define the final shape.

Almost every SVG shape (<rect>, <circle>, <ellipse>, <line>, <polyline>, and <polygon>) can be represented as a path, making paths the most general drawing primitive in SVG.

A single path may contain multiple subpaths. Each M (Move To) command starts a new subpath, which may be left open or closed using the Z command.

Every drawing command updates the current point (sometimes called the pen position). Relative commands (l, h, v, c, q, etc.) interpret their coordinates relative to the current point.

As a general rule, uppercase commands use absolute coordinates, while lowercase commands use coordinates relative to the current point.

Separators: Coordinate values may be separated by either commas or spaces. For example:

  • M 10,20
  • M 10 20

Both are equivalent.

Repeating Commands: Most commands accept multiple parameter sets. After the first command letter, additional parameter sets are interpreted as repeated uses of the same command. For example:

1
L 10,20 L 30,40

can be shortened to:

1
L 10,20 30,40

Move (M/m)

CommandNameParametersFunction
M / mMove Tox, yMoves the current point to a new position without drawing a line. If used after drawing commands, it starts a new subpath.

The first M command begins a new path. Any subsequent M commands begin new subpaths.

If additional coordinate pairs immediately follow an M or m command, they are treated as implicit L or l commands.

For example:

1
M 10,10 50,50 90,10

is equivalent to:

1
2
3
M 10,10
L 50,50
L 90,10

Line (L/l)

CommandNameParametersFunction
L / lLine Tox, yDraws a straight line to the target point.
1
<path d="M 0,0 L 100,100" />

Horizontal Line To (H/h)

CommandNameParametersFunction
H / hHorizontalxDraws a horizontal line (Y coordinate remains unchanged).
1
<path d="M 0,0 H 100" />

Vertical Line To (V/v)

CommandNameParametersFunction
V / vVerticalyDraws a vertical line (X coordinate remains unchanged).
1
<path d="M 0,0 V 100" />

Close Path (Z/z)

CommandNameParametersFunction
Z / zClosePathNoneDraws a straight line back to the starting point of the most recent M/m command, closing the shape.
1
<path d="M 0,0 H 100 V 100 Z" />

Cubic Bézier Curve

A cubic Bézier curve is defined by two control points. The curve begins at the current point and ends at (x, y). The control points determine the curve's direction and shape but generally do not lie on the curve itself.

CommandNameParametersFunction
C / cCubic Bézierx1,y1 x2,y2 x,yDraws a curve to x,y using the first control point (x1,y1) and the second control point (x2,y2).
S / sSmooth Cubicx2,y2 x,yContinues the previous cubic Bézier curve smoothly. The first control point is automatically reflected from the previous C or S command.
1
<path d="M 0,0 C 0,100 100,0 100,100" />


1
2
3
<path d="M 0,0 C 0,100 100,0 100,100 S 50,150 0,150" />
<!-- Equals -->
<path d="M 0,0 C 0,100 100,0 100,100 C 100,200 50,150 0,150" />

Quadratic Bézier Curve

A quadratic Bézier curve uses one control point. Like cubic Bézier curves, the control point influences the shape of the curve but generally does not lie on the curve itself.

CommandNameParametersFunction
Q / qQuadratic Bézierx1,y1 x,yDraws a curve to x,y using a single control point (x1,y1).
T / tSmooth Quadraticx,yContinues the previous quadratic Bézier curve smoothly. The control point is automatically generated as the reflection of the previous one.
1
2
3
<path d="M 0,0 Q 0,100 100,100" />
<!-- Equals (see coversion formula) -->
<path d="M 0,0 C 0,66.6667 33.3333,100 100,100 " />


1
2
3
<path d="M 0,0 Q 0,100 100,100 T 150,0" />
<!-- Equals -->
<path d="M 0,0 Q 0,100 100,100 Q 200,100 150,0" />

Convert quadratic Bézier into cubic Bézier

A quadratic Bézier (Q) can be converted exactly into a cubic Bézier (C). There is no approximation involved.

A quadratic Bézier

\[ (P_0,P_1,P_2) \]

becomes a cubic Bézier

\[ (P_0,C_1,C_2,P_2) \]

where

\[ C_1 = P_0 + \frac{2}{3}(P_1-P_0) \]
\[ C_2 = P_2 + \frac{2}{3}(P_1-P_2) \]

or equivalently

\[ C_2 = P_2 - \frac{2}{3}(P_2-P_1) \]

Example

The path is:

1
2
M 0,0
Q 0,100 100,100

where:

  • P₀ = (0, 0) (start)
  • P₁ = (0, 100) (quadratic control)
  • P₂ = (100, 100) (end)
Step 1: Compute C₁
\[ P_0=(0,0) \]
\[ P_1=(0,100) \]

Difference:

\[ P_1-P_0=(0,100) \]

Multiply by 2/3:

\[ (0,\frac{200}{3})=(0,66.6667) \]

Add to P₀:

\[ C_1=(0,66.6667) \]
Step 2: Compute C₂
\[ P_2=(100,100) \]
\[ P_1-P_2=(-100,0) \]

Multiply by 2/3:

\[ (-66.6667,0) \]

Add to P₂:

\[ (33.3333,100) \]

So

\[ C_2=(33.3333,100) \]
Final cubic
1
2
M 0,0
C 0,66.6667 33.3333,100 100,100

Why does this work?

A quadratic Bézier is

\[ B_q(t) =(1-t)^2P_0 +2(1-t)tP_1 +t^2P_2 \]

A cubic Bézier is

\[ B_c(t) =(1-t)^3P_0 +3(1-t)^2tC_1 +3(1-t)t^2C_2 +t^3P_2 \]

To represent the same curve, the cubic must:

  • start at the same point,
  • end at the same point,
  • have the same tangent at the start,
  • have the same tangent at the end.

The endpoint derivatives are:

Quadratic:

\[ B_q'(0)=2(P_1-P_0) \]
\[ B_q'(1)=2(P_2-P_1) \]

Cubic:

\[ B_c'(0)=3(C_1-P_0) \]
\[ B_c'(1)=3(P_2-C_2) \]

Equating the derivatives gives:

\[ 3(C_1-P_0)=2(P_1-P_0) \]

which simplifies to

\[ C_1=P_0+\frac23(P_1-P_0) \]

Similarly,

\[ 3(P_2-C_2)=2(P_2-P_1) \]

which simplifies to

\[ C_2=P_2+\frac23(P_1-P_2). \]

These formulas ensure the cubic has the same position and tangent at both ends, and because a quadratic Bézier is a special case of a cubic Bézier, the resulting cubic traces exactly the same curve.

Elliptical Arc

The A command draws a portion of an ellipse between the current point and the destination point.

Given the start point, end point, radii, and rotation, there are generally four possible arcs connecting the two points. The large-arc-flag selects the larger or smaller arc, while the sweep-flag selects the drawing direction.

CommandNameParametersFunction
A / aArcrx,ry x-axis-rotation large-arc-flag,sweep-flag x,yDraws an elliptical arc to x,y using the horizontal radius (rx) and vertical radius (ry).

Arc Parameters

  • rx, ry – Horizontal and vertical radii of the ellipse.
  • x-axis-rotation – Rotation of the ellipse's x-axis, measured in degrees.

  • large-arc-flag

  • 0 = Draw the smaller arc (< 180°)

  • 1 = Draw the larger arc (> 180°)

  • sweep-flag

  • 0 = Draw the arc in the negative-angle (reverse) direction.

  • 1 = Draw the arc in the positive-angle (forward) direction.
1
<path d="M 0,0 A 80,50 50 1 0 180,100" />