SVG Path

Beginner
⏱️ 10 min read
📚 Updated: Aug 2025
🎯 2 Examples
Drawing
SVG Path tutorial illustration showing path commands and curves

What You’ll Learn

The SVG <path> element is the most powerful shape in SVG. With a single d attribute, you can draw lines, curves, arcs, icons, and complex shapes.

You’ll learn the most important path commands and how to read them, then build two practical examples: a line + curve path and a closed shape.

⚡ Quick Reference — Path Commands

Move M

Move to (x, y) without drawing

Line L

Line to (x, y)

Horizontal/Vertical H / V

Straight axis-aligned lines

Cubic curve C

Two control points + end point

Quadratic curve Q

One control point + end point

Arc A

Elliptical arc segment

Close Z

Close the shape

Basic Syntax
<svg>
  <path d="M 10 10 L 50 10 L 50 50 Z" />
</svg>

👀 Live Preview — Lines, Curves & Arcs

These previews help you visually connect commands to shapes.

Line + cubic curve
Closed shape
Arc (A)
1

Line + Cubic Bézier Curve

This matches the classic introduction: move to a point, draw a line, then draw a cubic Bézier curve using two control points.

index.html
<svg width="240" height="180" viewBox="0 0 240 180">
  <path d="M 40 50 L 140 50 C 100 90 190 90 150 140"
        fill="none" stroke="black" stroke-width="3" stroke-linecap="round" />
</svg>
Try It Yourself
2

Closed Shape (Fill + Stroke)

Close the path using Z so fill works as expected. This is the foundation of icons and custom shapes.

index.html
<svg width="240" height="160" viewBox="0 0 240 160">
  <path d="M 70 120 L 120 40 L 170 120 L 120 140 Z"
        fill="#60a5fa" stroke="#1e3a8a" stroke-width="3" stroke-linejoin="round" />
</svg>

🧠 How It Works

1

Start with M

M x y moves the pen to a point without drawing. Every path needs a starting point.

Move
2

Draw with L / H / V

Use straight-line commands to build the skeleton: L for any line, H for horizontal, V for vertical.

Lines
3

Curve with C / Q

Bézier curves use control points to bend the line. C is cubic (two control points) and Q is quadratic (one control point).

Curves
4

Close with Z

Z closes the path by drawing a straight line back to the start. Closing is important for proper fills.

Close
=

Any shape you can imagine

With a few commands, paths can replace many other SVG shapes and power icon sets, logos, and illustrations.

💡 Best Practices

Do

  • Use fill="none" and a visible stroke when debugging shapes
  • Prefer a viewBox so paths scale responsively
  • Keep paths readable (spaces/line breaks) in tutorials
  • Close shapes with Z when you want a filled region
  • Use consistent stroke widths across an icon set

Don’t

  • Mix absolute and relative commands without a reason (it gets confusing)
  • Forget that SVG coordinates start in the top-left corner
  • Assume a path will be visible without fill or stroke
  • Copy-paste giant unformatted path data into tutorials
  • Use many unnecessary decimals unless precision matters

❓ Frequently Asked Questions

The d attribute is a compact set of commands and numbers that describes how to draw a path. It can create lines, curves, arcs, and closed shapes.
Uppercase commands use absolute coordinates (relative to the SVG origin). Lowercase commands use relative coordinates (relative to the current point).
Use the Z (or z) command to close the shape by drawing a straight line back to the starting point. Closing helps fills render as expected.
Common causes: fill is set to none without a stroke, stroke-width is 0, the path is outside the viewBox, or the d value is malformed.
Yes. Apply gradients via fill/stroke like url(#id), and apply filters via filter="url(#id)", just like other SVG shapes.

Fill Shapes with Patterns

Next, learn how to define SVG patterns and apply them to paths, rectangles, and more.

SVG Patterns →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

SVG Links SVG Patterns