A Gentle Introduction to SVG Paths

SVG gives us plenty of shapes — circles, rectangles, polygons — but by far the most powerful is <path>. It's also the most intimidating, with its compact, regex-like syntax. Let's demystify it.

A path is a list of instructions

Think of a pen hovering over paper. Each command tells the pen where to go next:

<svg viewBox="0 0 100 100">
  <path d="
    M 10 80
    L 50 20
    L 90 80
  " />
</svg>

• M moves the pen without drawing.

• L draws a straight line.

• Z closes the shape back to where it began.

Curves

Straight lines get us surprisingly far, but curves are where paths shine. The cubic Bézier command, C, takes two control points and an end point.^{1Quadratic curves (`Q`) take a single control point. They're simpler, but less flexible.}

<path d="M 10 80 C 30 10, 70 10, 90 80" />

Relative commands

Every command has a lowercase twin that's relative to the current position. l 10 0 means “ten units to the right of wherever I am”. Relative paths are easier to move around, which makes them great for icons.

Animating paths

Because stroke-dasharray and stroke-dashoffset are animatable, we can make a path draw itself:

Where to go next

Pick an icon you like, open its source and try to read the path out loud. It feels silly. It works.