SVG: Path Basics

SVG path element

• The path element is the most powerful and useful element.
• It effectively replace any other SVG shapes such as rect, line, polygon.
• Path element is also the most complex to understand.
• If you are scripting SVG with JavaScript, it's essential to understand the path element.

moveto, lineto

<svg width="100" height="100">
<path d="M 0 0 L 50 0 L 0 50 L 90 90"
style="stroke:black; fill:yellow; stroke-width:5" />
</svg>

M x y

Move the pen to x y.

L x y

Draw a line to x y.

Path's Default Stroke Style

🛑 WARNING: By default, path's stroke style is none. So, you will need to add style="stroke:red" or similar. 〔see SVG: Shape Styles〕

lowercase = relative coordinate

<svg width="100" height="100">
<path d="m 50 0
l  8 5
l -8 5
l  8 5
l -8 5
l  8 5
l -8 5
l  8 5
l -8 5"
style="stroke:black; fill:yellow" />
</svg>

Lowercase command names mean use relative coordinates (relative to current point). So, here, we use l to zigzag. Each time, the y coordinate increases by 5, while x goes 8 to the right and -8 to the left.

Lowercase and uppercase commands can be mixed.

<svg width="100" height="100">
<path d="M 0 0 L 50 50 l 20 -10 l 10 30 m -10 5 l -20 8"
style="stroke:black; fill:none;" />
</svg>

z = close path

<svg width="100" height="100">
<path d="m 10 10 l 0 20 l 30 30 z"
style="stroke:black; fill:yellow" />
</svg>

z

Close path. Draw a line to the beginning point.

Shortcut Notation for Horizontal Line, Vertical Line

Horizontal line has a shortcut notation.

<svg width="100" height="100">
<path d="M 10 10 h 10 v 10 h 10 v 10 h 10 v 10"
style="stroke:black; fill:yellow" />
</svg>

H x

Horizontal line to. The y coordinate is the same as current point's y coordinate.

h x

Horizontal line to, x units relative to current point.

V y

Vertical line to. The x coordinate is the same as current point's x coordinate.

v y

Vertical line to, y units relative to current point.

Shortcut Notations, Comma, Redundant Spaces

Redundant space between command letter or before negative number can be omitted. Example:

• M7 8L3 4 is the same as M 7 8 L 3 4.
• L3-4 is the same as L 3 -4.
• L can be followed by multiple pairs of numbers. L 3 4 5 6 is the same as L 3 4 L 5 6.
• Space and Comma are interchangeable. L 3 4 5 6 is the same as L 3 4, 5 6 or L 3,4,5,6.

Elliptical Arcs

SVG: Path. Elliptical Arc

Quadratic Bezier Curve

Quadratic bezier curve has just 1 control point.

<svg width="100" height="100">
<path d="M 0 0 Q 100 0 , 100 100"
style="stroke:black; fill:yellow" />
</svg>

Q a1 a2 x y

Draw quadratic bezier curve to {x, y}, with control point at {a1, a2}.

q

(relative coordinate).

<svg width="100" height="100">
<path d="M 0 0 Q 100 0 , 50 50 T 100 100"
style="stroke:black; fill:yellow" />
</svg>

T x y

Same as Q, except the control point is a reflection of previous Q's, and if none, use current point.

t

(relative coordinate).

Cubic Bezier Curve

Cubic bezier curve has 2 control points.

<svg width="100" height="100">
<path d="M 0 0 C 100 0, 0 100, 100 100"
 style="stroke:black; fill:yellow" />
</svg>

C a1 a2 b1 b2 x y

Draw cubic bezier curve to {x, y}, with control points {a1 a2} and {b1 b2}.

c

(relative coordinate).

S b1 b2 x y

Same as C, except that first control point is last C's ending control point reflected thru current point. If last command is not C, then use current point as first control point.

s

(relative coordinate).