SVG Polyline

Q: How do I draw a polyline in SVG?

Use the element and provide a points attribute containing x,y pairs. Style it using stroke and stroke-width. Example: .

Q: What format does the points attribute use?

points is a list of coordinate pairs like "10,10 50,10 50,50". Each pair is x,y and pairs are separated by spaces.

Q: What’s the difference between polyline and polygon?

A polyline is open (it does not automatically close). A polygon is closed (it connects the last point back to the first).

Q: Why is my polyline not visible?

Polylines need a stroke to be visible. If stroke is missing (or stroke-width is 0), nothing renders. Also ensure the points are within the viewBox.

Q: Can I fill a polyline?

A polyline is typically used as an open shape, so fill may not make sense unless you close it by repeating the first point at the end. For filled closed shapes, use instead.

Beginner

⏱️ 7 min read

📚 Updated: Aug 2025

🎯 1 Code Example

Points

SVG Polyline tutorial illustration showing connected line segments

What You’ll Learn

The SVG <polyline> element draws a series of straight line segments by connecting multiple points. It’s ideal for charts, zig-zags, connectors, and custom line shapes.

You’ll learn how the points attribute works, how to style polylines with stroke properties, and how polylines differ from polygons.

⚡ Quick Reference — SVG Polyline

Element <polyline>

An open multi-point line

Points points

Space-separated x,y pairs

Stroke stroke

Required to see the line

Stroke width stroke-width

Thickness in pixels

Dash pattern stroke-dasharray

Dashed or dotted polylines

Basic Syntax

<svg>
  <polyline points="x1,y1 x2,y2 x3,y3" fill="none" stroke="black" />
</svg>

👀 Live Preview — Common Polylines

Polylines are perfect for charts and zig-zag connectors.

Zig-zag

Polyline chart

Dashed connector

Complete HTML Example

This example draws a 5-point polyline and styles it with a black stroke. (A polyline is open, so we use fill="none".)

index.html

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200">
  <polyline points="50,50 100,25 150,50 125,100 75,100"
            fill="none" stroke="black" stroke-width="2" />
</svg>

</body>
</html>

Try It Yourself

💡 Best Practices

Do

Always set a visible stroke (polylines have no fill area by default)
Use stroke-linecap and stroke-linejoin for nicer corners
Keep point lists readable with consistent spacing
Use a viewBox for responsive charts and connectors
Use stroke-dasharray for dashed connectors

Don’t

Assume a polyline is closed (it stays open unless you close it)
Use fill expecting a closed shape—use <polygon> instead
Forget to keep points inside the SVG viewBox/canvas
Overuse too many points when a simpler shape works
Skip accessibility labels for meaningful charts or UI connectors

❓ Frequently Asked Questions

How do I draw a polyline in SVG?

Use <polyline> and provide a points list of x,y pairs. Style it with stroke and stroke-width.

What format does the points attribute use?

points is a list like "10,10 50,10 50,50". Each pair is x,y and pairs are separated by spaces.

What’s the difference between polyline and polygon?

A polyline is open and does not close automatically. A polygon is closed and connects the last point back to the first.

Why is my polyline not visible?

Polylines need a visible stroke. Also check that the points are inside the viewBox and that stroke-width is not zero.

Can I fill a polyline?

Usually no—polylines are open. If you want a filled closed shape, use <polygon>. If you really need fill, repeat the first point at the end to close the outline.

Add Depth with Radial Gradients

Next, learn how to create radial gradients for highlights, glows, and modern UI fills.

SVG Radial Gradients →

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)

4 people found this page helpful

SVG Polygon SVG Radial Gradients