Understanding SVG Path Syntax: The d Attribute Demystified

Open almost any real-world SVG and you'll meet a <path> element with a d attribute that looks like a keyboard fell down the stairs: d="M10 10 H 90 V 90 C 80 100...". That string is the single most important, and most intimidating, part of SVG. But it isn't random. The d attribute is a tiny, learnable language for pushing a pen around a canvas, and once you know the vocabulary, those cryptic strings become readable. This guide decodes it, command by command.

The pen model

Every path is one imaginary pen drawing on a coordinate grid. The d attribute is a list of instructions to that pen: "lift up and move here," "draw a line to there," "curve over to this point." Each instruction is a command, a single letter, followed by the numbers it needs.

Two rules unlock everything:

1. A capital letter means absolute coordinates. L 50 50 draws a line to the exact point (50, 50) on the canvas.
2. A lowercase letter means relative coordinates. l 50 50 draws a line 50 units right and 50 down from wherever the pen currently is.

That absolute-versus-relative distinction is the number-one source of confusion. Keep it in mind and half the mystery evaporates.

The essential commands

You can read the vast majority of paths knowing just a handful of letters.

M: moveto

M x y lifts the pen and moves it to a new point without drawing. Every path begins with an M. Think of it as picking the pen up and setting it down somewhere new.

M 10 10   → start at point (10, 10)

L, lineto

L x y draws a straight line from the current point to the given point.

M 10 10 L 90 90   → a diagonal line from (10,10) to (90,90)

There are two shorthands you'll see constantly:

• H x, a horizontal line to a new x, keeping y the same.
• V y, a vertical line to a new y, keeping x the same.

Z: closepath

Z draws a straight line back to where the current sub-path started, closing the shape. It takes no numbers. A triangle is just three lines and a Z:

M 50 10 L 90 90 L 10 90 Z

With M, L, H, V and Z you can already draw any polygon. The curves are next.

Curves: where it gets interesting

Straight lines are easy. The elegance of SVG is in its curves. There are three curve commands.

C, cubic Bézier

C x1 y1 x2 y2 x y is the workhorse curve. It draws to the end point (x, y), but its shape is pulled by two control points, (x1, y1) and (x2, y2). Picture the control points as magnets: the curve leaves the start heading toward the first control point and arrives at the end coming from the second. The control points themselves are never drawn. They only bend the line.

M 10 80 C 40 10, 65 10, 95 80

Cubic Béziers are what design tools emit when you draw with the pen tool, which is why exported SVGs are full of C commands.

Q: quadratic Bézier

Q x1 y1 x y is a simpler curve with just one control point. It's less flexible than a cubic but lighter, and fine for gentle arcs.

A: elliptical arc

A rx ry rotation large-arc-flag sweep-flag x y draws a section of an ellipse, and it's the most parameter-heavy command by far. The two flags are the tricky part: large-arc-flag picks the longer or shorter way around, and sweep-flag picks clockwise or counter-clockwise. Since four combinations of those flags connect the same two points along different arcs, arcs are the command people most often get "backwards." Rounded corners and pie slices are the usual reasons you'll meet an A.

Reading a real path

Armed with the vocabulary, here's a rounded-corner square-ish shape decoded:

M 20 20        → move to (20, 20)
H 80           → line right to (80, 20)
V 80           → line down to (80, 80)
H 20           → line left to (20, 80)
Z              → close back to (20, 20)

That's a plain square. Swap the corners for A arcs and you'd get rounded corners. Once you can narrate a path like this, editing one by hand stops being scary.

Why you rarely write this by hand

Reading paths is a genuinely useful skill; writing complex ones by hand is not how anyone actually works. Bézier control points are hard to place mentally, and arc flags are near-impossible to intuit. The practical workflow is visual: manipulate anchor points and handles on screen and let the tool generate correct d syntax underneath.

That's exactly what the SVG path editor is for, drag points and curve handles, and it writes clean path data for you, entirely in the browser. When you're trying to understand an existing path (to see which command draws which segment) the SVG path visualizer breaks a d string down and shows each command highlighted on the shape, which is the fastest way to build intuition for how the letters map to the picture.

Practical tips once you're editing paths

• Prefer relative commands for reuse. Relative (lowercase) paths are easier to move around, since they don't hardcode absolute positions.
• Precision bloats files. Design tools write coordinates to many decimal places. Rounding them barely changes the shape but shrinks the file, one of the wins covered in how to optimise an SVG.
• Keep sub-paths tidy. A single d can hold multiple shapes, each started by its own M. Splitting a complex path into logical sub-paths makes it far easier to reason about.
• Match the command to the shape. Straight edges want L/H/V. Smooth organic curves want C. Circular arcs and rounded corners want A. Using the right one keeps the data short and readable.

Each letter is a pen instruction

The d attribute isn't gibberish, it's a compact language where each letter is a pen instruction: M to move, L to draw straight, C and Q for curves, A for arcs, Z to close, with capitals meaning absolute and lowercase meaning relative. Learn to read it and SVGs stop being black boxes. Then let the SVG path editor and path visualizer handle the fiddly coordinate maths, so you spend your energy on the shape, not the syntax.

Watch the pen move

Reading path syntax from a book is slow. Watching it draw is fast. The SVG path editor parses the d attribute and renders it live as you edit, so changing an L to a C and dragging the control points teaches the curve commands in minutes. It runs entirely in the tab. The habit it builds is the one this guide is for: once you can read a path, SVGs from designers stop being opaque blobs and become editable geometry.

Sources

• �51� attribute (MDN Web Docs): every command, with examples
• SVG 1.1 Paths (W3C)