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

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

Basic Structure

Different Point Formats

Styling

Command Palette

Comments

More from this blog

Basic Structure

Different Point Formats

Styling