SVG is designed as a transmission format for schematic diagrams in the widest sense. Thus it should be applicable to simple graphs and flow diagrams but also be efficient for CAD diagrams, maps, etc. This means that the main drawing element must be efficient in quite a wide set of areas. Attention needs to be paid to efficient transmission of complex paths.
The path element defines a shape that can be open or closed. A path consists of a sequence of subpaths and in many cases there is just a single subpath in which case the path and subpath segments are synonymous. Each subpath consists of a sequence of commands where normally the first defines a new current position and the remainder define a line or curve from the current position to some new position which becomes the current position for the next part of the curve and so on. The form of the path element is as follows:
<path d="M 0 0 L 100 100" />
The d attribute defines the path. In the example above it defines a path that consists of establishing a current position at the origin (Move to 0,0) and the path goes from there to the point (100,100) as a straight Line. This would be the new current position if there were subsequent commands in the sequence. The following path is a triangle:
<path d="M 0 0 L 100 0 L50 100 Z" />
Here the first line is horizontal from the origin to the point (100,0) and then a straight line goes to the point (50,100). The command Z closes the path with a straight line from (50,100) back to (0,0), the starting position for the path segment.
A path with two path segments would have the form:
<path d="M 0 0 L 100 0 L50 100 Z M300,300 L400,300 L350,400 Z" />
White space has been used to separate the coordinates in the first subpath. Commas can also be used as is shown in the second subpath. For transmission efficiency, surplus separation can be removed. Some of the condensing rules are:
- The coordinate follows the command letter with no intervening space
- Negative coordinates need no separation from the previous coordinate
- Numbers starting with a decimal point need no white space if it is unambiguous
- If the next command is the same as the previous one, the command letter can be omitted
- The first command after a Move is assumed to be a Line if just coordinates appear
For example:
<path d="M0,0L.5.5.8.2Z" />
This is equivalent to:
<path d="M 0, 0 L 0.5, 0.5 L 0.8, 0.2 Z" />
The basic line commands are:
| Command | Meaning | Parameters |
|---|---|---|
| M | Establish origin at point specified | Two parameters giving absolute (x,y) current position |
| L | Straight line path from current position to point specified | Two parameters giving absolute (x,y) position of the line end point which becomes the current position. |
| H | Horizontal line path from current position to point specified | Single parameter giving absolute X-coordinate of the line end point. The Y-coordinate is the same as that of the previous current position. The new point becomes the current position. |
| V | Vertical line path from current position to point specified | Single parameter giving absolute Y-coordinate of the line end point. The X-coordinate is the same as that of the previous current position. The new point becomes the current position. |
| Z | Straight line back to original Move origin | No parameters. |
If the path being specified consists of many short paths, it may well be more efficient to define the path as relative positions from the previous current position. If the command uses a lower case letter, this indicates that the coordinates defined for this command are relative to the previous current position.