When should I use instead of line, polyline, polygon, or rect?

Use when you need curves, arcs, or mixed commands in one shape. Use simpler elements ( , , , ) when their dedicated attributes are enough — they are easier to read and maintain.

SVG <path> Element

Beginner

⏱️ 12 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Drawing

SVG Path tutorial illustration showing path commands, curves, and arcs

Overview

What You’ll Learn

SVG’s <path> is the most versatile shape element. This tutorial covers the d attribute, core commands (M, L, H, V, C, Q, A, Z), fill and stroke styling, five worked examples, and how <path> compares to simpler SVG shapes.

<path>

Core element

One element draws lines, curves, arcs, icons, and complex shapes.

d attribute

Path data

A compact string of commands and coordinates that defines the shape.

M, L, H, V

Lines

Move the pen and draw straight segments in any direction.

C & Q

Bézier curves

Cubic and quadratic curves bend paths with control points.

A & Z

Arc & close

Elliptical arcs for rounded segments; Z closes the shape for fills.

Fill & Stroke

Paint

Style open strokes or closed filled regions with presentation attributes.

Introduction

SVG’s <path> is the Swiss Army knife of vector graphics. While <line>, <rect>, and <circle> cover common primitives, the path element can express anything they can — plus curves, arcs, and custom icons.

Everything lives in the d attribute: a mini language of single-letter commands followed by coordinates. Uppercase letters use absolute positions; lowercase letters use relative offsets from the current point.

Why it matters?

Most SVG icon sets, logos, and illustrations are built from paths. Mastering d unlocks the full expressive power of SVG — from a simple arrow to a detailed map outline.

Key Highlights

One Attribute

The entire shape is defined by the d string.

Lines & Curves

Mix straight segments, Bézier curves, and elliptical arcs.

Icons & Logos

Export paths from design tools or hand-write simple shapes.

Scales With viewBox

Paths stay crisp at any size inside a responsive SVG.

In short: start with M, draw with line and curve commands, close with Z when you need a fill — that’s the foundation of SVG paths.

Foundation

📝 Syntax

Basic form of the SVG path element:

index.html

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M 50 50 L 150 50 L 150 150 Z"
        fill="#60a5fa" stroke="#1e3a8a" stroke-width="2" />
</svg>

Attributes

Attribute	Type	Description
`d`	Path data string	Commands and coordinates that define the shape. Required for any visible path.
`fill`	Paint	Interior colour for closed paths. Defaults to black; use `none` for stroke-only.
`stroke`	Paint	Outline colour. Required when `fill="none"`.
`stroke-width`	Length / number	Thickness of the outline in user units.
`stroke-linecap`	Keyword	`butt`, `round`, or `square` end caps on open paths.
`stroke-linejoin`	Keyword	`miter`, `round`, or `bevel` at corners.
`fill-rule`	Keyword	`nonzero` or `evenodd` — how overlapping regions fill.

Core Path Commands

Command	Name	Parameters
`M / m`	Move to	`x y` — pen up, move to point (start every sub-path)
`L / l`	Line to	`x y` — straight line to point
`H / h`	Horizontal line	`x` — horizontal line to x
`V / v`	Vertical line	`y` — vertical line to y
`C / c`	Cubic Bézier	`x1 y1 x2 y2 x y` — two control points + end point
`Q / q`	Quadratic Bézier	`x1 y1 x y` — one control point + end point
`A / a`	Elliptical arc	`rx ry x-axis-rotation large-arc sweep x y`
`Z / z`	Close path	No parameters — line back to sub-path start

Minimal workflow

index.html

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M 40 50 L 140 50 C 100 90 190 90 150 140"
        fill="none" stroke="#0f172a" stroke-width="3" stroke-linecap="round" />
</svg>

Coordinate tips

Idea	Detail	Notes
Origin	`(0, 0)` is top-left	y grows downward
Uppercase	Absolute coords	Relative to SVG origin
Lowercase	Relative coords	Relative to current point
Visibility	Needs fill or stroke	`fill="none"` without stroke hides the path

Cheat Sheet

⚡ Quick Reference

Goal	Code
Move to point	`M 10 10`
Line to point	`L 50 50`
Horizontal line	`H 100`
Vertical line	`V 80`
Cubic curve	`C 20 20 80 80 100 50`
Quadratic curve	`Q 50 10 100 50`
Elliptical arc	`A 30 30 0 0 1 100 50`
Close shape	`Z`
Stroke-only path	`fill="none" stroke="#0f172a" stroke-width="2"`
Filled closed path	`fill="#60a5fa" stroke="#1e3a8a" stroke-width="2"`

Compare

📋 `<path>` vs `<line>` vs `<polyline>` vs `<polygon>` vs `<rect>`

Pick the simplest element that fits — use <path> when dedicated shapes are not enough.

<path>

any shape

Lines, curves, arcs, icons — the most flexible option

<line>

one segment

Straight stroke between two points — simpler markup

open chain

Connected straight segments without closing

closed polygon

Closed straight-edged shapes from a point list

<rect>

rectangle

Axis-aligned boxes — not for curves or custom icons

Context

When to Use `<path>`

Reach for <path> when simpler SVG elements cannot express the shape you need.

Icons & logos
Custom glyphs, brand marks, and UI icon sets.
Curved strokes
Bézier curves for smooth connectors, waves, and illustrations.
Arcs & rounded segments
Elliptical arcs for pie charts, gauges, and rounded UI elements.
Data visualization
Custom chart areas, map outlines, and annotation shapes.
Not for simple lines
For one straight segment, prefer <line> — clearer markup.

Key benefit: one d attribute can replace many other shape elements and power entire icon libraries.

Hands-On

Examples Gallery

Five starter snippets using <path>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Straight segments, cubic curves, and closed fills.

Example 1 — Line + Cubic Bézier Curve

Move to a point, draw a line, then bend with a cubic Bézier using two control points (M L C).

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

How It Works

M 40 50 moves the pen. L 140 50 draws a horizontal line. C 100 90 190 90 150 140 curves through two control points to the end — the classic introduction to path curves.

Example 2 — Closed Shape (Fill + Stroke)

Build a custom polygon-like shape and close it with Z so fill works as expected.

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>

Try It Yourself

How It Works

Each L adds a corner. Z draws a straight line back to the start point, creating a closed region that can be filled.

📈 Practical Patterns

Quadratic curves, arcs, and icon paths.

Example 3 — Quadratic Curve

Use the Q command with one control point for a simpler curve than cubic Bézier.

index.html

<svg width="240" height="120" viewBox="0 0 240 120">
  <path d="M 30 80 Q 120 10 210 80"
        fill="none" stroke="#10b981" stroke-width="4" stroke-linecap="round" />
</svg>

Try It Yourself

How It Works

Q 120 10 210 80 pulls the curve toward control point (120, 10) before ending at (210, 80). Quadratic curves need fewer numbers than cubic — good for simple bends.

Example 4 — Elliptical Arc

The A command draws an elliptical arc segment — useful for gauges, pie slices, and rounded connectors.

index.html

<svg width="240" height="120" viewBox="0 0 240 120">
  <path d="M 40 80 A 80 50 0 0 1 200 80"
        fill="none" stroke="#6d28d9" stroke-width="4" stroke-linecap="round" />
</svg>

Try It Yourself

How It Works

A rx ry x-axis-rotation large-arc sweep x y — here 80 50 sets ellipse radii, 0 0 1 picks the smaller arc sweeping clockwise, and the path ends at (200, 80).

Example 5 — Heart Icon With Fill

A closed path built from cubic curves — the kind of shape exported from design tools for icon sets.

index.html

<svg width="240" height="200" viewBox="0 0 240 200">
  <path d="M 120 170 C 120 170 40 110 40 75
           C 40 45 70 35 95 55
           C 110 68 120 68 120 68
           C 120 68 130 68 145 55
           C 170 35 200 45 200 75
           C 200 110 120 170 120 170 Z"
        fill="#ef4444" stroke="#991b1b" stroke-width="2" stroke-linejoin="round" />
</svg>

Try It Yourself

How It Works

Two mirrored cubic curves form the lobes; Z closes the bottom point. This pattern — export from Figma/Illustrator or hand-tune — powers most SVG icon libraries.

Use Cases

Real-world places where SVG paths show up every day.

1. Icon Libraries

Feather, Heroicons, and custom UI glyphs.

Example: hamburger menu icon from three path strokes.

2. Logos & Brand Marks

Scalable company logos embedded inline.

Example: wordmark curve exported as a single path.

3. Charts & Maps

Area fills, map regions, and annotation overlays.

Example: filled area under a line chart.

4. Illustrations

Hand-drawn-style curves and organic shapes.

Example: wave divider between page sections.

5. Gauges & Progress

Arc segments for dials and circular progress.

Example: semi-circle gauge with A command.

6. Education

Teaching Bézier math, vector tools, and SVG internals.

Example: interactive control-point demos.

Pro Tip: export paths from design tools as optimized SVG, then simplify the d string for hand-edited tutorials.

Advantages

Why paths are the backbone of SVG graphics.

1. Unlimited Shapes
Lines, curves, arcs, and complex icons in one element.
2. Resolution Independent
Stays sharp on retina screens without extra assets.
3. Rich Styling
Fill, stroke, gradients, patterns, and filters all apply.
4. Compact for Icons
One path replaces many primitive elements in icon sets.
5. Easy to Animate
Animate stroke-dashoffset, morph d, or tween control points.

Pro Tip: for stroke-based icons, stroke="currentColor" lets paths inherit the parent text colour for theming.

Usage Tips

Follow these practices for clean, maintainable SVG paths.

1. Always Start With M
Every sub-path needs a move command before drawing begins.
2. Close Shapes With Z
Use Z when you want a reliable fill region.
3. Use viewBox for Scaling
Define geometry once, then size the SVG with CSS.
4. Debug With Stroke Only
Set fill="none" and a visible stroke while learning path data.
5. Prefer Simpler Elements When Possible
Use <rect> or <line> when they fit — clearer markup.

Pro Tip: add spaces or line breaks in the d string when teaching — readability matters more than byte count in tutorials.

Common Pitfalls

Avoid these mistakes when your path refuses to show up.

1. No Fill and No Stroke
A path with fill="none" and no stroke is invisible.
→ Set at least one of fill or stroke.
2. Malformed d Attribute
Missing numbers or wrong command order breaks rendering.
→ Validate with a viewer or SVG optimizer tool.
3. Outside the ViewBox
Path coordinates outside the canvas get clipped.
→ Adjust coordinates or expand the viewBox.
4. Forgetting to Close for Fills
Open paths may fill unexpectedly or not at all.
→ Add Z at the end when you need a filled region.
5. Overusing Path for Simple Shapes
A rectangle written as path data is harder to read than <rect>.
→ Pick the dedicated element when it covers your needs.

Pro Tip: if a path vanishes, check fill/stroke, then paste the d value into an SVG editor to spot malformed commands.

🧠 How `<path>` Is Drawn

Parse the d attribute

The browser reads the d string as a sequence of commands (M, L, C, etc.) and their numeric parameters.

Parse

Move with M, draw with L / H / V

M x y lifts the pen to the start. Line commands connect straight segments to build the skeleton.

Lines

Curve with C / Q and arc with A

Bézier commands bend the path through control points. The arc command adds elliptical segments for rounded shapes.

Curves

Close with Z and apply paint

Z closes the sub-path. Then fill and stroke paint the interior and outline.

Paint

Any shape you can imagine

The browser renders the path as live vector geometry — sharp at every zoom level.

Important Notes

The d attribute is the most powerful shape command in SVG.
SVG origin is the top-left; positive y goes down.
Uppercase = absolute coords; lowercase = relative to current point.
Z closes the current sub-path back to its start.
Need only straight segments? Try <polyline> or <line>.
Pair with viewBox when the graphic must scale responsively.

Quick Takeaway: start with M, draw with commands, close with Z for fills — then style with fill and stroke.

Compatibility

Browser Support

The SVG <path> element is supported in all modern browsers — and has been for many years — as part of SVG 1.1 path data.

✓ SVG 1.1+

SVG <path>

Usein inline SVG or external .svg files. The d attribute and all standard commands work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<path> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG <path> is the most flexible shape on the web: one d attribute draws lines, curves, arcs, icons, and complex closed regions.

Practice the five examples above, then continue to SVG Text to add labels and typography to your graphics.

Start with simple M L Z shapes, then add curves and arcs as you grow comfortable reading path data.

View Examples Gallery Continue to Text

Pro Tips

💡 Best Practices

✅ Do

Start every sub-path with M
Close shapes with Z when you need fills
Use fill="none" and a visible stroke while debugging
Prefer a viewBox for responsive icons
Use simpler elements when dedicated shapes are enough

❌ Don’t

Forget fill and stroke — the path will be invisible
Mix absolute and relative commands without reason
Copy-paste giant unformatted path data into tutorials
Use path when <rect> or <line> would be clearer
Hard-code pixel sizes when you need a responsive icon

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG `<path>`

Draw any shape the SVG way.

Core concepts

d 01

d attribute

Path data string

API

ML 02

Lines

M, L, H, V

Geometry

CQ 03

Curves

C & Q Bézier

Curves

AZ 04

Arc & close

A & Z

Shape

🗺 05

Fill & stroke

Paint the path

Style

❓ Frequently Asked Questions

What is the SVG path d attribute?

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.

What's the difference between uppercase and lowercase path commands?

Uppercase commands use absolute coordinates (relative to the SVG origin). Lowercase commands use relative coordinates (relative to the current point).

How do I close a path in SVG?

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.

Why is my path not visible?

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.

Can I use gradients or filters on paths?

Yes. Apply gradients via fill/stroke url(#id) and filters via filter="url(#id)" just like other SVG shapes.

When should I use <path> instead of line, polyline, polygon, or rect?

Use <path> when you need curves, arcs, or mixed commands in one shape. Use simpler elements (<line>, <polyline>, <polygon>, <rect>) when their dedicated attributes are enough — they are easier to read and maintain.

Did you Know? 🔊

The SVG <path> element’s d attribute is the most powerful shape command in SVG — one attribute can draw lines, curves, arcs, icons, and complex closed shapes that no other basic element can express. You can animate stroke-dashoffset on paths to create draw-on effects — a popular technique for loaders and signature animations.

Continue to SVG Text

Learn how to add labels, titles, and typography inside your SVG graphics.

Text tutorial →

About the author

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)

8 people found this page helpful

SVG Polyline SVG Text

SVG <path> Element

What You’ll Learn

<path>

d attribute

M, L, H, V

C & Q

A & Z

Fill & Stroke

Introduction

Why it matters?

One Attribute

Lines & Curves

Icons & Logos

Scales With viewBox

📝 Syntax

Attributes

Core Path Commands

Minimal workflow

Coordinate tips

⚡ Quick Reference

📋 <path> vs <line> vs <polyline> vs <polygon> vs <rect>

When to Use <path>

Icons & logos

Curved strokes

Arcs & rounded segments

Data visualization

Not for simple lines

Examples Gallery

📚 Getting Started

Example 1 — Line + Cubic Bézier Curve

How It Works

Example 2 — Closed Shape (Fill + Stroke)

How It Works

📈 Practical Patterns

Example 3 — Quadratic Curve

How It Works

Example 4 — Elliptical Arc

How It Works

Example 5 — Heart Icon With Fill

How It Works

Use Cases

1. Icon Libraries

2. Logos & Brand Marks

3. Charts & Maps

4. Illustrations

5. Gauges & Progress

6. Education

Advantages

1. Unlimited Shapes

2. Resolution Independent

3. Rich Styling

4. Compact for Icons

5. Easy to Animate

Usage Tips

1. Always Start With M

2. Close Shapes With Z

3. Use viewBox for Scaling

4. Debug With Stroke Only

5. Prefer Simpler Elements When Possible

Common Pitfalls

1. No Fill and No Stroke

2. Malformed d Attribute

3. Outside the ViewBox

4. Forgetting to Close for Fills

5. Overusing Path for Simple Shapes

🧠 How <path> Is Drawn

Parse the d attribute

Move with M, draw with L / H / V

Curve with C / Q and arc with A

Close with Z and apply paint

Any shape you can imagine

Important Notes

Browser Support

SVG &lt;path&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG <path>

📋 `<path>` vs `<line>` vs `<polyline>` vs `<polygon>` vs `<rect>`

When to Use `<path>`

🧠 How `<path>` Is Drawn

SVG <path>

Five things to remember about SVG `<path>`