Chapter 7. Paths
All of the basic shapes described in Chapter 4 are really shorthand forms for the more general
<path> element. You are well advised to use these shortcuts; they help make your SVG more readable and more structured. The
<path> element is more general; it draws the outline of any arbitrary shape by specifying a series of connected lines, arcs, and curves. This outline can be filled and drawn with a stroke, just as the basic shapes are. Additionally, these paths (as well as the shorthand basic shapes) may be used to define the outline of a clipping area or a transparency mask, as you will see in Chapter 10.
All of the data describing an outline is in the
d attribute (the
d stands for data). The path data consists of one-letter commands, such as
M for moveto or
L for lineto, followed by the coordinate information for that particular command.
moveto, lineto, and closepath
Every path must begin with a moveto command.
The command letter is a capital
M followed by an x- and y-coordinate, separated by commas or whitespace. This command sets the current location of the “pen” that’s drawing the outline.
This is followed by one or more lineto commands, denoted by a capital
L, also followed by x- and y- coordinates, and separated by commas or whitespace. Example 7-1 has three paths. The first draws a single line, the second draws a right angle, and the third draws two 30-degree angles. When you “pick up” the pen with another moveto, you are starting a new subpath. ...