This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

path

Summary

The path element is the generic element to define a shape.

Overview Table

DOM Interface
SVGElement

Examples

In the following code example, the path element is used to create a red curved path.



<svg width="400" height="400">
  <path d="M 50,100 Q 150,50 250,100" stroke="red" stroke-width="10" fill="white"/>
</svg>

Notes

Remarks

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

Path data can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line-length limitations with certain related tools, it is recommended to split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are allowed only at certain places within path data.

The syntax of path data is concise in order to allow for minimal file size and efficient downloads, because many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:

  • All instructions are expressed as one character (for example, a moveto is expressed as an M).

  • Superfluous white space and separators such as commas can be eliminated (for example, “M 100 100 L 200 200” contains unnecessary spaces and could be expressed more compactly as “M100 100L200 200”).

  • The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (for example, you can drop the second L in “M 100 200 L 200 100 L -100 -200” and use “M 100 200 L 200 100 -100 -200” instead).

  • Relative versions of all commands are available (uppercase means absolute coordinates, lowercase means relative coordinates).

  • Alternate forms of lineto are available to optimize the special cases of horizontal and vertical lines (absolute and relative).

  • Alternate forms of curve are available to optimize the special cases where some of the control points on the current segment can be determined automatically from the control points on the previous segment.

The path-data syntax is a prefix notation (that is, commands followed by parameters). The only allowable decimal point is a Unicode U+0046 FULL STOP (“.”) character (also referred to in Unicode as PERIOD, dot, and decimal point) and no other delimiter characters are allowed. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)

For the relative versions of the commands, all coordinate values are relative to the current point at the start of the command. For example, the absolute version of moveto is M whereas its relative form is indicated with a lowercase m. Absolute versus relative path commands are discussed in the following table.

Note: In the Path Command Table below, the following notation is used.

{

Standards information

Members

The SVGPathElement object has these events:

  • onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGPathElement object has these methods:

The SVGPathElement object has these properties:

the d attribute.

  • animatedPathSegList: Gets or sets the animated contents of the d attribute in a form that matches the SVG syntax.
  • className: Gets the names of the classes that are assigned to this object.
  • clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
  • externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
  • farthestViewportElement: Gets a value that represents the farthest ancestor svg element.
  • fill: Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.
  • fillOpacity: Sets or retrieves a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
  • fillRule: Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
  • focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
  • marker: Sets or retrieves a value that specifies the marker symbol that is used for all vertices on the given path element or basic shape.
  • markerEnd: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the final vertex of a given path element or basic shape.
  • markerMid: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at every other vertex (that is, every vertex except the first and last) of a given path element or basic shape.
  • markerStart: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the first vertex of a given path element or basic shape.
  • mask: Sets or retrieves a value that indicates a SVG mask.
  • nearestViewportElement: Gets a value that indicates which element established the current viewport.
  • normalizedPathSegList: Gets or sets the normalized static contents of the d attribute.
  • ownerSVGElement: Gets the nearest ancestor svg element.

Related specifications

SVG 1.1
W3C Recommendation

Attributions