A stock chart line, the trace of an electrocardiogram signal, the broken line of a route on a map: whenever a series of points needs to be connected without ever closing the shape, <polyline> is the most direct element. It avoids having to write a long series of L commands inside a <path>.
It is one of the most useful elements for building a small line chart by hand, without depending on an external JavaScript library. It remains one of the few SVG elements where the simplicity of the markup genuinely rivals what much heavier charting libraries offer.
Definition
The <polyline> element draws a broken line made of straight segments connecting a series of points given in the points attribute, in the same format as a <polygon> (x,y pairs separated by spaces or commas). Unlike a polygon, the last point is never connected back to the first: the shape stays open, unless the coordinates of the starting point are explicitly repeated at the end of the list.
Main attributes
| Attribute | Role |
|---|---|
points | List of points connected in order, written as "x1,y1 x2,y2..." |
fill | Fill color (often set to "none" for a plain line) |
stroke, stroke-width | Color and thickness of the line's stroke |
The stroke-linecap and stroke-linejoin attributes strongly affect how a <polyline> renders: a round value softens the angles between each segment, giving a smoother, more readable line than the sharp default join.
Concrete rendering example
A small line chart representing a trend across five points, with no fill at all:
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="10,80 55,50 100,65 145,20 190,35" fill="none" stroke="#264653" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
</svg>Without fill="none", the browser would fill the inside of the line by default, as if it were a closed shape, producing an unreadable block of color instead of a simple curve.
Difference from the closed shape
The only structural difference from a polygon is the automatic closing of the shape: a polygon always closes it, a polyline never does. Visually, this has a direct effect on filling, a filled polygon forms a solid surface, while a <polyline> filled without fill="none" produces an often unexpected result, since the browser draws an invisible segment between the last and first point to compute the area to fill. This has a practical consequence when drawing icons: the outline of a house, for example, has to close and is therefore a polygon, while the profile of a mountain range stays open and fits a polyline perfectly.
Common pitfall
fill="none" is the most common mistake with <polyline>. By default the fill attribute is black, so the line ends up accompanied by a dark block between the last and first point, which completely ruins the line-chart effect that was intended.Real-world use case
Sparklines embedded in a dashboard, simplified route traces on a map, or signal representations (audio, sensors, heart rate) almost all use <polyline>. It can also be animated with <animate> by varying stroke-dashoffset, to simulate a line drawing itself progressively on screen. Paired with markers at each end, a <polyline> can also stand in for an arrow or a directional path on a technical diagram.
FAQ
No, every segment between two consecutive points is always a straight line, a smooth curve between points requires a more free-form outline with Bezier commands instead. That very trade-off is why charting libraries often smooth a <polyline> after the fact with CSS (such as stroke-linejoin: round) rather than recomputing a Bezier curve point by point.
Two points are enough to draw a single straight segment, below two points the shape has nothing to display and stays invisible on screen.
Yes, some area charts deliberately use this behavior, combining a semi-transparent fill with start and end points brought back down to the baseline to get a filled area effect under the curve.