SVG Path

SVG Element

The SVG Element

The <path> element is the most powerful and versatile shape element in SVG. It can be used to draw straight lines, curves, arcs, and more complex shapes by defining a sequence of drawing commands.

The shape of a <path> element is defined by its d attribute, which contains a series of path data commands:

M (moveto): M x y or m dx dy - Starts a new sub-path at the given (x,y) coordinate. Think of it as lifting the pen and moving to a new spot.
L (lineto): L x y or l dx dy - Draws a straight line from the current point to the new (x,y) coordinate.
H (horizontal lineto): H x or h dx - Draws a horizontal line from the current point to the x-coordinate.
V (vertical lineto): V y or v dy - Draws a vertical line from the current point to the y-coordinate.
C (curveto): C x1 y1, x2 y2, x y or c dx1 dy1, dx2 dy2, dx dy - Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve.
S (smooth curveto): S x2 y2, x y or s dx2 dy2, dx dy - Draws a smooth cubic Bézier curve. It assumes the first control point is a reflection of the last control point of the previous ‘C’ or ‘S’ command.
Q (quadratic Bézier curve): Q x1 y1, x y or q dx1 dy1, dx dy - Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point.
T (smooth quadratic Bézier curveto): T x y or t dx dy - Draws a smooth quadratic Bézier curve. It assumes the control point is a reflection of the control point of the previous ‘Q’ or ‘T’ command.
A (elliptical Arc): A rx ry x-axis-rotation large-arc-flag sweep-flag x y or a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy - Draws an elliptical arc.
Z (closepath): Z or z - Closes the current sub-path by drawing a straight line from the current point to the starting point of the current sub-path.

Note: Uppercase commands (e.g., M, L) use absolute coordinates, while lowercase commands (e.g., m, l) use relative coordinates (relative to the current point).

Example 1: Drawing a Triangle

This example defines a path that starts at position (150,0), draws a line to (75,200), then from there, a line to (225,200), and finally closes the path by drawing a line back to the starting point (150,0), forming a triangle.

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Path Triangle</title>
</head>
<body>
  <svg width="300" height="210">
    <path d="M150 0 L75 200 L225 200 Z" fill="orange" stroke="black" stroke-width="2" />
  </svg>
</body>
</html>

Example 2: Quadratic Bézier Curve

Bézier curves are used to model smooth, scalable curves. A quadratic Bézier curve is defined by a start point, an end point, and a single control point that determines the curve’s shape.

The following example creates a quadratic Bézier curve where A (100,350) and C (400,350) are the start and end points, and B (250,50) is the control point. Helper lines and points are included for visualization.

A B C

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Quadratic Bézier Curve</title>
</head>
<body>
  <svg width="450" height="400">
    <!-- Helper lines for visualization -->
    <path d="M100 350 L250 50" stroke="lightgray" stroke-width="2" stroke-dasharray="5,5" />
    <path d="M250 50 L400 350" stroke="lightgray" stroke-width="2" stroke-dasharray="5,5" />

    <!-- The Quadratic Bézier Curve -->
    <path d="M100 350 Q250 50 400 350" stroke="blue" stroke-width="5" fill="none" />

    <!-- Mark relevant points -->
    <g fill="black" stroke="black" stroke-width="2">
      <circle cx="100" cy="350" r="4" fill="red" />
      <circle cx="250" cy="50"  r="4" fill="green" />
      <circle cx="400" cy="350" r="4" fill="red" />
    </g>

    <!-- Label the points -->
    <g font-family="sans-serif" font-size="20" fill="black" text-anchor="middle">
      <text x="100" y="375">A (Start)</text>
      <text x="250" y="40">B (Control)</text>
      <text x="400" y="375">C (End)</text>
    </g>
  </svg>
</body>
</html>

Understanding path data, especially for complex curves, can be challenging. While it’s beneficial to understand the basics, for intricate graphics, designers and developers often use vector graphics editors (like Inkscape, Adobe Illustrator, or Figma) that can export SVG code. These tools provide a visual interface for drawing and then generate the corresponding <path> data.

Further Learning: For a deep dive into path commands, refer to the MDN Web Docs on SVG Paths.