Chapter 9: SVG polyline

SVG polyline, the “open sibling” of the <polygon> we just learned about!

Imagine we’re drawing with a pencil on paper:

• With <polygon> you draw a shape and the pencil automatically lifts and connects back to the starting point (closed loop).
• With <polyline> the pencil stays down and draws a continuous path through all points, but never closes the loop — it ends where the last point is.

This makes <polyline> perfect for things like:

• Zigzag lines
• Graphs / charts (data plots)
• Arrows without automatic closing
• Outlines that shouldn’t be filled
• Connecting dots in diagrams
• Isometric / technical drawings

Let’s break it down slowly, like always.

Main difference: <polyline> vs <polygon>

Here are some clear comparison visuals showing open polyline vs closed polygon:

svg-tutorial.com

How to use the Polygon and Polyline elements – SVG Tutorial

The only really important attribute: points

Exactly the same as <polygon>:

• Space between each point pair
• Comma between x and y of the same point
• Minimum 2 points (otherwise nothing shows)

You almost always use these too:

• stroke — color of the line (default = black)
• stroke-width — thickness (default = 1)
• fill — usually “none” for open paths
• stroke-linecap, stroke-linejoin, stroke-dasharray — for nice endings & dashes

Example 1 – Simplest polyline (straight multi-segment line)

Result: A nice zigzag blue line — open at both ends.

Example 2 – Zigzag arrow (very common pattern)

This creates a hand-drawn style arrow look — notice it doesn’t fill even though points repeat (because it’s not closed properly for fill).

Here is a zigzag arrow example for visual reference:

vectorstock.com

Zigzag curved right arrow icon unpredictable path – Royalty-Free Vector | VectorStock

Example 3 – Dashed polyline (great for charts / timelines)

Example 4 – Filled polyline (looks weird — but sometimes useful)

→ It fills the area as if it were closed — but because it’s open, the fill can behave strangely depending on direction and fill-rule. Most people avoid filling polylines unless they have a specific artistic reason.

Here is a visual showing fill-rule behavior (helpful for understanding odd fills):

sitepoint.com

Understanding the SVG fill-rule Property — SitePoint

Example 5 – Polyline in a real diagram (simple chart-like feel)

This is a very typical way people use <polyline> — for line charts!

Here is an isometric diagram example using many polylines for connections:

jointjs.com

How to create isometric diagrams using SVG

Quick Cheat Sheet – When to choose <polyline>

Common beginner mistakes

• Expecting it to close and fill nicely → use <polygon> instead
• Forgetting fill=”none” → weird filled area appears
• Only 1 point → nothing shows
• Points in wrong order → jagged / crossed look

Mini practice for you

1. Draw a lightning bolt zigzag using <polyline>
2. Make a simple mountain range silhouette (several peaks) with one polyline — fill it light blue
3. Create an open arrow shape that doesn’t close (use stroke-linecap=”round” for nice ends)

Paste your code if you want feedback — I’ll review it like we’re sitting together debugging 😊

Any part still fuzzy? Which example should we expand or redraw? Just tell me — we’ll keep going until it’s super clear! 🚀