SVG Path Syntax Illustrated Guide

Introduction to SVG Paths

SVG (Scalable Vector Graphics) paths are the backbone of vector graphics on the web. While SVG provides basic shapes like rectangles, circles, and ellipses, the <path> element offers unlimited creative potential through its powerful d attribute. This attribute contains a series of commands that tell the browser exactly how to draw a shape, one instruction at a time.

The d attribute might look intimidating at first glance--a cryptic string of letters and numbers like M10 10 C 20 20, 40 20, 50 10. However, once you understand the underlying syntax, this powerful tool becomes remarkably intuitive. Each command builds upon the previous one, creating a recipe for drawing that can produce everything from simple icons to complex illustrations.

In this guide, we'll demystify SVG path syntax by breaking down each command type with clear explanations and visual examples. Whether you're a web developer looking to customize icons, a designer creating custom graphics, or simply curious about how vector graphics work under the hood, this guide will give you the foundation you need to work confidently with SVG paths.

Our web development services often incorporate custom SVG graphics for clients who need scalable, performant visuals that look sharp at any size. Understanding SVG paths is also essential for anyone studying modern web design principles that leverage vector graphics effectively.

Understanding the Pen Tool Metaphor

How SVG Paths Work

The best way to understand SVG paths is to imagine holding a pen on a piece of paper. Every path command instructs you on how to move the pen or draw with it. The path element's d attribute contains a sequence of these instructions, executed from start to finish.

This mental model comes from vector graphics software like Adobe Illustrator, where the "pen tool" is the primary drawing instrument. SVG adopted this concept directly, which means the syntax mirrors what artists already know from design tools.

Think of it this way: when you put your pen on the paper at a starting point, you're creating the initial "current point." From there, each command tells your virtual pen what to do next. Moving the pen without touching the paper is like lifting it up--nothing gets drawn, but the position changes. Drawing with the pen creates visible strokes. And when you need to start a new shape elsewhere on the canvas, you simply lift the pen and place it down at the new position.

This metaphor extends to curves as well. Just as you can curve your hand naturally while drawing, SVG curves use "control points" that pull the line toward them without the curve actually passing through those points. The result is smooth, mathematically precise curves that look organic and intentional.

Visual: Simple diagram showing how a path with M → L → L → Z draws a triangle, with annotations showing each command's effect.

The d Attribute Explained

The d attribute (short for "data") is what makes the <path> element so powerful. Unlike other SVG elements that use specific attributes for each shape type, the path element consolidates all drawing instructions into this single attribute. This design allows for incredible flexibility--you can create any shape by combining the right sequence of commands.

Each command in the d attribute follows a consistent pattern: a single letter identifies the command type, followed by one or more numbers that serve as parameters. For example, M 10 10 tells the renderer to "Move to position (10, 10)" without drawing anything. The L 50 50 that follows says "Draw a Line to position (50, 50)".

Commands are separated by spaces or can run together when the number of parameters is unambiguous. A space between M and 10 tells the browser where the command ends and the parameters begin. When multiple parameters follow a command (like the six parameters in a cubic curve), you separate each number with spaces or commas: C 10 10, 40 20, 50 30.

The numbers after each command letter represent coordinates, radii, or other values depending on the command type. Some commands need just two numbers (like move and line commands), while others require more (like the seven parameters of an arc command). Understanding what each number represents is the key to reading and writing path data fluently.

Command Fundamentals

Uppercase vs Lowercase: Absolute and Relative Coordinates

One of the most important concepts in SVG path syntax is the distinction between uppercase and lowercase commands. This difference determines whether coordinates are interpreted as absolute positions on the canvas or as offsets from the current position.

• Uppercase commands use absolute coordinates, meaning the numbers refer to the SVG's coordinate system origin (0, 0) at the top-left corner
• Lowercase commands use relative coordinates, where the numbers represent movement from the current pen position

For instance, M 50 50 moves the pen to the exact position (50, 50) from the canvas origin. In contrast, m 50 50 moves the pen 50 units right and 50 units down from wherever it currently is. This distinction gives you flexibility in how you structure your paths.

Practical example: When drawing a series of buttons or icons that are all the same size but positioned at different locations, relative commands can be more efficient. You can draw one shape using relative moves, then repeat that pattern elsewhere. However, when precision placement matters or when combining shapes that should align to a grid, absolute coordinates often make your intent clearer.

Command Chaining and the Current Point

SVG paths are sequential--the result of each command becomes the starting point for the next. This current point concept is crucial to understanding path syntax. When you write L 50 50, the line is drawn from wherever the pen currently is to the coordinates (50, 50), not from (0, 0) unless specified.

This chaining behavior means you don't need to specify starting coordinates for every line segment. You simply tell the path where to go next, and the renderer connects from the current position. This makes path data more compact than defining each line segment independently.

However, this also means you must be aware of your path's state at each step. A common mistake is assuming a command starts from a different point than it actually does, resulting in unexpected shapes. Understanding the current point helps you predict exactly what your path will draw.

Whitespace and Formatting

While SVG path data can be written with or without spaces and commas between values, including them makes your code much more readable. The specification allows M10 10, M10,10, M 10 10, and even M10, 10 as valid equivalents, but human readers benefit from consistent formatting.

Including spaces and commas doesn't affect rendering performance significantly, especially with modern compression. The readability gains far outweigh any minimal file size concerns. For development and maintenance, always format path data with whitespace to separate commands and commas between coordinate pairs.

When inspecting production SVGs, you might encounter compressed path data without any formatting. This is typically an optimization step, and many SVG optimizers (like SVGO) can toggle between compressed and readable formats depending on your needs.

Move Commands: Starting Your Path

The M and m Commands

Every path must begin with a move command (M or m), which lifts the virtual pen and places it at a new position without drawing anything. This establishes the starting point for your drawing and sets the initial current point for subsequent commands.

The move command takes two parameters: the x-coordinate and y-coordinate where the pen should be placed. For example, M 50 100 places the pen at x=50, y=100. After a move command, any drawing command will start from this position.

Multiple move commands in a single path allow you to draw disconnected shapes with one path element. This is useful for creating icons or symbols that contain separate visual elements. For example, a letter "i" icon might have one subpath for the body and another for the dot. You can even mix uppercase and lowercase move commands within the same path, though this is rarely necessary.

Beyond starting a path, move commands serve as "pen lifts" throughout your drawing. When you need to jump to a different area without drawing a connecting line, a move command provides exactly that capability. A common use case is drawing letters like "H" or "N" where the pen needs to move between strokes.

Move commands also reset certain curve smoothing behaviors, which can be important when transitioning between different parts of a complex shape. Understanding this helps you control the visual flow of your paths.

Line Commands: Drawing Straight Lines

SVG provides several line commands for different scenarios:

The L and l Commands

The line command (L or l) is the most fundamental drawing command in SVG paths. It draws a straight line from the current point to a specified endpoint. The uppercase L uses absolute coordinates, while lowercase l uses coordinates relative to the current point.

A simple path might look like M 10 10 L 50 50, which moves to (10, 10) then draws a line to (50, 50). You can chain multiple line commands together: M 10 10 L 30 10 L 30 30 L 10 30 Z draws a square by connecting four points and closing back to the start.

The H and h Commands

The horizontal line command (H or h) draws a straight line at the current y-coordinate, requiring only an x-coordinate as a parameter. For example, M 10 10 H 50 is equivalent to M 10 10 L 50 10. The horizontal command implicitly maintains the current y-position while changing only the x-coordinate.

Horizontal commands are particularly useful when constructing rectangular shapes, grids, or any design element with horizontal lines. They also help prevent accidental vertical movement that might occur from mistyping a coordinate.

The V and v Commands

The vertical line command (V or v) mirrors the horizontal command but for vertical movement. Using M 10 10 V 50 is equivalent to M 10 10 L 10 50. Like horizontal commands, vertical commands make your path data more expressive and less error-prone when you're specifically drawing vertical segments.

Vertical commands pair naturally with horizontal commands for creating orthogonal shapes. A common pattern is alternating H and V commands to create rectangles and other axis-aligned shapes without explicitly specifying both coordinates for each segment.

Curve Commands: Creating Smooth Shapes

Introduction to Bézier Curves

Bézier curves are the mathematical foundation for smooth curves in computer graphics. Named after Pierre Bézier, who developed them for automotive design at Renault, these curves use control points to define their shape. SVG supports two types of Bézier curves: quadratic (with one control point) and cubic (with two control points).

Understanding Bézier curves gives you precise control over curved shapes, from subtle arcs to dramatic swoops. The key insight is that control points "pull" the curve toward them without the curve passing through them. The curve always starts heading toward the first control point and ends heading away from the last control point, creating smooth transitions between segments.

Quadratic Bézier Curves: Q and q Commands

The quadratic Bézier curve command (Q or q) creates smooth curves using a single control point. The command takes four parameters: the control point coordinates (x1, y1) and the endpoint coordinates (x, y). The curve starts from the current point and ends at (x, y), with its shape influenced by the control point at (x1, y1).

The mathematical formula for quadratic Bézier curves ensures the curve passes exactly one-third of the way to the control point before heading toward the endpoint. This predictable behavior makes quadratic curves intuitive once you understand the control point's "pull."

Smooth Quadratic Curves: T and t Commands

The smooth quadratic curve command (T or t) creates a quadratic Bézier curve where the control point is automatically reflected from the previous curve's control point. When you use T after a Q command, the renderer calculates a new control point by reflecting the previous control point across the current point.

Cubic Bézier Curves: C and c Commands

The cubic Bézier curve command (C or c) offers maximum control over curve shape with two control points. The command takes six parameters: the first control point (x1, y1), the second control point (x2, y2), and the endpoint (x, y). The first control point influences the curve's direction at the starting point, while the second control point influences the direction at the endpoint.

Smooth Cubic Curves: S and s Commands

The smooth cubic curve command (S or s) creates cubic Bézier curves with automatically calculated control points. Like the T command, S reflects the previous control point to create the first control point of the new curve, ensuring smooth continuity. S curves are particularly useful for chaining smooth cubic curves together, such as when drawing wave patterns or organic shapes.

Arc Commands: Drawing Elliptical Curves

The A and a Commands

The arc command (A or a) is the most complex SVG path command, capable of drawing elliptical arcs between two points. It takes seven parameters:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

• rx, ry - Radii of the ellipse (how wide and tall)
• x-axis-rotation - Rotation of the ellipse in degrees (0 means no rotation)
• large-arc-flag - Determines which of the two possible arcs to draw: 0 for the smaller arc, 1 for the larger arc
• sweep-flag - Determines the arc direction: 0 for counter-clockwise, 1 for clockwise
• x, y - Endpoint coordinates where the arc ends

The large-arc-flag and sweep-flag are the trickiest parameters because four possible arcs can connect the same two points with the same radii. The large-arc-flag chooses between the short way around and the long way around. The sweep-flag then chooses between the two arcs in that "family" based on direction.

For example, if you're drawing an arc from left to right, the sweep-flag determines whether the arc curves upward (clockwise) or downward (counter-clockwise). Combined with the large-arc-flag, these two single-digit parameters give you complete control over which arc is drawn.

Visual: Diagram showing the same two points connected by different arcs, explaining each parameter's effect.

Summary

SVG path syntax, while initially cryptic, follows consistent patterns that become intuitive with practice. The key concepts are:

• The d attribute contains sequential commands executed from start to finish
• Uppercase commands use absolute coordinates; lowercase use relative coordinates
• Move commands (M/m) establish starting points without drawing
• Line commands (L/l, H/h, V/v) create straight segments
• Close path (Z/z) connects back to the starting point
• Bézier curves (Q/q, T/t, C/c, S/s) create smooth curves
• Arc commands (A/a) draw elliptical segments

With these building blocks, you can create any vector shape imaginable. Start with simple paths, gradually incorporate more complex commands, and reference this guide as you encounter new patterns.

For projects requiring custom SVG graphics, our UI design services can help you create professional icons, illustrations, and vector assets that enhance your website's visual appeal and user experience.

Sources

1. MDN Web Docs - SVG Paths
2. Josh W. Comeau - An Interactive Guide to SVG Paths
3. W3C SVG 2 Specification - Paths
4. Nan.fyi - A Deep Dive Into SVG Path Commands
5. Smashing Magazine - Decoding The SVG path Element