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.
...
Curve Commands
There are three different commands that can be used to create smooth curves. Two of those curves are Bézier curves, and the third is an arc
or part of a circle. There are an infinite number of Bézier curves, but only two are available in <path> elements: a cubic one, called with C, and a quadratic one, called with Q.
Both Bézier curves (quadratic and cubic) produce similar results, although the cubic one allows greater freedom in exactly what the curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry the line has.
Cubic Bézier Curves with C/c and S/s
The cubic curve, C, is the slightly more complex curve. Cubic Béziers take in two control points for each point. Therefore, to create a cubic Bézier, three sets of coordinates need to be specified.
C x1 y1, x2 y2, x y
or
c dx1 dy1, dx2 dy2, dx dy
The last set of coordinates here (x, y) specify where the line should end. The other two are control points. (x1, y1) is the control point for the start of the curve, and (x2, y2) is the control point for the end. The control points essentially describe the slope of the line starting at each point. The Bézier function then creates a smooth curve that transfers from the slope established at the beginning of the line, to the slope at the other end.
Something to note here is that the Bezier curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.
Several Bézier curves can be strung together to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, a shortcut version of the cubic Bézier can be used, designated by the command S (or s).
S x2 y2, x y
(or)
s dx2 dy2, dx dy
S produces the same type of curve as earlier—but if it follows another S command or a C command, the first control point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then the current position of the cursor is used as the first control point. The result is not the same as what the Q command would have produced with the same parameters, but is similar.
Quadratic Bézier Curves with Q/q and T/t
The other type of Bézier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two parameters: the control point and the end point of the curve.
Q x1 y1, x y
(or)
q dx1 dy1, dx dy
As with the cubic Bézier curve, there is a shortcut for stringing together multiple quadratic Béziers, called with T.
T x y
(or)
t dx dy
This shortcut looks at the previous control point used and infers a new one from it. This means that after the first control point, fairly complex shapes can be made by specifying only end points.
This only works if the previous command was a Q or a T command. If not, then the control point is assumed to be the same as the previous point, and only lines will be drawn.