A practical guide to SVG path commands — M, L, C, A, Z — for reading, editing, and debugging SVGs.

The d attribute on SVG <path> elements uses a mini-language of commands to define shapes. Understanding these commands helps you read, edit, and debug SVG files.

Essential Commands

  • M x y — Move to (start a new sub-path)
  • L x y — Line to (draw a straight line)
  • H x — Horizontal line to
  • V y — Vertical line to
  • C x1 y1 x2 y2 x y — Cubic Bezier curve
  • S x2 y2 x y — Smooth cubic Bezier
  • Q x1 y1 x y — Quadratic Bezier curve
  • A rx ry rotation large-arc sweep x y — Elliptical arc
  • Z — Close path (line back to start)

Lowercase versions (m, l, c, etc.) use relative coordinates instead of absolute.

Reading Path Data

A simple square: M 0 0 L 100 0 L 100 100 L 0 100 Z — move to origin, draw four sides, close. A circle approximated with arcs uses the A command.

Why This Matters

When you convert PNG to SVG, the output is path data. Understanding the format lets you manually edit paths in a text editor, debug conversion artifacts, and optimize file size by simplifying coordinates.