SVG Path Commands Explained — M, L, C, A and More

Why Understanding SVG Paths Matters

The path element is the most powerful and versatile building block in SVG. While SVG offers basic shape elements like circle, rect, and line, the path element can draw any shape — straight lines, curves, arcs, and complex outlines. Nearly every SVG icon you encounter is built primarily from paths.

When you open an SVG file and see something like d="M12 2L2 22h20z", it can look like gibberish. But each character is a simple instruction, and once you learn the vocabulary, you can read, write, and modify path data with confidence. This skill is invaluable for tweaking icons, fixing rendering issues, debugging SVG output, and understanding how tools like the AI Icon Generator construct their results.

The d Attribute

All path data lives in the d attribute of the path element:

<path d="M10 10 L90 10 L90 90 L10 90 Z" />

The d attribute contains a series of commands, each identified by a letter, followed by numeric parameters. Commands are executed in sequence, like instructions for a pen moving across paper.

Whitespace and commas between values are interchangeable. These are all equivalent:

M10 10 L90 10
M10,10 L90,10
M 10 10 L 90 10
M10,10L90,10

Most SVG tools produce compact notation without spaces or commas for smaller file sizes, but for readability, adding spaces helps.

Absolute vs Relative Commands

Every path command comes in two forms:

• Uppercase letter — Absolute coordinates (relative to the viewBox origin)
• Lowercase letter — Relative coordinates (relative to the current pen position)

<!-- Absolute: move to (10,10), draw line to (90,10) -->
<path d="M10 10 L90 10" />

<!-- Relative: move to (10,10), draw line 80 units right -->
<path d="M10 10 l80 0" />

Both produce the same visual result. Relative commands are useful when you want to move shapes without recalculating every coordinate, and they often produce shorter path data.

MoveTo — M and m

The M command moves the pen to a new position without drawing anything. It is always the first command in a path and can appear anywhere to start a new subpath.

M x y     — Move to absolute position (x, y)
m dx dy   — Move relative to current position

Example:

<!-- Move to (10, 20) then draw from there -->
<path d="M10 20 L50 20" />

When M appears after other commands, it starts a new subpath. This is how you create disconnected shapes within a single path element:

<!-- Two separate horizontal lines in one path -->
<path d="M10 20 L90 20 M10 40 L90 40" stroke="black" />

Note: If multiple coordinate pairs follow an M command, the subsequent pairs are treated as implicit L (LineTo) commands:

M10 20 50 20 90 20
<!-- equivalent to: M10 20 L50 20 L90 20 -->

LineTo — L, H, and V

LineTo commands draw straight lines from the current position.

L x y     — Draw line to absolute position (x, y)
l dx dy   — Draw line relative to current position
H x       — Draw horizontal line to absolute x
h dx      — Draw horizontal line relative
V y       — Draw vertical line to absolute y
v dy      — Draw vertical line relative

The H and V shortcuts are convenient for horizontal and vertical lines because they need only one parameter:

<!-- A square using H and V shortcuts -->
<path d="M10 10 H90 V90 H10 Z" fill="none" stroke="black" />

This is more compact than the equivalent using L:

<path d="M10 10 L90 10 L90 90 L10 90 Z" fill="none" stroke="black" />

Practical Example: Drawing a Plus Sign

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 5 V19 M5 12 H19" />
</svg>

Two subpaths: a vertical line from (12, 5) to (12, 19) and a horizontal line from (5, 12) to (19, 12).

CurveTo — Cubic Bezier (C and S)

Cubic Bezier curves are the foundation of smooth, flowing shapes in SVG. They use two control points to define the curve between the start and end points.

C x1 y1, x2 y2, x y   — Cubic Bezier with two control points, ending at (x, y)
c dx1 dy1, dx2 dy2, dx dy — Relative version

• (x1, y1) — First control point (influences the start of the curve)
• (x2, y2) — Second control point (influences the end of the curve)
• (x, y) — End point of the curve

<svg viewBox="0 0 100 100">
  <path d="M10 90 C30 10, 70 10, 90 90" fill="none" stroke="black" stroke-width="2" />
</svg>

This draws a smooth arch from (10, 90) to (90, 90), with control points pulling the curve upward toward (30, 10) and (70, 10).

Smooth Cubic Bezier — S

The S command creates a smooth continuation of a previous cubic Bezier curve. It automatically mirrors the previous control point, so you only need to specify one control point and the end point:

S x2 y2, x y   — Smooth cubic Bezier
s dx2 dy2, dx dy — Relative version

<!-- S-curve using C followed by S -->
<path d="M10 50 C20 10, 40 10, 50 50 S80 90, 90 50" fill="none" stroke="black" />

The S command mirrors the second control point of the preceding C command, creating a seamless transition. This is how smooth, flowing shapes are built.

CurveTo — Quadratic Bezier (Q and T)

Quadratic Bezier curves use a single control point instead of two:

Q x1 y1, x y   — Quadratic Bezier with one control point
q dx1 dy1, dx dy — Relative version

Quadratic curves are simpler than cubic curves but less flexible. They are useful for simple arcs and rounded shapes:

<svg viewBox="0 0 100 100">
  <path d="M10 90 Q50 10, 90 90" fill="none" stroke="black" stroke-width="2" />
</svg>

Smooth Quadratic — T

Like S for cubic curves, T creates smooth continuation of quadratic curves by mirroring the previous control point:

T x y   — Smooth quadratic Bezier
t dx dy — Relative version

<!-- Wavy line using Q and T -->
<path d="M10 50 Q30 10, 50 50 T90 50" fill="none" stroke="black" />

Arc — A

The arc command draws elliptical arcs and is the most complex path command:

A rx ry x-rotation large-arc-flag sweep-flag x y
a rx ry x-rotation large-arc-flag sweep-flag dx dy

Parameters:

• rx, ry — Horizontal and vertical radii of the ellipse
• x-rotation — Rotation of the ellipse in degrees (usually 0 for circles)
• large-arc-flag — 0 for the smaller arc, 1 for the larger arc
• sweep-flag — 0 for counterclockwise, 1 for clockwise
• x, y — End point of the arc

The two flags (large-arc and sweep) select which of the four possible arcs to draw between two points on an ellipse:

<svg viewBox="0 0 200 200">
  <!-- Small arc, clockwise -->
  <path d="M50 100 A50 50 0 0 1 150 100" fill="none" stroke="red" stroke-width="2" />

  <!-- Large arc, clockwise -->
  <path d="M50 100 A50 50 0 1 1 150 100" fill="none" stroke="blue" stroke-width="2" />

  <!-- Small arc, counterclockwise -->
  <path d="M50 100 A50 50 0 0 0 150 100" fill="none" stroke="green" stroke-width="2" />

  <!-- Large arc, counterclockwise -->
  <path d="M50 100 A50 50 0 1 0 150 100" fill="none" stroke="purple" stroke-width="2" />
</svg>

Practical Example: Drawing a Circle with Arcs

A full circle requires two arc commands because a single arc cannot describe a complete circle (the start and end points would be the same):

<path d="M50 0 A50 50 0 1 1 50 100 A50 50 0 1 1 50 0" fill="blue" />

Practical Example: A Rounded Checkbox

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <!-- Rounded rectangle using arcs for corners -->
  <path d="M7 3 H17 A4 4 0 0 1 21 7 V17 A4 4 0 0 1 17 21 H7 A4 4 0 0 1 3 17 V7 A4 4 0 0 1 7 3 Z" />
  <!-- Checkmark -->
  <path d="M9 12 L11 14 L15 10" />
</svg>

The arcs create rounded corners with a radius of 4 units.

ClosePath — Z

The Z command (or z — both behave identically) draws a straight line from the current position back to the start of the current subpath:

Z   — Close the path
z   — Same as Z

<!-- Triangle (closed shape) -->
<path d="M12 2 L22 22 L2 22 Z" fill="orange" />

<!-- Same triangle without Z (not closed — has a gap at the last corner) -->
<path d="M12 2 L22 22 L2 22" fill="orange" stroke="black" />

Without Z, the fill still renders correctly (SVG auto-closes fills), but the stroke will show a gap at the junction between the last point and the first point. Always use Z for closed shapes.

Putting It All Together: Reading Real Icon Paths

Let us decode an actual icon path step by step. Here is a hamburger menu icon:

<path d="M3 12h18M3 6h18M3 18h18" />

Breaking it down:

1. M3 12 — Move to (3, 12)
2. h18 — Draw horizontal line 18 units to the right (to x=21)
3. M3 6 — Move to (3, 6), starting a new subpath
4. h18 — Draw horizontal line 18 units right
5. M3 18 — Move to (3, 18), starting another subpath
6. h18 — Draw horizontal line 18 units right

Result: three horizontal lines at y=6, y=12, and y=18 — a classic hamburger menu icon.

Now let us look at a more complex example — a heart icon:

<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />

This path uses M to start, lowercase l for relative lines, uppercase C for cubic Bezier curves (the flowing curves of the heart), and z to close. The mix of absolute and relative commands keeps the path data compact.

Optimizing Path Data

SVG files from design tools often contain unnecessarily verbose path data. Here are techniques to reduce path size:

Remove unnecessary precision. Coordinates like 12.000000 can be shortened to 12. Coordinates like 10.123456789 can usually be rounded to 10.12 without visible difference.

Use relative commands. When consecutive commands are near each other, relative coordinates (l, c, a) produce smaller numbers than absolute coordinates.

Use shorthand commands. Replace L x y with H x or V y when drawing horizontal or vertical lines. Use S instead of C when the first control point mirrors the previous curve.

Merge connected paths. Multiple path elements that share endpoints can sometimes be merged into a single path, reducing SVG overhead.

Use the optimizer. Our SVG Optimizer runs SVGO, which automatically applies these optimizations and more. It can reduce path data by 20-40% without visual changes.

Tools for Working with Path Data

Manually editing paths is feasible for simple modifications (adjusting a coordinate, changing a curve), but impractical for creating complex shapes from scratch.

Design tools like Figma, Sketch, and Illustrator use visual pen tools to create paths and export them as SVG. This is the standard workflow for creating original icons and illustrations.

Online path editors let you manipulate path data visually and see the code update in real time. These are useful for learning and for fine-tuning existing paths.

AI generators like our AI Icon Generator produce paths directly from text descriptions. The generated path data is typically clean and well-structured, though running it through the SVG Optimizer can further reduce size.

The SVG Viewer — Use our SVG Viewer to inspect path data visually. Paste path code, see the result instantly, and verify that your modifications produce the expected shape.

Common Path Patterns in Icons

Recognizing common patterns helps you read and modify icon paths more quickly:

Straight-line icons (arrows, plus signs, hamburger menus) use only M, L, H, V, and Z. They are the simplest to read and edit.

Rounded icons (speech bubbles, rounded rectangles, badges) combine straight lines with arcs (A) for rounded corners.

Organic shapes (hearts, leaves, clouds) rely heavily on cubic Bezier curves (C and S) for smooth, flowing outlines.

Geometric icons (hexagons, stars, diamonds) use M and L to define vertices, closed with Z.

Circular icons (loading spinners, progress rings, pie charts) use arc commands (A) extensively.

Summary

SVG path commands are a compact language for describing any shape:

Once you learn these ten commands, you can read any SVG path data, understand how icons are constructed, and make targeted modifications without reaching for a design tool. Combine this knowledge with the SVG Viewer for instant visual feedback as you edit.