The SVG Path Element, Explained

Open any real-world SVG and you’ll find it’s mostly one element repeated: <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>. That d attribute is a miniature drawing language – a pen receiving movement commands. Learn its half-dozen verbs and you can read, debug, and hand-tweak nearly any SVG alive.

The pen model

A path is literally instructions to a pen: move here, draw a line there, curve to here, close up. Each command is a letter plus coordinates. The pen has a position; every command moves it and (usually) draws along the way.

<path d="M 10 10 L 90 10 L 90 90 Z" fill="#0070f3"/>

Reads as: Move to (10,10) without drawing → Line to (90,10) → Line to (90,90) → Z close back to start. A triangle. Paste it into a live editor and follow along – every example here runs.

The straight-line commands

• M x y – Move (pen up, reposition). Every path starts with one.
• L x y – Line to a point.
• H x / V y – Horizontal / Vertical line shorthand (one coordinate).
• Z – Close the path back to its start. Closed paths matter for fills and are mandatory for cut files.

Lowercase = relative. l 20 0 means “20 units rightward from here” vs L 20 0 “to absolute point (20,0).” Exporters use relative heavily – that’s the wall of lowercase letters in generated files.

The curve commands

Q cx cy x y – Quadratic Bézier: one control point bends the line toward it on the way to the endpoint. Think of the control point as a magnet:

<path d="M 10 80 Q 50 10 90 80" stroke="#171717" fill="none"/>

C c1x c1y c2x c2y x y – Cubic Bézier: two magnets, one shaping each end – the workhorse of every design tool’s pen output, capable of any curve. (S and T are shorthands continuing previous curves smoothly.)

A rx ry rot large-arc sweep x y – elliptical Arc: a slice of an ellipse to the endpoint. The two flags pick which of the four possible arcs – notoriously fiddly; flip flags in the live editor rather than reasoning them out. Rounded-corner rectangles in icon sets are tiny arcs.

Reading a real path

That house icon from the intro, decoded:

M3 9      → start at left wall's top
l9-7      → up-right to the roof peak  (relative)
9 7       → down-right to the right wall (implicit second l)
v11       → wall goes down 11
a2 2 0 0 1-2 2 → a tiny rounded corner (arc)
H5        → floor across to x=5
a2 2 0 0 1-2-2 → other rounded corner
z         → close

Once you can read this, you can also fix it – nudge a coordinate, straighten an edge, drop a stray node – surgical edits no GUI makes faster. (The editing tiers.)

Where paths come from (and what that tells you)

• Designers’ pen tools emit clean cubic curves with sensible structure.
• Auto-tracers (how they work) emit dense, node-heavy paths – mathematically faithful to pixels, not to design intent. That density is why traced files are bigger and harder to hand-edit.
• Shape elements (rect, circle) are paths in spirit; tools convert (“flatten”) them to paths for portability, which is why exports are path-soup even when the design was simple shapes.

Practical corollaries: prefer original vectors over traces when both exist; optimize generated paths (precision rounding hits paths hardest); and when hand-editing curves gets heavy, that’s the cue for a visual editor – code for surgery, canvas for sculpture.

Next up the stack: the viewBox that frames what your paths draw, and the rendering pipeline that turns them into pixels.