(click anywhere to close)

# [SVG] Lines, Polylines & Polygons

category: Website | course: SVG | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Polylines
2. Polygons

Lines are nothing more than a stroked, straight path between two points. Therefore, the only thing a line needs is the position of the first and second point. The order doesn’t matter. The syntax is:

`<line x1=”xStart” y1=”yStart” x2=”xEnd” y2=”yEnd” />`

```<svg>
<line x1="5" y1="5" x2="60" y2="60" stroke-width="10px" stroke="red" />
</svg>
```

## Polylines

If you want a line with more than two points, which technically speaking isn’t a line anymore, you need to use polylines. In this case, however, having to type two attributes for every point is a pain, which is why polylines use a single attribute that contains all the points, separated by a white space.

`<polyline points=”x1,y1 … xn,yn”/>`

```<svg>
<polyline points="5,5 60,60 100,40" stroke-width="10px" stroke="red" fill="orange" stroke-linecap="round" />
</svg>
```

Note that polylines, unlike lines, can have a fill. If your polyline isn’t a perfectly straight line, the fill property will draw an imaginary straight line from end to start point to close off the path, and fill that.

## Polygons

Now that we know about polylines, creating polygons – such as triangles or stars – only requires a different tag: `<polygon>`. It does the same as polyline, but automatically closes the path for you by adding a (non-imaginary) line between start and end point. This way you only have to supply every corner point of the polygon, and they’ll all be automatically connected with straight lines.

```<svg>
<polygon points="5,5 60,60 100,40" stroke-width="10px" stroke="red" fill="orange" />
</svg>
```
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)