(click anywhere to close)
OPEN MENU

[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)