SVG Path Commands: Relative vs. Absolute Coordinates

Relative vs. Absolute Path Commands

Every SVG path command has two forms:

• Uppercase (M, L, C, etc.) — coordinates are absolute (relative to the SVG viewport origin)
• Lowercase (m, l, c, etc.) — coordinates are relative (offsets from the current point)

Example

# Absolute:
M 100,200 L 150,200 L 150,250 L 100,250 Z

# Relative:
M 100,200 l 50,0 l 0,50 l -50,0 Z

Both draw the same 50x50 square at position (100, 200).

When Relative Is Better

1. Smaller numbers: If the shape is far from the origin, relative offsets are small while absolute coordinates are large. l 2,3 is shorter than L 502,303.

2. Reusable fragments: A relative path snippet works at any position — just change the initial M command.

3. Optimization tools: SVGO and similar tools automatically choose the shorter form for each command.

When Absolute Is Better

1. Readability: Absolute coordinates tell you exactly where each point is in the viewport.

2. Editing: When using a visual editor, absolute coordinates map directly to canvas positions.

3. Debugging: It is easier to locate a specific point when coordinates are absolute.

Mixed Mode

You can mix absolute and relative commands within a single path:

M 10,10 l 50,0 L 60,80 l -50,0 Z

This is valid SVG. Optimizers often produce mixed paths to minimize total character count.

Size Comparison

For a complex icon originally at 500+ bytes:

Mode	Size	Savings
All absolute	520 bytes	—
All relative	480 bytes	7.7%
Mixed (optimized)	460 bytes	11.5%

The savings add up when you have dozens of icons in a sprite sheet or icon font.