The path command alphabet
An SVG <path> is driven by a compact command language in its d attribute. Knowing the letters makes any path readable:
| Command | Means | Takes |
|---|---|---|
M | Move to (pen up) | x y |
L | Line to | x y |
H / V | Horizontal / vertical line | x / y |
C | Cubic Bézier | 2 control points + end |
Q | Quadratic Bézier | 1 control point + end |
A | Elliptical arc | radii, flags, end |
Z | Close path | — |
Uppercase = absolute coordinates (from the SVG origin); lowercase = relative (offset from the current pen position). Absolute is easier to read and debug; relative makes a path trivial to translate without recomputing every point.
Dragging points and the relative-path caveat
With points enabled, every coordinate and Bézier control point shows as a draggable handle, and the d text updates live as you move them — ideal for nudging a curve into shape. One gotcha: drag editing is most reliable on absolute (uppercase) paths. Relative paths can jump or distort during drag because moving one point shifts everything that follows it. If a path misbehaves while dragging, convert it to absolute coordinates first.
Béziers: the curve that doesn’t touch its controls
The C (cubic) and Q (quadratic) commands curve toward control points the line never actually reaches — the first control point pulls the curve away from the start, the second pulls it toward the end. This is why moving a control point bends the curve without moving its endpoints, and it’s the heart of how every smooth shape in SVG is built. Cubic Béziers (two control points) are more flexible; quadratics (one) are simpler.
From design tool to editor
To edit a shape from Figma or Illustrator, export it as SVG, open the file, and copy the d value out of the <path> element. Paste it here to render and refine it. The resulting path data can also feed CSS clip-path: path("…"), though that has narrower browser support than clip-path: polygon() (see the Clip-Path Generator). Everything runs locally — your paths never leave the browser.