SVG 'path' element

The SVG <path> element is used for drawing of advanced shapes combined with lines and arcs. The <path> element has 2 attributes:

  • d attribute or path data specifies all drawings inside the <path> element be means of its commands.
    The d attribute contains the moveto, line, curve (both cubic and quadratic Beziers), arc and closepath instructions. The instructions are expressed with one character that can be omitted if the same command is used several times in a row. Uppercase character means absolute coordinates, lowercase means relative coordinates.
  • pathLength attribute provides the total length of the path.

The path data has the following commands:

Command Parameters Name Description
M/m x, y moveto Establishes a new current point at the given coordinates withought drawing. when it is not the first command, starts a new sub-path at the given (x,y) coordinate.
Z/z none closepath Ends the current subpath drawing automatically straight line from the current point to the initial point of the current subpath.
L/l x, y lineto Draws a line from the current point to the given (x,y) coordinate. A new point becomes the current point.
H/h x horizontal lineto Draws a horizontal line from the current point to the point that has the given x coordinate. The y coordinate remains the same.
V/v y vertical lineto Draws a vertical line from the current point to the point that has the given y coordinate. The x coordinate remains the same.
C/c x1, y1 x2, y2 x, y curveto Draws a cubic Bezier curve from the current point to (x,y) using (x1,y1) and (x2,y2) as the control points at the beginning and at the end of the curve. The (x,y) point becomes a new current point.
S/s x2, y2 x, y smooth/shorthand curveto (x2,y2) is the control point at the end of the curve that is drawn from the current point to (x,y).
Q/q x1, y1 x, y quadratic Bezier curveto Draws a quadratic Bezier curve from the current point to (x,y) using (x1,y1) as the control point. The (x,y) point becomes a new current point.
T/t x, y smooth/shorthand quadratic Bezier curveto Draws a quadratic Bezier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point or the current point could be the control one.
A/a rx, ry x-axis-rotation large-arc-flag sweep-flag x y elliptical arc Draws an elliptical arc from the current point to (x, y). rx and ry are two radii that define the size and orientation of the ellipse. An x-axis-rotation indicates how the ellipse is rotated relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically. large-arc-flag and sweep-flag help the automatic calculations and determine how the arc is drawn if arcs cross.

Here is an example that shows the usage of lineto, quadratic Bezier curveto and elliptical arc commands:

<path d="M10,40 A20 30 180 0 1 30 10 A20 30 0 0 1 30 70 A20 30 0 0 1 40 10 A20 30 0 0 1 40 70 A20 30 0 0 1 50 10 A20 30 0 0 1 70 40 L100 40 Q110 10 120 50" fill="none" stroke="#9d1d20" stroke-width="2"/>

Here is the resulting image:

For more examples see SVG examples page