Paths are the most flexible and consequently the most complicated of the SVG
elements. In fact, all of the element types from the previous lesson could be
made using paths.
Paths in SVG are made by inputting a sequence of data points together with commands that determine how the points will be connected.
| Command | Parameters | Name | Description | Example |
|---|---|---|---|---|
| M (m) | x,y (dx,dy) | moveto | Moves to new location without drawing. | |
| L (l) | x,y (dx,dy) | lineto | Draws a line from current location to new location. | |
| H (h) | x (dx) | horizontal lineto | Draws a horizontal line from current location to new location. | |
| V (v) | y (dy) | vertical lineto | Draws a vertical line from current location to new location. | |
| Q (q) | cx,cy x,y (cdx,cdy dx,dy) | quadratic Bezier curveto | Draws a quadratic Bezier curve from current location to x,y. cx,cy is the point controlling the bend of the curve. | |
| T (t) | x,y (dx,dy) | shorthand quadratic Bezier curveto | Draws a quadratic Bezier curve from current location to x,y. The last specified control point is used to control the bend of the curve. | |
| C (c) | cx1,cy1 cx2,cy2 x,y (cdx1,cdy1 cdx2,cdy2 dx,dy) | cubic Bezier curveto | Draws a cubic Bezier curve from current location to x,y. cx1,cy1 and cx2,cy2 are the points controlling the bend of the curve. | |
| S (s) | cx2,cy2 x,y (cdx2,cdy2 dx,dy) | shorthand cubic Bezier curveto | Draws a cubic Bezier curve from current location to x,y. cx2,cy2 is the 2nd point controlling the bend of the curve. The first control point is the 2nd control point from the previous command. | |
| A (a) | rx,ry x-axis-rotation large-arc-flag sweepflag x,y (rdx,rdy x-axis-rotation large-arc-flag sweepflag dx,dy) | elliptical arc | Draws an ellipital arc from the current position to x,y. |
A rx,ry x-axis-rotation large-arc-flag sweep-flag x,ylarge-arc-flag and sweep-flag
determine what kind of arc are drawn, and are defined by either a
0 or a 1.