W3docs
en
Log in

SVG Path

Learn the SVG <path> element and its d attribute commands: moveto, lineto, cubic and quadratic curves, arcs, and closepath, with examples.

The SVG <path> element is the most powerful and flexible shape in SVG. Almost every other SVG shape — lines, polygons and curves — can be reproduced with a <path>. This page explains the one attribute that does all the work, the d attribute, and walks through every drawing command it supports with their parameters and runnable examples.

Description of the <path> element

The SVG <path> element specifies a path: a series of drawing commands that move an imaginary "pen" around the canvas to draw lines, curves and arcs.

Paths are used to create complex shapes by combining several straight or curved segments. Complex shapes made of only straight lines can also be created as polylines, but unlike a polyline, a path can draw true curves, so it does not need many tiny line segments to simulate a curve.

In SVG the coordinate system starts at the top-left corner: x grows to the right and y grows downward. Keep this in mind — a larger y value is lower on the screen, not higher.

The shape of a path is defined entirely by the d ("data") attribute. The value of d is a string made of single-letter commands, each followed by the numbers (parameters) that command needs.

Commands of the d attribute

Every command is a single letter followed by its parameters. The available commands are:

CommandNameParameters
M / mmovetox y
L / llinetox y
H / hhorizontal linetox
V / vvertical linetoy
C / ccubic Bézier curvetox1 y1 x2 y2 x y
S / ssmooth cubic Bézier curvetox2 y2 x y
Q / qquadratic Bézier curvetox1 y1 x y
T / tsmooth quadratic Bézier curvetox y
A / aelliptical arcrx ry x-axis-rotation large-arc-flag sweep-flag x y
Z / zclosepath(none)

Absolute vs. relative commands

Each command comes in two forms. Uppercase letters use absolute coordinates — every x y is measured from the SVG's top-left origin (0, 0). Lowercase letters use relative coordinates — every value is an offset from the current pen position (where the previous command finished).

The two paths below draw the same triangle. The first uses absolute commands, the second uses relative ones:

<!-- Absolute: every point measured from (0,0) -->
<path d="M 100 50 L 200 50 L 150 150 Z" fill="orange" />

<!-- Relative: every point is an offset from the previous point -->
<path d="M 100 50 l 100 0 l -50 100 Z" fill="orange" />

Reading the relative version: start at (100, 50), then move +100, 0 (to 200, 50), then move -50, +100 (to 150, 150), then z closes back to the start. Relative commands are handy when you want to translate a whole shape — change only the first M and the rest follows.

MoveTo, lines and close (M, L, H, V, Z)

  • M x y lifts the pen and moves it to (x, y) without drawing. Every path must begin with a moveto.
  • L x y draws a straight line from the current point to (x, y).
  • H x draws a horizontal line to the x-coordinate x (y stays the same). A shorthand for a horizontal L.
  • V y draws a vertical line to the y-coordinate y (x stays the same).
  • Z closes the path by drawing a straight line back to the most recent M point.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" fill="lightblue" stroke="navy" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>
Try it Yourself »

The fill attribute paints the inside of the shape, while stroke paints the outline. For more outline options (width, dashes, line caps) see SVG Stroking.

Cubic Bézier curves (C and S)

A cubic Bézier curve bends a segment using two control points. C x1 y1 x2 y2 x y draws a curve from the current point to (x, y); (x1, y1) is the control point for the start and (x2, y2) is the control point for the end. The curve is "pulled" toward each control point.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 C20 20, 280 20, 280 150"
            fill="none" stroke="purple" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Here the pen starts at (20, 150), and the two control points (20, 20) and (280, 20) pull the curve upward into a smooth arch ending at (280, 150). Using fill="none" keeps it an open curve instead of filling the area underneath.

The smooth variant S x2 y2 x y continues a previous C (or S) curve seamlessly: it has only one control point because the first one is automatically mirrored from the previous command's end control point. This makes it easy to chain curves into a continuous wave.

Quadratic Bézier curves (Q and T)

A quadratic Bézier curve is simpler — it uses just one control point. Q x1 y1 x y draws a curve from the current point to (x, y), bent toward the single control point (x1, y1).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 Q150 20 280 150"
            fill="none" stroke="green" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

The single control point (150, 20) sits above the midpoint and pulls the line into a symmetric hump. The smooth variant T x y continues a previous Q/T curve by reflecting its control point automatically, so you only supply the new end point.

Elliptical arcs (A)

The arc command draws a section of an ellipse. It takes seven parameters:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  • rx, ry — the horizontal and vertical radii of the ellipse.
  • x-axis-rotation — rotation of the ellipse, in degrees.
  • large-arc-flag — 0 for the smaller arc, 1 for the larger arc between the two points.
  • sweep-flag — 0 to sweep counter-clockwise (negative angle), 1 to sweep clockwise (positive angle).
  • x, y — the end point of the arc.

Because two points on an ellipse can be joined by four possible arcs, the two flags choose which one is drawn.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="200">
      <!-- Same start and end point, different flag combinations -->
      <path d="M60 150 A60 60 0 0 1 180 150"
            fill="none" stroke="crimson" stroke-width="3" />
      <path d="M60 150 A60 60 0 1 0 180 150"
            fill="none" stroke="teal" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Both arcs share the same radii (60 60) and the same start (60, 150) and end (180, 150). The crimson path uses large-arc-flag 0, sweep-flag 1 to draw the short arc above the line; the teal path uses large-arc-flag 1, sweep-flag 0 to draw the large arc the other way around. Changing the flags is the easiest way to understand how A behaves.

Tips

  • A path always starts with a moveto. Without an opening M/m, the path renders nothing.
  • Numbers can be separated by spaces or commas — L 100 50 and L100,50 are equivalent.
  • Repeated identical commands can be implied: M10 10 L20 20 L30 30 may be written M10 10 L20 20 30 30.
  • Hand-writing complex paths is error-prone; a vector editor that exports SVG is usually the better workflow, but understanding the commands lets you read and fix the output.
  • SVG Reference — a quick list of all SVG elements and attributes.
  • SVG Stroking — control the width, color and dashing of outlines.
  • SVG Line — draw a single straight line element.
  • SVG Polygon — draw closed shapes from a list of points.

Practice

Practice
Which of the following are valid commands of the 'd' attribute of an SVG path?
Which of the following are valid commands of the 'd' attribute of an SVG path?
Was this page helpful?