Skip to main content

Command Palette

Search for a command to run...

SVG Notes: Polyline

Updated
1 min read
SVG Notes: Polyline

Basic Structure

<polyline points="10,10 50,50 90,10 70,80" />

points attribute = list of x,y coordinates separated by spaces or commas:

  • 10,10 = first point

  • 50,50 = second point

  • 90,10 = third point

  • 70,80 = fourth point

Lines connect each point to the next in order, but it doesn't connect the last point back to the first.

Different Point Formats

<!-- Comma-separated -->
<polyline points="10,10 50,50 90,10" />

<!-- Space-separated -->
<polyline points="10 10 50 50 90 10" />

<!-- Mixed (both work) -->
<polyline points="10,10 50,50 90 10" />

Styling

<polyline points="10,10 50,50 90,10" 
          stroke="red" 
          stroke-width="3" 
          fill="none" />

Important: Usually set fill="none" because polylines create weird filled shapes if you don't. The stroke is what you typically want to see.

SVG Notes: Polyline