SVG Path Data Demystified: How M, L, C, Q, A, and Z Commands Work

SVG path data is a compact drawing language where each letter in a path string instructs a virtual pen to move, draw lines, trace curves, or close shapes. The six core commands are M (move), L (line), C and Q (bezier curves), A (arc), and Z (close path), each followed by the coordinate numbers it requires. Uppercase letters use absolute coordinates, while lowercase versions use coordinates relative to the pen's current position — a distinction that can cause entire shapes to shift unexpectedly when editing midway through a path. Bezier curves use either one control point (Q) for simpler arcs or two (C) for more independent curvature at each end, while the arc command A is considered the hardest to write by hand due to its six parameters. Visual path editors work by mapping draggable anchor points and control handles directly to these same numbers, simply providing instant visual feedback instead of requiring manual re-rendering.