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 point50,50= second point90,10= third point70,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.






