A path can be used to describe the same figures as line, polyline, polygon circle and rect elements. The syntax is a little more complex than those elements, but is also more general. The significant attribute in the path element called 'd'. The 'd' attribute is assigned a string of text which describes the path to be created. The instructions are reminiscent of the logo programming language or any number of other vector drawing instructions. The instructions are variations on move (without drawing), draw line, draw curve and draw arc. Each command is one letter followed by parameters. Whitespace is optional except between numeric parameters. First I'll give a simple example, then I'll explain how to write a string for the 'd' attribute.

Where to begin - moveto and lineto

moveto

The moveto command is given by the single letter 'M' or 'm'. The uppercase 'M' takes absolute coordinates (for the current coordinate system) and the lowercase takes relative coordinates. Relative in this case means relative to the position that the last command finished drawing (also called the "current point"). The uppercase/lowercase distinction also applies to all the other drawing commands for the path element.

The moveto command is given at the start of the path description. No line is drawn when 'M' is processed. It can also be given later on while drawing for discontinuous lines.

lineto

Straight lines are drawn with "L", the lineto command. A straight line from the current location can be drawn with the lowercase equivalent "l". "L" is followed by a point, as in "L 200 400". Horizontal and vertical lines can be drawn with "H" and "V" followed by an x or y coordinate.