Absolute vs Relative SVG Path Commands

In SVG development, the d attribute of a <path> element defines the shape’s outline using a sequence of path commands and coordinates. The key difference between absolute and relative commands lies in how the coordinate values are calculated: absolute commands place points at exact coordinates within the SVG viewport, while relative commands place points relative to the current position of the virtual drawing pen. This article explains how both types operate, how command casing dictates behavior, and when to use each approach.

Case Sensitivity: The Core Rule

SVG path commands are case-sensitive. The letter case determines whether the coordinate values that follow are interpreted as absolute or relative:

Uppercase letters (e.g., M, L, C) represent absolute commands.
Lowercase letters (e.g., m, l, c) represent relative commands.

The only exception is the close path command (Z or z), which performs the exact same function regardless of casing by drawing a straight line back to the start of the current sub-path.

How Absolute Commands Work

Absolute commands instruct the path renderer to move to an exact coordinate (x, y) in the SVG coordinate system, originating from the top-left corner (0, 0).

For example:

<path d="M 50 50 L 150 50 L 150 150 Z" fill="none" stroke="black" />

M 50 50: Moves the pen to the exact coordinate x=50, y=50.
L 150 50: Draws a line directly to the absolute coordinate x=150, y=50.
L 150 150: Draws a line directly to the absolute coordinate x=150, y=150.
Z: Closes the shape back to (50, 50).

How Relative Commands Work

Relative commands treat the supplied coordinate values as offset values (dx, dy) added to the pen’s current position.

For example:

<path d="M 50 50 l 100 0 l 0 100 z" fill="none" stroke="black" />

M 50 50: Moves the pen to (50, 50).
l 100 0: Draws a line 100 units to the right and 0 units vertically, ending at (150, 50).
l 0 100: Draws a line 0 units horizontally and 100 units down from the previous point, ending at (150, 150).
z: Closes the shape back to (50, 50).

Comparison of Common Path Commands

Command	Absolute (Uppercase)	Relative (Lowercase)	Description
Move To	`M x,y`	`m dx,dy`	Moves the pen without drawing.
Line To	`L x,y`	`l dx,dy`	Draws a straight line to the destination.
Horizontal Line	`H x`	`h dx`	Draws a horizontal line.
Vertical Line	`V y`	`v dy`	Draws a vertical line.
Cubic Bézier	`C x1,y1 x2,y2 x,y`	`c dx1,dy1 dx2,dy2 dx,dy`	Draws a cubic Bézier curve using two control points.
Quadratic Bézier	`Q x1,y1 x,y`	`q dx1,dy1 dx,dy`	Draws a quadratic curve using one control point.
Arc	`A rx ry ... x y`	`a rx ry ... dx dy`	Draws an elliptical arc to the target coordinate.

When to Use Absolute vs. Relative Commands

Use Absolute Commands when drawing shapes that must align precisely with specific grid lines, fixed guides, or explicit coordinate markers inside the SVG canvas.
Use Relative Commands when creating modular, reusable icons or shapes that need to be moved around without recalculating every internal point. Relative commands also make procedural path generation and morphing animations easier since sub-shapes maintain their proportions regardless of starting coordinates.