SVG paths: d attribute, commands, curves, and subpaths

A <path> may be able to draw incredibly complex shapes, but the attribute structure for a <path> element is very simple:

<path d="path-data"/>

There are generally two approaches to rendering the path. In the first approach, path coordinates are given in absolute terms, explicitly describing points in the coordinate system. The single letter commands that control absolute positioning are given as uppercase characters: M, L, A, C, Q, and so on. Changing one point only affects the line segments that directly include that point.

The second approach is to use relative coordinates, indicated by lowercase command letters: m, l, a, c, q, and so on. For relative commands, the coordinates describe the offset from the end of the previous segment, rather than the position relative to the origin of the coordinate system.

Absolute:

<path d="M3,10 L10,0 L17,10 L10,20 L3,10" />

Relative:

<path d="m3,10 l7,-10 l7,10 l-7,10 l-7,-10"/>

If a coordinate doesn’t change, we can use shortcuts:

<path d="M10,5 H30 V15 H0 Z" />

<path d="M10,5 h20 v10 h-20 z" />

Path commands