Complex SVG Paths with path
The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.
Paths create complex shapes by combining multiple straight lines or curved lines. Complex shapes composed only of straight lines can alternatively be created as <polyline> or <polygon> elements.
The shape of a <path> element is defined by one parameter: d. The d attribute contains a series of commands and parameters used by those commands.
Each of the commands is instantiated by a specific letter. For instance, let's move to the x and y coordinates (10, 10). The Move to
command is called with the letter M. When the parser runs into this letter, it knows it needs to move to a point. So, to move to (10, 10) the command to use would be M 10 10. After that, the parser begins reading for the next command.
All of the commands also come in two variants. An uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates (e.g., m 7 10 means: move 10px up and 7px to the left from the last point).
Coordinates in the d parameter are always unitless and hence in the user coordinate system. Still, paths can be transformed to suit other needs.
Line Commands
There are five line commands for <path> nodes. The first command is the Move To
or M
, which was described above. It takes two parameters, a coordinate (x) and coordinate (y) to move to. If the cursor was already somewhere on the page, no line is drawn to connect the two positions. The Move To
command often appears at the beginning of paths (or subpaths) to specify where the drawing should start. For example:
M x y
or
m dx dy
There are three commands that draw lines. The most generic is the Line To
command, called with L. L takes two parameters—x and y coordinates—and draws a line from the current position to a new position.
...