SVG Polygon vs Polyline: Points, Fill Rules, and Use Cases

Master point-based shapes and fill rules.

Published at: April 11, 2026

Last updated: April 11, 2026

Estimated reading time: 17 min read

Introduction#

In SVG Essentials: Mastering Shapes, Coordinates, and Styling, we covered core SVG geometry. However, two elements—<polygon> and <polyline>—share an identical syntax while behaving very differently in the browser.

This post dives into the specifics of these “point-based” elements, covering everything from the points attribute to advanced fill logic.

Polygon vs Polyline at a Glance#

Feature	<polyline>	<polygon>
Shape type	Open	Closed
Final segment	Not connected to the start	Automatically connects to the start
Fill behavior	Often requires fill="none"	Usually filled
Best use cases	Charts, graphs, waveforms, routes	Geometric shapes, UI icons, stars
Can define complex shapes	Yes	Yes

Example Comparison

Code language: HTML

<svg viewBox="0 0 100 100" width="200">
  <!-- Polyline (open) -->
  <polyline
    points="10,90 40,20 70,70 90,10"
    fill="none"
    stroke="#06b6d4"
    stroke-width="1" />

  <!-- Polygon (closed) -->
  <polygon
    points="10,90 40,20 70,70 90,10"
    fill="#f59e0b"
    fill-opacity="0.2"
    stroke="#b45309"
    stroke-width="1"  />
</svg>

Shared Foundation: The points Attribute#

Both <polyline> and <polygon> use the points attribute to define their vertices.

Syntax:

<element points="x1,y1 x2,y2 x3,y3 ..." />

• Commas: Used to separate X and Y.

• Spaces: Used to separate individual points.

• No Units: Values are unitless (relative to the viewBox).

Formatting Best Practices:

While SVG is highly flexible with white space, the industry standard (and most readable) convention is to use a comma between X and Y, and a space between individual points:

• Standard (Recommended): points="10,10 50,60 90,20"

• Space-only: points="10 10 50 60 90 20"

• Mixed: points="10 10, 50 60, 90 20"

Each pair defines one vertex, connected in the order they are written.

Note: SVG coordinates exist relative to the viewBox grid and do not require units like px.

<polyline> — The Open Connection#

<polyline> draws multiple connected straight lines but does not close the shape automatically.

Key Characteristics:

• Open shape: Last point is NOT connected to the first.

• Stroke-focused: Best for paths, charts, and waveforms.

The “Phantom Fill” Trap

By default, SVG elements have a fill="black". Even though a polyline is “open”, the browser will attempt to fill the area between the start and end points.

Always set fill="none" on a polyline unless you are intentionally creating a complex, semi-open shaded area.

<polyline points="10,80 40,20 70,60 100,30" stroke="blue" />
<polyline points="10,80 40,20 70,60 100,30" stroke="blue" fill="none" />

Best For:

• Line charts

• Route maps

• ECG / waveform visuals

• Freehand drawings

<polygon> — Closed Shapes#

A <polygon> defines a closed shape. The SVG engine automatically draws a line from the final point back to the starting point to “seal” the shape.

Key Characteristics:

• Always Closed: Even if you only provide three points, it will always form a complete enclosure.

• Area-focused: Ideal for UI icons, geometric patterns, and map regions.

Example:

<polygon
  points="50,10 90,80 10,80"
  fill="lightblue"
  stroke="navy"
  stroke-width="2"
/>

Best For:

• Geometric UI elements (Hexagons, Stars)

• Map regions

• Data “Area” charts

Point Order: Why Sequence is Strategy#

Points are drawn in the exact sequence they appear in the string. Changing the order changes the shape’s topology.

For a simple triangle, the order of points doesn’t change the silhouette. However, for shapes with 4+ points, the sequence is vital. If you “scramble” the points, you move from a clean square to a self-intersecting “hourglass” or “butterfly” shape.

<!-- Correct -->
<polygon points="10,10 90,10 90,90 10,90" />

<!-- Scrambled -->
<polygon points="10,10 90,90 90,10 10,90" />

Incorrect ordering can cause:

• Self-intersections

• Unexpected fills

• Visual artifacts

Fill Rules: Managing Overlap#

When a shape overlaps itself—like a five-pointed star or a complex “figure-eight” polygon—SVG needs a mathematical logic to decide which areas are “inside” (filled) and which are “outside” (transparent).

This is controlled by the fill-rule property.

nonzero (default)#

The nonzero rule determines the fill based on the winding order (the direction in which you drew the points).

How it works: Imagine standing at a point inside the shape. The browser draws a ray in any direction to infinity. It then looks at every path segment that crosses this ray. If a segment is drawn clockwise, it adds 1; if counter-clockwise, it subtracts 1.

The Result: If the final “winding count” is anything other than zero, the area is filled. In most star shapes, the center has a count higher than zero, so it remains solid.

evenodd#

The evenodd rule ignores the direction of the lines and focuses strictly on the number of path crossings.

How it works: Again, imagine a ray drawn from a point to infinity. The browser simply counts how many times that ray crosses a line.

The Result: If the number of crossings is odd, the area is filled. If it is even, the area is left empty.

Visual Behavior: This is why the center of a star becomes hollow/transparent—a ray starting from the very center crosses the star’s edges an even number of times.

Why This Matters

Choosing the right rule is essential when building:

• Complex Icons: Creating “holes” in shapes (like a donut or the letter ‘O’) without using masks.

• Geometric Patterns: Controlling the transparency of overlapping triangles or hexagons.

• Data Viz: Ensuring that self-intersecting line charts don’t create accidental “solid blocks” of color.

Side-by-Side Comparison#

This diagram compares both SVG fill-rule values. A star shape using nonzero shows a filled center, while the same star using evenodd displays a hollow center.

Code language: HTML

<svg viewBox="0 0 420 200" width="520">
  <!-- nonzero -->
  <polygon
    points="100,15 140,180 20,70 180,70 60,180"
    fill="#6366f1"
    fill-opacity="0.6"
    stroke="#4338ca"
    stroke-width="1"
    fill-rule="nonzero"
  />

  <text x="100" y="195" text-anchor="middle" font-size="13">
    nonzero
  </text>

  <!-- evenodd -->
  <polygon
    points="310,15 350,180 230,70 390,70 270,180"
    fill="#6366f1"
    fill-opacity="0.6"
    stroke="#4338ca"
    stroke-width="1"
    fill-rule="evenodd"
  />

  <text x="310" y="195" text-anchor="middle" font-size="13">
    evenodd
  </text>
</svg>

This comparison illustrates the impact of winding logic versus crossing logic. While the points attribute is identical for both shapes, the resulting visual is entirely different.

Summary: Use nonzero if you want a solid, “heavy” look for complex shapes. Use evenodd if you want a delicate, wireframe-style look with automatic cutouts in overlapping areas.

Refining the Look: Joins and Caps#

Because these shapes are composed of sharp angles, the way the “elbows” of the lines look is critical for a professional finish.

• stroke-linejoin: Controls the corners. Use round for a friendly look, bevel for flat corners, or miter for sharp spikes.

• stroke-linecap (Polyline only): Use round or square to give your lines a finished look.

• stroke-miterlimit: If you use miter joins at very sharp angles, the “spike” can become infinitely long. This attribute caps that spike to prevent visual glitches.

Putting it into Practice#

This section puts the theory into action. Whether you’re building a simple UI or a complex data dashboard, these examples show how to choose the right tool for the job.

Basic: Geometric Essentials#

1. The Simplest Triangle (<polygon>)#

The most fundamental use of a polygon is the triangle. With just three points, SVG automatically connects the last vertex back to the first, creating a perfect enclosure.

Code language: HTML

<svg viewBox="0 0 100 100" width="256">
  <polygon
    points="50,15 90,85 10,85"
    fill="#fde047"
    stroke="#a16207"
    stroke-width="1"
    stroke-linejoin="round"
  />
</svg>

Why it works: By using stroke-linejoin="round", we avoid the sharp, “stabbing” corners that can occur with narrow angles, giving the shape a more modern, friendly appearance.

2. Route Map Visualization (<polyline>)#

Unlike a polygon, a polyline is ideal for paths that shouldn’t close. Here, we use it to visualize a travel route or a “connect-the-dots” path.

Code language: HTML

<svg viewBox="0 0 150 100" width="300">
  <polyline
    points="20,20 40,70 80,40 130,80"
    fill="none"
    stroke="#ef4444"
    stroke-width="1"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-dasharray="1, 6"
  />
  <circle cx="20" cy="20" r="4" fill="#ef4444" />
  <circle cx="130" cy="80" r="4" fill="#ef4444" />
</svg>

Pro Tip: We use fill="none" here to avoid the “Phantom Fill” effect. The stroke-dasharray attribute creates a professional dashed-line look often seen in map applications.

Advanced: Data & UI#

1. The Star Shape (evenodd Rule)#

When a polygon self-intersects, like in a five-pointed star, the fill-rule determines if the center is “hollow” or “solid.”

Code language: HTML

<svg viewBox="0 0 100 100" width="256">
  <polygon
    points="50,10 61,38 90,38 66,57 76,85 50,68 24,85 34,57 10,38 39,38"
    fill="#f59e0b"
    stroke="#b45309"
    stroke-width="1"
    fill-rule="evenodd"
  />
</svg>

Why it matters: Using fill-rule="evenodd" allows you to create complex geometry with “cutouts” without having to define multiple separate paths or masks.

2. The Hybrid Area Chart#

In data visualization, we often combine both elements. A polyline draws the trend line, while a polygon creates the shaded area underneath.

Code language: HTML

<svg viewBox="0 0 100 100" width="256">
  <polygon
    points="0,100 0,60 20,40 40,70 60,30 80,50 100,20 100,100"
    fill="#3b82f6"
    fill-opacity="0.2"
  />
  <polyline
    points="0,60 20,40 40,70 60,30 80,50 100,20"
    fill="none"
    stroke="#3b82f6"
    stroke-width="1"
    stroke-linecap="round"
  />
</svg>

Strategy: To make a polygon look like an area chart, you must anchor the shape to the bottom of your grid. By adding ‘floor’ coordinates—like 0,100 and 100,100—to the start and end of your points string, the fill sits flat against the bottom of the viewBox.

3. Geometric UI Hexagon#

Polygons are the go-to for rigid UI elements like hex-grid buttons or achievement badges.

Code language: HTML

<svg viewBox="0 0 100 100" width="256">
  <polygon
    points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
    fill="#8b5cf6"
    stroke="#5b21b6"
    stroke-width="1"
  />
  <text x="50" y="58" text-anchor="middle" fill="white" font-weight="bold" font-size="20">SVG</text>
</svg>

Context: This is significantly more performant than using a high-res image for a simple shape, and it stays perfectly crisp regardless of the screen’s pixel density or zoom level.

Best Practices#

1. Always Define fill for Polylines — Since the default is fill="black", explicitly use fill="none" to avoid accidental shading.

2. Order of Points Matters — Points are connected exactly in the order written. Incorrect ordering can produce unexpected shapes.

3. Use stroke-linejoin for Better Corners — For charts and icons, use stroke-linejoin="round". This produces cleaner visual results.

4. Use a Consistent Coordinate Grid — Working with a predictable grid like: viewBox="0 0 100 100" makes positioning shapes easier.

When to Use Which?#

Use <polyline> when:

• building line charts

• drawing routes or paths

• connecting points visually

• showing progress or trends

Use <polygon> when:

• creating geometric shapes

• drawing stars or icons

• filling closed areas

• designing UI illustrations

If your shape requires curves or mixed geometry, move to <path>.

Performance Tip: Point Density#

While SVGs are lightweight, a <polyline> with 10,000 points (e.g., a high-resolution map or a stock market “all-time” chart) can cause the browser to lag during window resizing or animations.

This can be mitigated by:

• Using vector-effect="non-scaling-stroke" so the line thickness stays consistent when the SVG scales.

• Simplify coordinates using tools like SVGO or the Ramer-Douglas-Peucker algorithm before exporting data-heavy shapes.

Interactive Example#

To truly grasp how coordinates and closing logic work, use the playground below. Try dragging the vertices into an “hourglass” shape or switching to Polyline mode to see the “Phantom Fill” effect in real-time.

Playground name: Polygon vs Polyline #

<div id="app"> <div class="controls"> <h2 class="app-title">Polygon vs Polyline</h2> <div class="control-group"> <label>Shape Element:</label> <button id="toggleType" class="btn">Switch to Polyline</button> </div> <div class="control-group"> <label>Fill Behavior:</label> <button id="toggleFill" class="btn">Remove Fill (fill="none")</button> </div> <div class="control-group"> <label>Presets:</label> <div class="preset-grid"> <button class="btn btn-alt" onclick="loadPreset('square')">Square</button> <button class="btn btn-alt" onclick="loadPreset('hexagon')">Hexagon</button> <button class="btn btn-alt" onclick="loadPreset('star')">Star</button> </div> </div> <div class="code-output"> <p>Live SVG Code:</p> <code id="codeDisplay">&lt;polygon points="..." /&gt;</code> </div> <div class="instructions"> <ul> <li><strong>Drag</strong> red circles to move points.</li> <li><strong>Observe</strong> how the last point connects in Polygon mode but stays open in Polyline mode.</li> </ul> </div> </div> <div class="canvas-container"> <svg id="svgCanvas" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet"> <defs> <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#f1f5f9" stroke-width="1" /> </pattern> </defs> <rect width="100%" height="100%" fill="url(#grid)" /> <polygon id="mainShape" points="100,100 300,100 300,300 100,300" /> <g id="handles"></g> </svg> </div> </div>

:root { --primary: #6366f1; --primary-hover: #4f46e5; --bg: #f1f5f9; --panel: #ffffff; --text-main: #1e293b; --text-muted: #64748b; }

body { font-family: system-ui, -apple-system, sans-serif; background-color: var(--bg); margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } #app { display: flex; background: var(--panel); border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); overflow: hidden; max-width: 1000px; width: 95%; height: 600px; margin: 2rem; } .controls { padding: 30px; width: 320px; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; } .canvas-container { flex-grow: 1; background: #fff; display: flex; justify-content: center; align-items: center; padding: 40px; } svg { width: 100%; height: 100%; border: 1px solid #cbd5e1; border-radius: 12px; touch-action: none; /* Prevents scrolling while dragging */ } .app-title { margin: 0; font-size: 1.25rem; color: var(--text-main); margin-bottom: 24px; } .control-group { margin-bottom: 24px; } label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .btn { background: var(--primary); color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 500; width: 100%; transition: all 0.2s ease; font-size: 0.875rem; } .btn:hover { background: var(--primary-hover); } .btn-alt { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } .btn-alt:hover { background: #e2e8f0; } .preset-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .code-output { background: #0f172a; color: #38bdf8; padding: 16px; border-radius: 8px; font-family: "Fira Code", monospace; font-size: 0.75rem; margin-top: auto; } .code-output p { margin: 0 0 8px 0; color: #94a3b8; } .instructions { margin-top: 20px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; } /* SVG Shape Styles */ #mainShape { fill: rgba(99, 102, 241, 0.2); stroke: var(--primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transition: fill 0.3s ease; } .handle { fill: #ef4444; cursor: grab; stroke: white; stroke-width: 2; } .handle:active { cursor: grabbing; } .handle-label { font-size: 10px; fill: #1e293b; font-weight: bold; pointer-events: none; } ul { padding-left: 1rem; }

const canvas = document.getElementById("svgCanvas"); const handlesGroup = document.getElementById("handles"); const codeDisplay = document.getElementById("codeDisplay"); const toggleTypeBtn = document.getElementById("toggleType"); const toggleFillBtn = document.getElementById("toggleFill"); // Presets data const presets = { square: [ { x: 100, y: 100 }, { x: 300, y: 100 }, { x: 300, y: 300 }, { x: 100, y: 300 } ], hexagon: [ { x: 200, y: 50 }, { x: 330, y: 125 }, { x: 330, y: 275 }, { x: 200, y: 350 }, { x: 70, y: 275 }, { x: 70, y: 125 } ], star: [ { x: 200, y: 20 }, { x: 244, y: 142 }, { x: 380, y: 142 }, { x: 270, y: 222 }, { x: 312, y: 344 }, { x: 200, y: 264 }, { x: 88, y: 344 }, { x: 130, y: 222 }, { x: 20, y: 142 }, { x: 156, y: 142 } ] }; // Application State let points = [...presets.square]; let isPolygon = true; let hasFill = true; let draggedPointIndex = null; // Always get the fresh element from the DOM const getShapeElement = () => document.getElementById("mainShape"); function updateShape() { const currentShape = getShapeElement(); const pts = points.map((p) => `${p.x},${p.y}`).join(" "); currentShape.setAttribute("points", pts); currentShape.style.fill = hasFill ? "rgba(99, 102, 241, 0.2)" : "none"; // Update Code Display const tag = isPolygon ? "polygon" : "polyline"; codeDisplay.innerHTML = `&lt;${tag} points="${pts}" ${hasFill ? "" : 'fill="none"'} />`; renderHandles(); } function renderHandles() { handlesGroup.innerHTML = ""; points.forEach((p, i) => { // Create Circle handle const circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); circle.setAttribute("cx", p.x); circle.setAttribute("cy", p.y); circle.setAttribute("r", 7); circle.setAttribute("class", "handle"); // Drag Events const startDrag = (e) => { draggedPointIndex = i; e.stopPropagation(); }; circle.addEventListener("mousedown", startDrag); circle.addEventListener("touchstart", (e) => { e.preventDefault(); startDrag(e); }); // Create Text label const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", p.x + 10); text.setAttribute("y", p.y - 10); text.setAttribute("class", "handle-label"); text.textContent = i + 1; handlesGroup.appendChild(circle); handlesGroup.appendChild(text); }); } // Global Mouse Movement const handleMove = (e) => { if (draggedPointIndex === null) return; const CTM = canvas.getScreenCTM(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; const mouseX = (clientX - CTM.e) / CTM.a; const mouseY = (clientY - CTM.f) / CTM.d; points[draggedPointIndex].x = Math.round(mouseX); points[draggedPointIndex].y = Math.round(mouseY); updateShape(); }; const stopDrag = () => (draggedPointIndex = null); window.addEventListener("mousemove", handleMove); window.addEventListener("touchmove", handleMove, { passive: false }); window.addEventListener("mouseup", stopDrag); window.addEventListener("touchend", stopDrag); // Toggle Element Type (Polygon vs Polyline) toggleTypeBtn.onclick = () => { isPolygon = !isPolygon; const oldShape = getShapeElement(); const parent = oldShape.parentNode; const newShape = document.createElementNS( "http://www.w3.org/2000/svg", isPolygon ? "polygon" : "polyline" ); newShape.id = "mainShape"; // Re-insert into DOM parent.replaceChild(newShape, oldShape); toggleTypeBtn.textContent = isPolygon ? "Switch to Polyline" : "Switch to Polygon"; updateShape(); }; // Toggle Fill toggleFillBtn.onclick = () => { hasFill = !hasFill; toggleFillBtn.textContent = hasFill ? 'Remove Fill (fill="none")' : "Add Fill"; updateShape(); }; // Load Presets window.loadPreset = (name) => { points = JSON.parse(JSON.stringify(presets[name])); updateShape(); }; // Start updateShape();

Auto-run

Log 0 Info 0 Debug 0 Warn 0 Error 0

Wrapping Up#

Although they share the same points syntax, the choice between <polygon> and <polyline> comes down to whether you need a closed enclosure or an open path.

• Use polyline for data visualizations and route maps.

• Use polygon for icons, badges, and geometric shapes.

If your design requires complex curves, holes, or mixing lines and arcs, it’s time to graduate to the most powerful tool in the SVG toolkit: the <path> element.

Table of contents

I hope you found this post informative and helpful. It took a lot of work to create, and I’m thrilled to finally share it with the world. Thank you for reading. 💖

Page view counter

# of hits

Related Posts

• SVG Essentials: Mastering Shapes, Coordinates, and Styling

  Build sharp, scalable graphics with basic shapes.

  Learn how to build resolution-independent web graphics. Master SVG coordinates, the viewBox, and essential shapes like circles, rectangles, and polygons.

• SVG Essentials: Mastering the Path Element

  Understand SVG paths, curves, and commands

  A complete guide to the SVG path element—understanding path commands, coordinates, bézier curves, arcs, and how to read and build complex vector shapes.

• CSS Gradient Text Guide: Background-Clip, Animation & Advanced Tricks

  Create stunning gradient text effects with CSS

  Learn how to create CSS gradient text using background-clip, animation, stroke effects, multi-line fixes, and responsive techniques with real-world examples.