.SVG File Format – Path data

Scalable Vector Graphics

The d attribute of a path element is a compact text language of drawing commands. The same syntax is used by animateMotion’s path attribute, by glyphs in SVG 1.1 fonts, and in CSS. Each command is one letter followed by numbers.

M10 80 C40 10 65 10 95 80 S150 150 180 80 L180 120 H10 Z
Move to (10, 80), a cubic curve, a smooth cubic curve, a line, a horizontal line, then close

Commands

An upper-case letter takes absolute coordinates; the lower-case letter takes coordinates relative to the current point at the start of that command.

CommandNameParametersDraws
M, mmoveto(x y)+Starts a new subpath at (x, y). Further pairs are treated as L (or l) commands.
Z, zclosepathnoneA straight line back to the start of the subpath, which may be of zero length, joined to the first segment. The current point becomes the start of the subpath.
L, llineto(x y)+A straight line to (x, y).
H, hhorizontal linetox+A horizontal line to x.
V, vvertical linetoy+A vertical line to y.
C, ccurveto(x1 y1 x2 y2 x y)+A cubic Bézier curve to (x, y), with control points (x1, y1) and (x2, y2).
S, ssmooth curveto(x2 y2 x y)+A cubic Bézier whose first control point is the reflection of the previous command’s second control point about the current point; the current point itself if the previous command was not C, c, S or s.
Q, qquadratic curveto(x1 y1 x y)+A quadratic Bézier curve to (x, y) with control point (x1, y1).
T, tsmooth quadratic curveto(x y)+A quadratic Bézier whose control point is the reflection of the previous control point; the current point if the previous command was not Q, q, T or t.
A, aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+An arc of an ellipse with radii rx and ry, rotated by x-axis-rotation degrees, to (x, y). Of the four possible arcs, large-arc-flag 1 picks one of more than 180 degrees, and sweep-flag 1 one drawn in the positive-angle (clockwise on screen) direction.

Grammar

  • Path data must begin with a moveto, after any white space.
  • Numbers are separated by white space, an optional single comma, or nothing when the next number’s sign or decimal point makes the break clear: M100-200 is (100, −200) and 0.6.5 is 0.6 then 0.5. Parsing is greedy.
  • A number may have a sign, a decimal point (only .) and an exponent (e or E with an optional sign). There are no thousands separators. SVG 2 drops a trailing decimal point such as 23. from the grammar, though readers may still accept it.
  • A command letter may be left out when the same command repeats: L 10 10 20 20 is two lines. After a moveto the repeated pairs are linetos.
  • The two arc flags are single digits 0 or 1, and need no separator: a25 25 0 1050 50 has flags 1 and 0 and ends at (50, 50).
  • An empty d, or none in SVG 2, disables rendering of the path.

Errors

A reader draws the path up to, but not including, the command with the first error, and reports the error where it can. If a command has an incomplete set of numbers, only its complete segments are drawn: M 10,10 L 20,20,30 draws a line to (20, 20) and stops.

Arcs out of range

Arc parameters are corrected rather than rejected, in this order:

  1. If the end point equals the current point, the arc is left out.
  2. If rx or ry is 0, a straight line is drawn to the end point.
  3. Negative radii are made positive.
  4. If the radii are too small to reach the end point, the ellipse is scaled up, keeping its proportions, until exactly one arc fits.

SVG 1.1’s implementation notes add that any non-zero flag value counts as 1.

Related attributes

AttributeValueMeaning
dpath data, or noneThe path. In SVG 2 it is also a presentation attribute for the d property, so CSS can set it; initial value none, not inherited. Two paths animate smoothly only when their commands match one for one.
pathLengthnumber, 0 or moreThe author’s value for the total length of the path. Distances along the path, such as dash lengths, text on a path and motion positions, are scaled by the real length divided by this. Negative is an error.

Changes in SVG 2

  • A trailing decimal point is no longer allowed.
  • The join at a closepath is spelled out: a Z segment is joined to the first segment with stroke-linejoin, while a line drawn back to the start by hand is capped with stroke-linecap.
  • The arc rules were rewritten to be easier to follow.
  • d became a presentation attribute and a CSS property.