SVG Polyline

The <polyline> element is used to draw line segments connecting multiple points, different from polygon in that polyline does not automatically close.

Basic Syntax

<svg width="200" height="100">
  <polyline points="10,90 50,10 90,60 130,30 170,70"
            fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>

Main Properties

Property	Description
points	Defines vertex coordinates, format: x1,y1 x2,y2 x3,y3...
fill	Fill color (usually set to none)
stroke	Line color
stroke-width	Line width
stroke-linejoin	Line join style
stroke-linecap	Line endpoint style

Polyline vs Polygon

• <polyline>: Open shape, start and end points not automatically connected
• <polygon>: Closed shape, start and end points automatically connected

Basic Polylines

<svg width="400" height="150">
  <!-- Simple polyline -->
  <polyline points="20,100 60,20 100,80 140,40 180,120 220,60 260,100"
            fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>

Polylines with Different Widths

<svg width="300" height="200">
  <polyline points="20,30 60,10 100,40 140,20 180,50"
            fill="none" stroke="#3b82f6" stroke-width="1"/>

  <polyline points="20,80 60,60 100,90 140,70 180,100"
            fill="none" stroke="#22c55e" stroke-width="3"/>

  <polyline points="20,140 60,120 100,150 140,130 180,160"
            fill="none" stroke="#ef4444" stroke-width="5"/>
</svg>

Line Join Styles (stroke-linejoin)

<svg width="400" height="200">
  <!-- miter (default): sharp corner -->
  <polyline points="20,80 60,20 100,80"
            fill="none" stroke="#3b82f6" stroke-width="15" stroke-linejoin="miter"/>
  <text x="60" y="110" text-anchor="middle" font-size="12">miter</text>

  <!-- round: rounded corner -->
  <polyline points="140,80 180,20 220,80"
            fill="none" stroke="#22c55e" stroke-width="15" stroke-linejoin="round"/>
  <text x="180" y="110" text-anchor="middle" font-size="12">round</text>

  <!-- bevel: beveled corner -->
  <polyline points="260,80 300,20 340,80"
            fill="none" stroke="#ef4444" stroke-width="15" stroke-linejoin="bevel"/>
  <text x="300" y="110" text-anchor="middle" font-size="12">bevel</text>
</svg>

Dashed Polylines

<svg width="300" height="150">
  <!-- Short dashes -->
  <polyline points="20,30 80,10 140,50 200,20 260,60"
            fill="none" stroke="#3b82f6" stroke-width="2" stroke-dasharray="5,3"/>

  <!-- Long dashes -->
  <polyline points="20,80 80,60 140,100 200,70 260,110"
            fill="none" stroke="#22c55e" stroke-width="2" stroke-dasharray="15,5"/>

  <!-- Dotted line -->
  <polyline points="20,130 80,110 140,150 200,120 260,160"
            fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="2,6"/>
</svg>

Filled Polylines

Although usually not filled, polylines can also have fill:

<svg width="300" height="150">
  <!-- Filled polyline connects start and end to form area -->
  <polyline points="20,120 60,20 100,80 140,40 180,100 220,60 260,120"
            fill="#bfdbfe" stroke="#3b82f6" stroke-width="2"/>
</svg>

Using CSS Styling

<style>
  .line-animated {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 3;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawLine 3s ease forwards;
  }
  @keyframes drawLine {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>

<svg width="300" height="100">
  <polyline class="line-animated" points="20,80 80,20 140,60 200,30 260,70"/>
</svg>

Polyline Animation

<svg width="400" height="150">
  <!-- Color change -->
  <polyline points="20,80 60,20 100,60 140,40"
            fill="none" stroke="#3b82f6" stroke-width="3">
    <animate attributeName="stroke"
             values="#3b82f6;#ef4444;#22c55e;#3b82f6"
             dur="2s" repeatCount="indefinite"/>
  </polyline>

  <!-- Dashed line flow -->
  <polyline points="180,80 220,20 260,60 300,40 340,80"
            fill="none" stroke="#8b5cf6" stroke-width="3"
            stroke-dasharray="10,5">
    <animate attributeName="stroke-dashoffset"
             from="0" to="30" dur="1s" repeatCount="indefinite"/>
  </polyline>
</svg>

Practical Application Examples

Line Chart

<svg width="350" height="200" viewBox="0 0 350 200">
  <!-- Background grid -->
  <line x1="50" y1="20" x2="50" y2="170" stroke="#e5e7eb" stroke-width="1"/>
  <line x1="50" y1="170" x2="320" y2="170" stroke="#e5e7eb" stroke-width="1"/>

  <!-- Horizontal grid lines -->
  <line x1="50" y1="50" x2="320" y2="50" stroke="#f3f4f6" stroke-width="1"/>
  <line x1="50" y1="90" x2="320" y2="90" stroke="#f3f4f6" stroke-width="1"/>
  <line x1="50" y1="130" x2="320" y2="130" stroke="#f3f4f6" stroke-width="1"/>

  <!-- Data polyline -->
  <polyline points="50,150 95,100 140,120 185,60 230,80 275,40 320,70"
            fill="none" stroke="#3b82f6" stroke-width="3"/>

  <!-- Data points -->
  <circle cx="50" cy="150" r="5" fill="#3b82f6"/>
  <circle cx="95" cy="100" r="5" fill="#3b82f6"/>
  <circle cx="140" cy="120" r="5" fill="#3b82f6"/>
  <circle cx="185" cy="60" r="5" fill="#3b82f6"/>
  <circle cx="230" cy="80" r="5" fill="#3b82f6"/>
  <circle cx="275" cy="40" r="5" fill="#3b82f6"/>
  <circle cx="320" cy="70" r="5" fill="#3b82f6"/>
</svg>

Area Chart

<svg width="350" height="200">
  <!-- Fill area -->
  <polyline points="50,170 50,150 95,100 140,120 185,60 230,80 275,40 320,70 320,170"
            fill="#bfdbfe" stroke="none"/>
  <!-- Polyline -->
  <polyline points="50,150 95,100 140,120 185,60 230,80 275,40 320,70"
            fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>

ECG (Electrocardiogram)

<svg width="400" height="100">
  <polyline points="0,50 30,50 40,50 50,50 55,30 60,70 65,20 70,80 75,50 85,50 120,50 150,50 160,50 170,50 175,30 180,70 185,20 190,80 195,50 205,50 240,50 270,50 280,50 290,50 295,30 300,70 305,20 310,80 315,50 325,50 360,50 400,50"
            fill="none" stroke="#22c55e" stroke-width="2"/>
</svg>

Zigzag Decoration

<svg width="400" height="50">
  <polyline points="0,25 20,5 40,25 60,5 80,25 100,5 120,25 140,5 160,25 180,5 200,25 220,5 240,25 260,5 280,25 300,5 320,25 340,5 360,25 380,5 400,25"
            fill="none" stroke="#f59e0b" stroke-width="3"/>
</svg>

Hand-drawn Underline

<svg width="200" height="30">
  <polyline points="5,20 20,18 40,22 60,17 80,21 100,18 120,22 140,17 160,20 180,18 195,20"
            fill="none" stroke="#ef4444" stroke-width="3" stroke-linecap="round"/>
</svg>

Checkmark Icon

<svg width="50" height="50">
  <polyline points="10,25 20,35 40,15"
            fill="none" stroke="#22c55e" stroke-width="4"
            stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Audio Waveform

<svg width="200" height="60">
  <polyline points="10,30 20,15 30,30 40,10 50,30 60,20 70,30 80,5 90,30 100,25 110,30 120,18 130,30 140,12 150,30 160,22 170,30 180,28 190,30"
            fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round"/>
</svg>

Next Steps

Now that you've learned polylines, let's learn about the powerful SVG Path!