About Path

A path is a basic graphical object. It is represented in SVG by the <path> element.

This path represents the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three. It is described by a set of points.

A path can define a shape that is open (like a line) or closed (like a polygon) and be made out of straight lines, curved lines and segments.

Each path segment consists of a sequence of commands where 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.

Basic path commands are: moveTo (M), lineTo (L), horizontalLineTo (H), verticalLineTo (V) and closePath (Z). Curve line commands are : cubic bezier curve (C,S), quadratic bezier curve (Q,T), and elliptical arc (A).

A basic form of a path looks like:
<path d=”M 0 0 L 100 100”>

• The d attribute defines the path. 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.

The path data obeys to the following rules :

• All the drawing commands can be abbreviated on a single character
• Spaces can be suppressed
• Negative coordinates have no separation from the previous coordinate
• Numbers starting with a decimal point need no white space if it is unambiguous
• The repetition a drawing command can be omitted
• For example: <path d="M0,0L.5.5.8.2Z"> is equivalent to <path d="M 0, 0 L 0.5, 0.5 L 0.8, 0.2 Z">
• There are always two versions of the same drawing command :
  • in upper case : absolute coordinates (with respect to the overall coordinate system)
  • in lower case : relative coordinates

These rules tend to minimize the size required for path description and to achieve transmission efficiency.