§ GARDEN · SVG · CLASS OPEN
NODE FILE · ENTRY
Mastering SVG Path Commands
FILED UNDER · SVG
①Read
②Meta
Demystifying the d attribute — M, L, C, A and the invisible coordinate system behind every vector.
The SVG path element's d attribute is a mini programming language. Each letter is a command, each number is a coordinate. Once you internalize the grammar, you can read and write vector shapes by hand — which makes procedural generation, animation, and debugging vastly easier.
The Core Commands
M moves the pen. L draws a line. C draws a cubic Bézier curve with two control points. A draws an elliptical arc. Z closes the path. Lowercase versions use relative coordinates. That's the entire alphabet you need for 90% of SVG work.
DTNRWORKSHOP ARMAMENTSSN 2012.OTT.0176