SVG <polyline> Element

Beginner
⏱️ 10 min read
📚 Updated: Aug 2026
🎯 5 Examples
🚀 5 Try-it labs
Basic Shape
SVG Polyline tutorial illustration showing points attribute and connected line segments
Overview

What You’ll Learn

SVG’s <polyline> draws an open chain of straight segments by connecting multiple points. This tutorial covers the points attribute, stroke styling (stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray), responsive viewBox usage, five worked examples, and how <polyline> compares to <polygon>, <line>, and <path>.

<polyline>

Core element

Place <polyline> inside an <svg> to draw connected segments.

points

Vertex list

Space-separated x,y pairs define each corner of the path.

Open path

Not closed

Unlike <polygon>, the last point does not connect back to the first.

Stroke

Required paint

Polylines have no fill area — set stroke and stroke-width to see them.

Caps & Joins

linecap / linejoin

Round or bevel corners and end caps for smoother polylines.

viewBox

Responsive

Scale chart lines and connectors cleanly with a viewBox and CSS sizing.

Introduction

SVG’s <polyline> connects a series of straight segments through a list of points. It powers line charts, zig-zag connectors, route paths, and custom stroke shapes that are not closed.

Like <line>, a polyline has no meaningful fill area when open. Visibility comes entirely from presentation attributes like stroke and stroke-width — forget those and nothing appears.

Why it matters?

One element replaces many stacked <line> tags. Polylines stay sharp at any zoom, animate cleanly, and style with the same stroke tools as other SVG shapes.

Key Highlights

Points List

A flat points attribute defines every vertex in order.

Stroke Only

Use fill="none" — colour and thickness come from stroke attributes.

Caps & Joins

Control ends with stroke-linecap and corners with stroke-linejoin.

Scales With viewBox

One drawing scales to any CSS size without rewriting points.

In short: list your points, set fill="none", then paint the stroke — that’s the foundation of SVG polylines.

Foundation

📝 Syntax

Basic form of the SVG polyline element:

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

Attributes

AttributeTypeDescription
pointsListSpace-separated x,y pairs for each vertex. Required.
fillPaintUsually none for open polylines.
strokePaintLine colour — required for the polyline to be visible.
stroke-widthLength / numberThickness of the stroke in user units.
stroke-linecapKeywordbutt, round, or square end caps.
stroke-linejoinKeywordmiter, round, or bevel at corners.
stroke-dasharrayListDash and gap lengths for dashed or dotted polylines.

What It Draws

ResultDetails
open polylineRenders a connected chain of straight segments through the listed points — the path stays open.

Minimal workflow

index.html
<svg width="200" height="200" viewBox="0 0 200 200">
  <polyline points="50,50 100,25 150,50 125,100 75,100"
            fill="none" stroke="#0f172a" stroke-width="2" />
</svg>

Coordinate tips

IdeaDetailNotes
Origin(0, 0) is top-lefty grows downward
VisibilityNeeds strokestroke-width of 0 hides it
Minimum pointsTwo x,y pairsOne pair is a dot; two pairs draw one segment
Closed shapeRepeat first pointOr use <polygon> instead
Cheat Sheet

⚡ Quick Reference

GoalCode
Basic polyline<polyline points="50,50 100,25 150,50" fill="none" stroke="#0f172a" stroke-width="2" />
Thick strokestroke-width="6"
Rounded ends & cornersstroke-linecap="round" stroke-linejoin="round"
Dashed polylinestroke-dasharray="8 6"
Chart with dotsPolyline + <circle> at each vertex
Responsive SVG<svg viewBox="0 0 200 200">... + CSS width
Compare

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

All can create edges — pick the simplest element that fits.

<polyline>
open chain

Connected straight segments through a points list

<polygon>
closed shape

Auto-closes — last point connects to first

<line>
one segment

Single straight stroke between two points

<path>
any shape

Curves, arcs, and mixed commands — most flexible

Context

When to Use <polyline>

Reach for <polyline> whenever you need multiple connected straight segments in one element.

  1. Line charts

    Plot data trends by connecting values with straight segments.

  2. Zig-zag connectors

    Route lines around obstacles in diagrams and UI flows.

  3. Diagram edges

    Multi-segment links between nodes in flow charts.

  4. Dashed guides

    Annotation lines, cut lines, and temporary paths.

  5. Not for one segment

    A single straight edge is simpler with <line>.

Key benefit: one element, one points list — the lightest multi-segment stroke in SVG.

Hands-On

Examples Gallery

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

📚 Getting Started

Draw a five-point polyline, then style corners and caps.

Example 1 — Basic 5-Point Polyline

Draw a five-point open shape inside a 200×200 canvas. Use fill="none" because the path stays open.

index.html
<svg width="200" height="200">
  <polyline points="50,50 100,25 150,50 125,100 75,100"
            fill="none" stroke="#0f172a" stroke-width="2" />
</svg>
Try It Yourself

How It Works

Each x,y pair is a vertex. The browser connects them in order with straight segments. Without stroke, the polyline is invisible.

Example 2 — Zig-Zag With Round Caps and Joins

Add stroke-linecap="round" and stroke-linejoin="round" for smoother zig-zag connectors.

index.html
<svg width="220" height="80">
  <polyline points="10,50 50,20 90,50 130,20 170,50 210,30"
            fill="none" stroke="#3b82f6" stroke-width="4"
            stroke-linecap="round" stroke-linejoin="round" />
</svg>
Try It Yourself

How It Works

stroke-linecap rounds the open ends, and stroke-linejoin rounds the corners where segments meet — ideal for friendly UI connectors.

📈 Practical Patterns

Charts, dashed connectors, and responsive sizing.

Example 3 — Chart-Style Polyline With Data Points

Draw a trend line and add <circle> elements at each vertex to mark data points.

index.html
<svg width="220" height="100" viewBox="0 0 220 100">
  <polyline points="20,70 55,55 90,62 125,35 160,42 195,22"
            fill="none" stroke="#10b981" stroke-width="3"
            stroke-linecap="round" stroke-linejoin="round" />
  <circle cx="20" cy="70" r="4" fill="#10b981" />
  <circle cx="55" cy="55" r="4" fill="#10b981" />
  <circle cx="90" cy="62" r="4" fill="#10b981" />
  <circle cx="125" cy="35" r="4" fill="#10b981" />
  <circle cx="160" cy="42" r="4" fill="#10b981" />
  <circle cx="195" cy="22" r="4" fill="#10b981" />
</svg>
Try It Yourself

How It Works

The polyline draws the trend; circles highlight each sample. In real charts you might generate both from the same data array.

Example 4 — Dashed Connector

Use stroke-dasharray for dashed annotation lines and multi-segment connectors.

index.html
<svg width="220" height="80">
  <polyline points="10,20 70,20 70,60 200,60"
            fill="none" stroke="#b45309" stroke-width="4"
            stroke-linecap="round" stroke-linejoin="round"
            stroke-dasharray="8 6" />
</svg>
Try It Yourself

How It Works

8 6 means 8 units on, 6 off along the entire path — including corners. Round joins keep dashes smooth at bends.

Example 5 — Responsive Polyline With viewBox

Define coordinates in a viewBox, then let CSS control the displayed size.

index.html
<style>
  .chart-line { width: 180px; height: auto; display: block; }
</style>

<svg class="chart-line" viewBox="0 0 160 48"
     role="img" aria-label="Responsive trend line">
  <polyline points="12,34 38,28 64,32 90,18 116,22 142,12"
            fill="none" stroke="#2563eb" stroke-width="3"
            stroke-linecap="round" stroke-linejoin="round" />
</svg>
Try It Yourself

How It Works

The viewBox maps user units to whatever CSS size you give the SVG. Change .chart-line { width } and the polyline scales without rewriting points.

Use Cases

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

1. Line Charts

Trend lines connecting data values over time.

Example: stock price or analytics sparkline.

2. Zig-Zag Routes

Connectors that bend around layout obstacles.

Example: cable path in a diagram.

3. Flow-Chart Edges

Multi-segment links between process nodes.

Example: L-shaped connector between boxes.

4. Annotation Lines

Dashed guides, cut lines, and callout stems.

Example: dashed leader to a label.

5. Icon Strokes

Multi-segment strokes in custom icons.

Example: lightning bolt or mountain outline.

6. Education

Geometry demos showing connected vertices.

Example: interactive point-to-point paths.

Pro Tip: for a closed filled shape, switch to <polygon> instead of repeating the first point on a polyline.

Advantages

Why draw multi-segment paths with SVG polylines.

  1. 1. One Element, Many Segments

    Replace stacks of <line> tags with a single points list.

  2. 2. Resolution Independent

    Stays sharp on retina screens without extra assets.

  3. 3. Rich Stroke Styling

    Caps, joins, dashes, and colours via attributes or CSS.

  4. 4. Compact Markup

    A flat points string is easy to read and generate from data.

  5. 5. Easy to Animate

    Animate stroke-dashoffset for draw-on path effects.

Pro Tip: for UI icons, stroke="currentColor" lets polylines inherit the parent text colour for theming.

Usage Tips

Follow these practices for clean, scalable SVG polylines.

  1. 1. Always Set a Stroke

    Polylines are invisible without stroke and a positive stroke-width.

  2. 2. Use fill="none"

    Open polylines have no interior — set fill="none" explicitly.

  3. 3. Round Joins for Charts

    stroke-linejoin="round" softens sharp corners on trend lines.

  4. 4. Keep Points Readable

    Use consistent spacing in the points string for easier debugging.

  5. 5. Use viewBox for Scaling

    Define geometry once, then size the SVG with CSS.

Pro Tip: generate the points string from JavaScript when plotting live data — one template handles any number of vertices.

Common Pitfalls

Avoid these mistakes when your polyline refuses to show up.

  1. 1. Missing stroke

    A polyline with no stroke paint is invisible.

    → Always set stroke and a non-zero stroke-width.

  2. 2. Expecting Auto-Close

    <polyline> stays open — unlike <polygon>.

    → Use <polygon> for closed shapes, or repeat the first point.

  3. 3. Outside the ViewBox

    Vertices outside the canvas get clipped or disappear.

    → Keep all points inside the SVG size or viewBox.

  4. 4. Malformed Points String

    Missing commas or odd numbers break the coordinate pairs.

    → Each point must be x,y with pairs separated by spaces.

  5. 5. Using Polyline for One Segment

    A two-point polyline works, but <line> is simpler.

    → Prefer <line> for a single straight edge.

Pro Tip: if a polyline vanishes, check stroke, stroke-width, and whether all points sit inside the viewBox — those three catch most issues.

🧠 How <polyline> Is Drawn

1

List the points

Set points to space-separated x,y pairs — each pair is a vertex on the canvas.

points
2

Connect segments in order

The browser draws straight lines from the first point to the second, then to the third, and so on — the path stays open.

Segments
3

Set fill to none

Open polylines have no interior area. Use fill="none" so only the stroke renders.

Open
4

Add stroke paint

Set stroke and stroke-width. Style caps, joins, and dashes as needed.

Paint
=

A crisp, scalable path

The browser draws the vector live from your points and stroke paint — sharp at every zoom level.

Important Notes

  • <polyline> needs stroke — there is no fill area on an open path.
  • SVG origin is the top-left; positive y goes down.
  • stroke-linejoin values: miter, round, bevel.
  • stroke-dasharray creates dashed and dotted polylines.
  • Need a closed filled shape? Use <polygon>.
  • Pair with viewBox when chart lines must scale responsively.

Quick Takeaway: points list + fill="none" + stroke paint. Keep vertices inside the viewBox, and use CSS sizing for responsive charts.

Compatibility

Browser Support

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

✓ SVG 1.1+

SVG &lt;polyline&gt;

Usein inline SVG or external .svg files. The points attribute and stroke properties 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
<polyline> 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 <polyline> is the go-to element for open multi-segment strokes: list your points, set fill="none", then paint with stroke and stroke-width.

Practice the five examples above, then continue to SVG Path when you need curves, arcs, and the full drawing command set.

Always set a stroke, use round joins for charts, and pair with viewBox when the line must scale with the layout.

View Examples Gallery Continue to Path
Pro Tips

💡 Best Practices

✅ Do

  • Always set a stroke on <polyline> elements
  • Use fill="none" for open paths
  • Apply stroke-linejoin="round" for smoother chart lines
  • Generate points from data for dynamic charts
  • Use a viewBox when the graphic must scale

❌ Don’t

  • Forget stroke and wonder why nothing appears
  • Expect a polyline to auto-close like <polygon>
  • Use fill expecting a closed shape area
  • Stack many <line> tags when one polyline would do
  • Hard-code pixel sizes when you need a responsive chart
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG <polyline>

Draw connected segments the SVG way.

5
Core concepts
➜ 01

<polyline>

Open multi-segment path

API
xy 02

points

Space-separated x,y pairs

Geometry
✎ 03

Stroke

Required to see it

Paint
● 04

Joins

linecap & linejoin

Style
🗺 05

viewBox

Scales cleanly

Responsive
🎯 You’re ready to draw with SVG <polyline>
Review Quick Reference →

❓ Frequently Asked Questions

Use the <polyline> element and provide a points attribute containing x,y pairs. Style it using stroke and stroke-width. Example: <polyline points="50,50 100,25 150,50" fill="none" stroke="black" stroke-width="2" />.
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.
A polyline is open (it does not automatically close). A polygon is closed (it connects the last point back to the first).
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.
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 <polygon> instead.
Use <polyline> for a chain of connected straight segments defined by a points list. Use <line> for a single segment between two points, and <path> when you need curves, arcs, or mixed commands.

Did you Know? 🔊

An SVG <polyline> is an open chain of connected straight segments — it does not auto-close like <polygon>. Without stroke (and a non-zero stroke-width), the polyline is invisible. You can animate stroke-dashoffset on a polyline to create draw-on path effects — popular for chart reveals and signature animations.

Continue to SVG Path

Learn how the d attribute unlocks curves, arcs, and any shape you can imagine.

Path tutorial →

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)

8 people found this page helpful

SVG Polygon SVG Path