SVG Essentials: Mastering the Path Element

Understand SVG paths, curves, and commands

Published at: February 20, 2026

Last updated: February 20, 2026

Estimated reading time: 10 min read

If basic shapes like circles and rectangles are the “Lego bricks” of SVG, the <path> element is the professional pen tool. It is a single, ultra-powerful element capable of drawing any shape imaginable—from custom icons to fluid, organic illustrations—by following a string of specific commands.

Before we dive into the “alphabet” of path data, it is important to have a solid grasp of how the SVG canvas works. If you aren’t yet comfortable with the top-left coordinate system or the logic of the viewBox, I recommend starting there first.

Once you have the grid down, you’re ready to master the d attribute and move from simple geometry to advanced vector mastery.

The d Attribute: The Map of Your Shape#

The <path> element relies almost entirely on one attribute: d (which stands for data). This attribute contains a series of commands and coordinates that tell the browser exactly where to move the “virtual pen.”

Example of simple triangle:

Code language: XML

  <path d="M10 80 L100 20 L190 80 Z" fill="lightblue" stroke="blue" stroke-width="2"/>

Moving and Drawing Lines#

Straight-line commands form the structural skeleton of every SVG path. Even the most complex icons are built on these primitives before curves are added.

MoveTo (M / m)#

The MoveTo command positions the pen without drawing. Every path must begin with a move command.

If multiple coordinate pairs are provided, the first pair moves the pen and the rest are treated as implicit LineTo commands.

Syntax:

• Absolute: M x y - move to absolute coordinates (x,y)

• Relative: m dx dy - move relative to current position

Mental model:

Lift the pen, move to a location, don’t draw.

Remember: As I covered in my Coordinate System deep-dive, (0,0) is always the top-left corner, and the Y-axis increases as you move down.

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 20 20" fill="#6366f1" />
</svg>

Path Command: M (MoveTo)

LineTo (L / l)#

Draws a straight line from the current position to the specified point.

Syntax:

• Absolute: L x y

• Relative: l dx dy

Implicit Behavior:

M10 10 L20 20 30 30 40 40

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M10 10 L20 20 30 30 40 40" fill="none" stroke="#6366f1" stroke-width="1" stroke-linecap="round" />
</svg>

This draws three lines without repeating L

Path Command: L (LineTo)

Horizontal LineTo (H / h)#

Draws a horizontal line while keeping the current y value unchanged.

Syntax:

• Absolute: H x

• Relative: h dx

When to use:

• Pixel-perfect edges

• UI shapes

• Charts and grids

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 10 50 H 90" stroke="#10b981" stroke-width="1" fill="none" stroke-linecap="round" />
</svg>

Path Command: H (Horizontal)

Vertical LineTo (V / v)#

Draws a vertical line while keeping the current x value unchanged.

Syntax:

• Absolute: V y

• Relative: v dy

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 50 10 V 90" stroke="#f43f5e" stroke-width="1" fill="none" stroke-linecap="round" />
</svg>

Path Command: V (Vertical)

ClosePath (Z / z)#

Closes the current sub-path by drawing a straight line back to the starting point of the last M.

• No coordinates required

• Resets the current point

• Essential for filled shapes

z and Z perform the exact same action, unlike other commands.

Mental model:

Connect back to where this shape started.

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 20 80 L 50 20 80 80 Z" fill="#6366f1" fill-opacity="0.2" stroke="#6366f1" stroke-width="1" />
</svg>

Path Command: Z (ClosePath)

Absolute vs. Relative Coordinates#

This is one of the most important “secrets” of SVG paths. The casing of the letter command changes how the browser interprets the numbers:

• UPPERCASE (e.g., L 50 50): Absolute coordinates. “Draw a line to exactly the coordinate (50, 50) on the grid.”

• lowercase (e.g., l 50 50): Relative coordinates. “Draw a line 50 units right and 50 units down from where the pen currently is.”

Pro Tip: Relative coordinates are often easier for manual coding because you don’t have to keep track of the total grid math—you only need to know how far the next point is from the last one.

Why professionals prefer relative commands:

• Easier manual editing

• Cleaner exports

• Better compression

Mastering the Curves#

Straight lines define structure, but curves define personality. SVG paths support bézier curves and arcs, which allow smooth, organic, and professional-looking shapes.

SVG uses two types of bézier curves and elliptical arcs.

Quadratic Bézier (Q / q)#

A Quadratic Bézier curve is defined using one control point and one end point. The curve bends toward the control point but never passes through it.

This type of curve is simpler and lighter than cubic béziers, making it useful for gentle curves and wave-like shapes.

Syntax:

• Absolute: - Q x1 y1, x y (Control point, End point)

• Relative: - q dx1 dy1 dx dy

Mental model:

• Start point → curve bends toward control point → ends at end point

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 10 50 Q 50 10 90 50" fill="none" stroke="#ec4899" stroke-width="1" />
</svg>

Path Command: Q (Quadratic Bézier)

Smooth Quadratic Bézier (T / t)#

The T command is a shortcut that continues a quadratic curve smoothly.

It automatically reflects the previous control point, so you only specify the new end point.

⚠️ T only works after a Q or another T.

Syntax:

• Absolute: - T x y

• Relative: - t dx dy

Why it matters:

• Perfect for waves, flowing strokes, and handwriting-style paths

• Eliminates repeated control-point math

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 10 50 Q 30 10 50 50 T 90 50" fill="none" stroke="#ec4899" stroke-width="1" />
</svg>

Path Command: T (Smooth Quadratic Bézier)

Cubic Bézier (C / c)#

Cubic Bézier curves are the most powerful and commonly used curve type. They use two control points, allowing complex “S” curves and precise shaping.

This is the curve type used by design tools like Figma, Illustrator, and Sketch.

Syntax:

• Absolute: - C x1 y1 x2 y2 x y (First control, Second control, End point)

• Relative: - c dx1 dy1 dx2 dy2 dx dy

Mental model:

• First control point controls the curve’s entry direction

• Second control point controls the curve’s exit direction

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 10 50 C 30 10 70 90 90 50" fill="none" stroke="#6366f1" stroke-width="1" />
</svg>

Path Command: C (Cubic Bézier)

Smooth Cubic Bézier (S / s)#

The S command creates a smooth continuation of a cubic bézier curve.

It automatically reflects the second control point of the previous C or S command, so only one control point is required.

⚠️ S only works after C or S.

Syntax:

• Absolute: - S x2 y2 x y

• Relative: s dx2 dy2 dx dy

Why it matters:

• Reduces path complexity

• Ideal for flowing icons and symmetrical curves

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 10 50 C 20 10 40 10 50 50 S 80 90 90 50" fill="none" stroke="#6366f1" stroke-width="1" />
</svg>

Path Command: S (Smooth Cubic Bézier)

Elliptical Arc (A / a)#

The Arc command draws a portion of an ellipse between two points. It is commonly used for circles, rounded corners, and curved UI shapes.

Syntax:

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

• Relative: - a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

Parameter	Meaning
rx ry	X and Y radius of the ellipse
x-axis-rotation	Rotation of ellipse (degrees)
large-arc-flag	0 = small arc, 1 = large arc
sweep-flag	0 = counter-clockwise, 1 = clockwise
x y	End point of the arc

Example:

Code language: XML

<svg viewBox="0 0 100 100">
  <path d="M 20 50 A 30 20 0 0 1 80 50" fill="none" stroke="#10b981" stroke-width="1" />
</svg>

Path Command: A (Elliptical Arc)

Why arcs feel complex:

• Flags (0 / 1) control which arc is drawn

• SVG chooses between four possible arcs

Reading a Path#

When you look at a complex path exported from a design tool, it looks like gibberish: d="M10 80 Q 95 10 180 80 T 330 80"

Don’t panic. Break it down step-by-step:

1. M10 80: Put the pen at (10, 80).

2. Q 95 10 180 80: Draw a curve toward (95, 10) that ends at (180, 80).

3. T 330 80: “T” is a shortcut that continues the previous curve smoothly to a new end point.

Path Commands Overview#

Here is a complete list of path commands:

Command	Type	Coordinates	Description
M / m	MoveTo	x y	Moves cursor without drawing.
L / l	LineTo	x y	Draws a line to given point
H / h	Horizontal LineTo	x	Draws horizontal line
V / v	Vertical LineTo	y	Draws vertical line
Z / z	ClosePath	-	Closes path by connecting to start
Q / q	Quadratic Bézier	x1 y1 x y	Curve with 1 control point
T / t	Smooth Quadratic Bézier	x y	Quadratic with control point inferred
C / c	Cubic Bézier	x1 y1 x2 y2 x y	Curve with 2 control points
S / s	Smooth Cubic Bézier	x2 y2 x y	Cubic with first control point inferred
A / a	Elliptical Arc	rx ry x-axis-rotation large-arc-flag sweep-flag x y	Draws elliptical arc

Combining Commands#

Paths allow multiple commands in one d attribute:

Code language: XML

<path d="M20 80 Q100 10, 180 80 T340 80" stroke="purple" fill="none"/>

• Mix of move, line, curve, arc

• Creates complex shapes in a single element

Practical Example: Heart Shape#

Code language: XML

<path d="M10 30
         A20 20 0 0 1 50 30
         A20 20 0 0 1 90 30
         Q90 60 50 90
         Q10 60 10 30 Z"
      fill="red" stroke="black"/>

• Combines arcs (A) + quadratic béziers (Q)

• Closed path forms a heart shape

Practical Example: The Heart Shape

Tips for Using Paths#

1. Start with MoveTo (M).

2. Use Z to closed shapes.

3. Prefer H and V for straight edges

4. Plan control points for curves visually.

5. Use relative commands for repeated patterns.

6. Use fill-rule="evenodd" for overlapping complex shapes.

7. Combine arcs, lines, and curves for icons or illustrations.

8. Keep strokes visible during debugging (fill="none")

Summary#

While we used <rect> and <circle> in the previous post for simple geometry, you now have the power to create any custom, organic shape using a single <path>.

The <path> element is arguably the most efficient way to store complex visual data. While we rarely code massive paths by hand, understanding these commands allows you to:

• Optimize: Clean up messy code exported from design tools.

• Animate: Use CSS to animate the stroke-dashoffset or change the d attribute values via JavaScript.

• Fix Layouts: Quickly adjust a coordinate without reopening a design app.

Table of contents

I hope you found this post informative and helpful. It took a lot of work to create, and I’m thrilled to finally share it with the world. Thank you for reading. 💖

Page view counter

# of hits

Related Posts

• SVG Essentials: Mastering Shapes, Coordinates, and Styling

  Build sharp, scalable graphics with basic shapes.

  Learn how to build resolution-independent web graphics. Master SVG coordinates, the viewBox, and essential shapes like circles, rectangles, and polygons.

• Mastering JavaScript Operators: A Complete Guide with Examples

  Transform, compare, assign—write cleaner code.

  A complete breakdown of all JavaScript operators including arithmetic, logical, assignment, comparison, bitwise, and special operators with syntax and real-world examples.

• An Interactive Guide to CSS Transitions

  Craft high-performance, responsive UI motion with CSS transitions and transforms

  Master CSS transitions for responsive UI. Learn to use duration, delay, timing-function, and transform for GPU-accelerated performance and smooth micro-interactions.