How SVG Paths Work

SVG paths are one of the most powerful features of Scalable Vector Graphics. Nearly every complex icon, logo, illustration or chart eventually becomes one or more SVG paths. Understanding how paths work allows developers to edit graphics manually, optimize SVG files and even generate vector graphics programmatically.

Although path data may initially look like a random collection of letters and numbers, it actually follows a simple set of drawing commands. Each command tells the browser how to move a virtual pen across the canvas to create lines, curves and shapes.

What Is an SVG Path?

A path is a sequence of drawing instructions stored inside the d attribute of the SVG path element. The browser reads these instructions from left to right and constructs the final shape.

<path d="M20 20 L120 20 L120 120 Z" />

This single line tells the browser where to start drawing, where to create straight lines and when to close the shape.

How Paths Are Drawn

Imagine holding a pen above a sheet of paper. The first command moves the pen into position. Later commands draw lines or curves from the current position until the shape is complete.

Move pen
   ↓
Draw line
   ↓
Draw curve
   ↓
Close shape

The d Attribute

Every SVG path stores its instructions inside the d attribute. This attribute contains a sequence of commands followed by numeric coordinates.

<path d="M10 10 L80 10 L80 80 Z" />

Each command begins with a letter followed by one or more coordinate values.

Absolute vs Relative Commands

Most SVG commands exist in two versions. Uppercase letters use absolute coordinates measured from the SVG canvas, while lowercase letters use positions relative to the current drawing point.

Move Command (M)

The M command moves the drawing cursor without creating a visible line. Every path normally begins with a Move command.

<path d="M50 40" />

This simply positions the pen at coordinates (50, 40). Nothing is drawn yet.

Line Command (L)

The L command draws a straight line from the current position to the specified coordinates.

<path d="M20 20 L120 60" />

This creates a single straight segment connecting the two points.

Horizontal and Vertical Lines

SVG also provides shortcuts for perfectly horizontal and vertical lines using H and V commands.

<path d="M20 20
H120
V80" />

Using H and V often makes SVG code shorter and easier to read.

Curve Commands

Straight lines are only part of what SVG paths can produce. Curves allow designers to create smooth icons, rounded shapes and complex illustrations using mathematical control points.

Cubic Bézier Curves (C)

The C command creates cubic Bézier curves using two control points and one ending point. The control points determine how the curve bends before reaching its destination.

<path d="M20 80
C40 20 120 20 140 80" />

Changing either control point immediately changes the shape of the curve without moving its starting or ending positions.

Quadratic Bézier Curves (Q)

Quadratic curves are similar to cubic curves but use only one control point. They are easier to understand and often sufficient for simple illustrations.

<path d="M20 80
Q80 10 140 80" />

Arc Command (A)

The A command draws elliptical arcs between two points. It is one of the most complex SVG commands because it requires several parameters describing the arc's radius, rotation and sweep direction.

<path d="M40 80
A40 40 0 0 1 120 80" />

Although the syntax appears intimidating, most designers generate arc commands using vector editors instead of writing them manually.

Closing a Path (Z)

The Z command connects the current point back to the starting point, closing the shape automatically. This is commonly used when drawing polygons and filled graphics.

<path d="
M20 20
L120 20
L120 120
L20 120
Z" />

Without the closing command the final side would remain open.

Building Complex Shapes

Real-world SVG graphics combine many commands inside a single path. A logo might contain dozens of curves, lines and arcs while still remaining only one SVG element.

Move
 ↓
Lines
 ↓
Curves
 ↓
Arcs
 ↓
Close path

Fill and Stroke

A path describes only geometry. The appearance is controlled separately through attributes such as fill, stroke and stroke-width.

<path
  d="M20 20 L120 20 L120 120 Z"
  fill="#4f46e5"
  stroke="#1e1b4b"
  stroke-width="3"
/>

Changing these attributes alters the visual style without modifying the underlying path geometry.

Why Path Optimization Matters

Vector editors often export SVG paths containing unnecessary decimal places, repeated commands and redundant whitespace. Optimizing path data reduces file size without affecting appearance.

• Remove unnecessary spaces.
• Reduce excessive decimal precision.
• Merge compatible commands.
• Prefer relative coordinates when shorter.
• Delete invisible path segments.

Reading Existing SVG Paths

When inspecting an SVG created by a design application, the path data can initially seem overwhelming. Breaking it into individual commands makes it much easier to understand the drawing process.

Common Path Commands Overview

Most SVG illustrations rely primarily on these commands. Mastering them is enough to understand and edit the majority of SVG files found on the web.

Editing Paths by Hand

Although professional designers usually create paths in software such as Illustrator, Figma or Inkscape, manually editing path data is often useful when making small adjustments or fixing exported SVG code. Since SVG is plain text, coordinates can be modified directly inside any code editor.

<path d="M20 20 L120 20 L120 120 Z" />

Changing just one coordinate may move an entire edge or reshape part of an icon without needing to reopen the original design file.

Animating SVG Paths

SVG paths can also be animated using CSS or JavaScript. One common technique is drawing a path gradually by manipulating stroke-dasharray and stroke-dashoffset based on the total path length.

path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw 2s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

This effect is widely used for animated logos, diagrams and loading illustrations.

Frequently Asked Questions

Helpful SVG Path Tools

An SVG Path Editor lets you modify path commands visually, an SVG Path Optimizer removes unnecessary coordinates and simplifies path data, an SVG Path Length Calculator measures the exact length of a path for animations, an SVG Viewer renders SVG files directly in the browser for inspection, and an SVG Formatter restructures path data to make long command sequences much easier to read and maintain.

Conclusion

SVG paths form the foundation of modern vector graphics on the web. Every path is simply a sequence of drawing instructions that move a virtual pen across the canvas using lines, curves and arcs. Once you understand commands such as M, L, C, Q, A and Z, complex SVG files become far less intimidating. Combined with path editors, optimizers and formatting tools, this knowledge makes it much easier to inspect, edit and create scalable graphics that remain sharp on every screen while keeping file sizes small.