Tuesday, 1st May 2012
While SVG shapes are good for simple images, any image for complex curves will require a path element. A path element has a d atrribute which contains a sequence of drawing commands. These commands have single letter codes and may be followed by numerical parameters. Uppercase commands, indicate parameters are absolute values, lowercase commands indicate that parameters of relative values. The commands are:
- M/m (move to)
- L/l (line to)
- H/h (horizontal line to)
- V/v (vertical line to)
- Q/q (quadratic curve to)
- T/s (smooth quadratic curve to)
- C/c (cubic curve to)
- S/s (smooth cubic curve to)
- A/a (elliptical arc to)
There is also the Z/z command, which closes the path, i.e. draws a straight line from the current coordinate to the initial coordination. It doesn't matter make any difference if you use an uppercase or lowercase Z.
Straight lines (L, H, V)
Nearly all paths will start with a M x,y since you will generally want to move to a new starting position. The example below shows how to draw two continuous straight lines by first moving to a point, then using L or l to move to two more points. Both M and L are followed by two digits which define the coordinates. For uppercase commands, this moves the virtual pen to that coordinate, for lowercase commands this moves the virtual pen by those values.
Below is an example of a simple path element and three different ways to create it. Drag any of the nodes to change the code.
Note that you can can use spaces or commas between coordinates and there is no need for spaces between commands or between a command and it parameters. You can even do weird things like M0.5.5 which will move the pen to coordinate (0.5, 0.5). As with several other commands, once you have used the L command once, any subsequent pairs of coordinates will be considered part of additional line to commands (as in the final point of the compact example). In general, I think it's safer to explicitly define each command and to use spaces and commas liberally.
The H command is followed by a single value (actually it can be followed by mutliple values, but it is pointless to do so) and will draw a line horizontally such that the pen now has an x-coordinate of that value. The h command moves the pen horizontally by the given value. The y-coordinate of the pen stays the same; the V/v commands more the pen in a similar way vertically. Although these commands require slightly less code that the L/l commands, I have never bothered to use them nor seen anyone else use them.
Quadratic curves (Q, T)
Quadratic Bézier curves have the form Q x1,y1 x2, y2. They start at the current point and curves to (x2, y2), using (x1, y1) as a control point.
The T command can only follow a Q command and it tell the pen create a quadratic curve to a new coordinate using a control point that is symmetrical to the previous one. It's easier to explain with a diagram and in general I don't see any need to use the T command.
Cubic Bézier curves are similar to quadratic Bézier curves, but the start and end coordinates have separate control points. The cubic curve has the form C x1,y1 x2, y2 x3,y3. It starts at the current point and curves to (x3, y3), using (x1, y1) and (x2, y2) as a control points.