What is the key visual difference between and ?

A polyline does not connect its last point back to the first

A polyline cannot have a stroke color

A polyline can only draw a single straight segment

Even though a polyline stays open, can it still show a fill color?

Yes, fill treats it as if closed, but the stroke stays open

No, a polyline never renders a fill under any circumstance

No, applying fill to a polyline causes a rendering error

What kind of shape is best suited to represent?

Open multi-segment shapes like zigzags or graph lines

Only perfectly closed shapes like squares

Only a single smooth curved arc

SVG Polyline

Learn how the <polyline> element connects a series of points with straight line segments to form an open, unclosed shape.

The <polyline> Element

The <polyline> element draws a series of connected straight-line segments through a list of points, just like <polygon>. The key difference is that a polyline does not automatically close back to its starting point, leaving the shape open at both ends. This makes it ideal for line charts, zigzag patterns, and anything that shouldn't form a closed loop.

The points Attribute

Like <polygon>, <polyline> uses a single points attribute containing a list of x,y coordinate pairs separated by spaces or commas: points="x1,y1 x2,y2 x3,y3". Each pair becomes a vertex, and the browser draws straight segments connecting them in order.

Example: A Simple Zigzag

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="120" viewBox="0 0 220 120">
  <polyline points="10,100 60,20 110,100 160,20 210,100"
            fill="none" stroke="#2563eb" stroke-width="4" />
</svg>

</body>
</html>

Why fill="none" Matters

Even though a polyline is open, SVG still connects its first and last points with an implied closing edge and fills that region by default (typically black) unless you explicitly set fill="none". For most line-drawing use cases, always pair fill="none" with your stroke so only the connecting segments are visible.

points - space or comma separated list of x,y vertex coordinates
fill - set to none for a pure open line; otherwise the implied closing region gets filled
stroke - the line color
stroke-width - the line thickness
stroke-linejoin - shapes the corners where segments meet: miter, round, or bevel

Example: Line-Chart Style Polyline

<!DOCTYPE html>
<html>
<body>

<svg width="240" height="150" viewBox="0 0 240 150">
  <polyline points="10,120 50,90 90,110 130,40 170,60 210,20"
            fill="none" stroke="#16a34a" stroke-width="3" stroke-linejoin="round" />
</svg>

</body>
</html>

Note: Forgetting fill="none" is the most common polyline mistake. Without it, the browser fills the area between the first and last point with solid black, which can hide or distort your line.

Example: Polyline with Visible Fill for Comparison

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="150" viewBox="0 0 220 150">
  <polyline points="10,120 60,30 110,100 160,20 210,120"
            fill="rgba(59,130,246,0.3)" stroke="#1d4ed8" stroke-width="3" />
</svg>

</body>
</html>

Note: To make a polyline look closed without switching to <polygon>, repeat the first coordinate pair as the last entry in the points list -- this draws an explicit closing segment while keeping fill="none" behavior predictable.

Exercise: SVG Polyline

What is the key visual difference between <polyline> and <polygon>?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVG Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to SVG and tweak your resume