SVG Polyline
On this page, you can find information about the SVG <polyline> element, see its usage with our different examples, and try to create one for yourself.
The SVG <polyline> element draws a series of connected straight-line segments through a list of points. Think of it as "connect the dots" with a single continuous stroke: you give it coordinates, and it draws a line from each point to the next. It is ideal for line charts, zig-zags, sparklines, and any open multi-segment outline.
This page explains the points syntax, the one styling rule every beginner gets wrong (fill:none), how <polyline> differs from a closed <polygon>, and how to control the look of corners and line ends. For the full SVG basic-shapes family, see the SVG Reference.
Description of the <polyline> element
The SVG <polyline> element creates a shape consisting of only straight lines that connect multiple points. Unlike the <polygon> element — which automatically draws a closing segment back to the first point to form a sealed shape — a <polyline> is an open shape: the last point is not joined back to the first. If you need a closed outline (a triangle, hexagon, star), reach for <polygon>. For freeform shapes with curves, use <path>.
The most important rule: set fill:none
By default, every SVG shape is filled with solid black (fill:black). For a closed shape that makes sense, but a <polyline> is open — and SVG still fills it by drawing an imaginary closing edge and flooding the enclosed area with black. This is the single most common beginner mistake: you expect a thin line and instead get a black blob.
The fix is to explicitly turn the fill off with fill:none and rely on stroke to make the line visible:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- WRONG: no fill set, so SVG floods the open shape with black -->
<polyline points="20,20 60,80 100,20 140,80 180,20"
style="stroke:purple;stroke-width:4" />
<!-- RIGHT: fill:none leaves a clean line -->
<polyline points="220,20 260,80 300,20 340,80 380,20"
style="fill:none;stroke:purple;stroke-width:4" />
</svg>
</body>
</html>Almost every <polyline> you write should include fill:none.
Example of the SVG <polyline> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>The points syntax
The points attribute is a flat list of absolute coordinate pairs, written as x,y. The points are drawn in the order you list them, and each x,y is measured from the top-left corner of the SVG's coordinate system (x grows right, y grows down).
SVG is forgiving about the separators between numbers — commas and whitespace are interchangeable. All of these define the same three points:
points="30,30 50,35 70,50"
points="30 30 50 35 70 50"
points="30,30, 50,35, 70,50"A common, readable convention is to put a comma inside each pair and a space between pairs, as in points="30,30 50,35 70,50". You need an even number of coordinates; an odd one is an error.
Example of the SVG <polyline> element with straight lines:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Here the staircase looks fine because fill:white happens to match the page background — but that is a trap. On a colored or patterned background, the white fill of the open shape would show through. Using fill:none is the robust choice.
Example with stroke-linecap and stroke-linejoin:
Two presentation properties control the look of a stroked polyline: stroke-linecap shapes the two open ends of the line (butt, round, or square), and stroke-linejoin shapes the corners where segments meet (miter, round, or bevel). They are most visible on thick strokes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- Sharp default: square ends, mitered corners -->
<polyline points="20,40 80,140 140,40"
style="fill:none;stroke:teal;stroke-width:16;
stroke-linecap:butt;stroke-linejoin:miter" />
<!-- Soft: rounded ends and rounded corners -->
<polyline points="200,40 260,140 320,40"
style="fill:none;stroke:tomato;stroke-width:16;
stroke-linecap:round;stroke-linejoin:round" />
</svg>
</body>
</html>Compare the pointed corner of the left (teal) line with the smooth corner of the right (tomato) one. To explore these and other stroke options in depth, see SVG Stroking.
Attributes specific to <polyline>
Only two attributes genuinely belong to the <polyline> element itself — the rest of what you set on it (fill, stroke, stroke-width, and so on) are presentation properties inherited from SVG's general presentation model, covered separately below.
| Attribute | Description |
|---|---|
| points | The list of points (pairs of x,y absolute coordinates) that define the polyline. This is the only required attribute. |
| pathLength | The total length of the line in user units, used to calibrate stroke effects (such as dashes). |
Presentation properties (inherited, not polyline-specific)
fill, stroke, stroke-linecap, and stroke-linejoin are not unique to <polyline> — they are CSS presentation properties that apply to most SVG graphics elements and can be set either as XML attributes (stroke="purple") or via CSS (style="stroke:purple"). They are inherited and overridable like any other CSS, which is why they are listed here rather than as element attributes.
| Property | Description |
|---|---|
| fill | The color used to flood the (auto-closed) interior. Set fill:none for an open line. |
| stroke | The color of the line itself. |
| stroke-width | The thickness of the line. |
| stroke-linejoin | The type of corner created where two segments meet: miter, round, or bevel. |
| stroke-linecap | The shape of the open line ends: butt, round, or square. |
The SVG <polyline> element also supports the Global Attributes and Event Attributes.