SVG Paths: The Basics
The path element is the most powerful shape element in SVG. Virtually every shape, from simple polygons to complex icons and illustrations, can be expressed with a single path.
The d Attribute
The entire path is defined by a single attribute: d (short for "data"). Its value is a mini-language of single-letter commands followed by coordinate numbers.
Commands come in two forms:
- Uppercase commands use absolute coordinates (relative to the SVG canvas origin).
- Lowercase commands use relative coordinates (relative to the current drawing position).
Basic Commands
In this lesson we'll cover the fundamental path commands that draw straight lines:
| Command | Name | Parameters | Description |
|---|---|---|---|
M / m |
MoveTo | x y |
Moves the pen to a new position without drawing anything. Every path must start with an M. |
L / l |
LineTo | x y |
Draws a straight line from the current position to x,y. |
H / h |
Horizontal LineTo | x |
Draws a horizontal line to the given x-coordinate (y stays the same). |
V / v |
Vertical LineTo | y |
Draws a vertical line to the given y-coordinate (x stays the same). |
Z / z |
ClosePath | (none) | Draws a straight line back to the very first point of the path, closing the shape. |
Example: A House Shape
Here we use M, L, H, V, and Z commands to draw a simple house outline (or an upward pointing arrow, depending on how you look at it):
Let's walk through the d attribute step by step:
M 150 20- Move the pen to the tip of the roof (150, 20). No line is drawn yet.L 260 90- Draw a line to the bottom-right of the roof overhang.H 220- Draw a horizontal line left to the top of the right wall.V 140- Draw a vertical line down to the floor of the right wall.H 80- Draw a horizontal line left to the bottom of the left wall.V 90- Draw a vertical line up to the top of the left wall.H 40- Draw a horizontal line left to the roof overhang.Z- Close the path back to the starting tip of the roof.
It takes a little getting used to, but once you understand the coordinate system, paths become an incredibly efficient way to draw complex shapes. Next, we'll look at how to add curves.