d

d

This attribute defines a path to follow.

Usage context

The d attribute is a string containing a series of path descriptions. These paths are combinations of the following instructions:

• Moveto
• Lineto
• Curveto
• Arcto
• ClosePath

These instructions are combined in a single string. Commands are case-sensitive; an upper-case command specifies its arguments as absolute positions, while a lower-case command specified points relative to the current position. It is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise, absolute x and y positions will be taken as negative coordinates, negative relative x values will move to the left, and negative relative y values will move upwards.

Moveto

Moveto instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else. There is no line drawn between the previous point and the specified point. It is good practice to open all paths with a Moveto command, because without an initial Moveto, commands will be executed with the starting point, wherever this was previously, possibly resulting in undefined behaviour.

Syntax:

• M x,y where x and y are absolute coordinates, horizontal and vertical respectively
• m dx,dy where dx and dy are distances relative to the current position, to the right and down respectively

Examples:

• Absolute positioning at x=50, y= 100: <path d="M50,100..." />
• Move 50 right, 100 down : <path d="m50,100..." />

Lineto

Unlike Moveto instructions, Lineto instructions will draw a straight line. This line moves from the current position, to the specified location. The syntax for a generic Lineto command is "L x,y" or "l dx, dy", where x and y are absolute coordinates, and dx and dy are distances, to the right and down respectively. There are also the instructions H and V, which specify Horizontal and Vertical movements. Their syntax is exactly the same as L, and their lower-case versions h and v specify relative coordinates, as seen with a lower-case l.

Curveto

Curveto commands specify a Bezier curve. There are two types of Bezier curves: Cubic and Quadratic. Quadratic Bezier curves are a special case of the Cubic bezier curve, in that the control point for each end is the same. The syntax for a Quadratic Bezier curve is "Q cx,cy x,y" or "q dcx,dcy, dx, dy". cx and cy are the absolute coordinates of the control point, dcx and dcy are the distance in the x and y directions of the control point, respectively. x and y are the absolute coordinates of the end point, and dx and dy are the distances in the x and y directions of the end point, respectively.

Elements

The following elements can use the d attribute:

• <path>
• <glyph>

In additon, the same rules here apply to <animate> animation paths.

Notes

The point of origin (the coordinate 0,0) is usually the upper left corner of the context. However the <glyph> element has its origin in the bottom left corner of its letterbox.

A single comma is used to separate two consecutive numbers. Commas are not allowed elsewhere.

Simple SVG path example

HTML Content

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="150px"> 
    <path fill="#F7931E" stroke="#000" d="M37,17v15H14V17z M50,0H0v50h50z"/> 
</svg>

Result

To illustrate what d="M37,17v15H14V17H37z M50,0H0v50h50z" really means, let's discuss each section of the string:

• d=" M37,17 || v15 || H14 || V17 || z // M50,0 || H0 || v50 || h50 || z"
• d=
  • This attribute contains the string that makes up the entire svg.
• M37,17
  • M is short for MoveTo. Capital 'M' means absolute and 'm' means relative. The path starts at the top right coordinate in the rectangle, inside the square.
  • 37 sets the path's start position 37px right of the origin, on the x-axis
  • 17 sets the path's start position 17px down from the origin, on the y-axis
• v15
  • v stands for vertical line. Capital V uses an absolute y-axis coordinate, and lower-case v uses relative distance.
  • This instruction draws a vertical line 15px long from the current position. That means you're drawing a line 15px down to coordinates (37,32).
• H14
  • H stands for horizontal, and uses an absolute coordinate, because it is capitalized.
  • Starting at the end of v15, it draws a horizontal line to the absolute x-axis coordinate 14. This puts you at coordinates (14,32).
• V17
  • Start from the last line drawn, and draw a vertical line to y-axis coordinate 17. This puts you at coordinates (14,17).
• z
  • Lower-case z and capital Z both close a path, drawing a straight line to the start of the path, and joining its two ends together.
• space
  • The space separates the next path, which will make the outer square.
• M50,0
  • Start at position (50,0).
• H0
  • Draw a horizontal line to (0,0)
• v50
  • Draw a vertical line 50px long from (0,0). This draws a line down to (0,50).
• h50
  • Draw a horizontal line 50px long from (0,50). This draws a line right to (50,50).
• z
  • Lower-case z and capital Z both close a path, drawing a straight line to the start of the path, and joining its two ends together.

Remember that SVG pixels are not necessarily the same as screen or document pixels. In the example above, the 50px SVG box is displayed at 150px wide, so each SVG pixel is three document pixels long and high.