<polyline />

Objective: Learn to draw, position and style a polyline.

7.1 The polyline element

<polyline x1="0" y1="0" x2="100" y2="100"></polyline>

<polyline> ... </polyline> The full line element with open and closing tags.

<polyline /> Because this does not contain any content it can also be  used as a self-closing element.

7.2 Polyline construction attributes

Polylines are are groups of connected straight lines. All the points are included in one attribute.

points a set of points setting the layout points of the polyline. Each number must be separated by a space, comma, EOL or line feed character.  Each point must have two numbers an x coordinate and a y coordinate.

The point list can therefore be written in a number of ways depending on your preference.  Eg: all the following describe the same points:

1 1, 2 2, 3 3, 4 4

1,1 2,2 3,3 4,4  << This is probably the clearest way to write points in a line.

1 1 2 2 3 3 4 4

1 1
2 2
3 3
4 4

7.3 Style attributes

Now that we are drawing lines with multiple points there are additional styles that enhance the presentation of the line.

stroke-linejoin="miter" The value options for this property  are miter, round and bevel.

fill="white" Note that polylines can use the fill attribute. You will have to experiment with various shapes to see how this is applied and how it appears.

Example 1<polyline />

 This first example uses full SVG attributes to define the stroke colour and size of the rectangle. This example uses a comma to separate x and y coordinates.

<polyline
    x="100" 
    y="100" 
    points="200,200 300,200 300,100 100,100 100,300 350,300 350,50"
    stroke="green" 
    stroke-width="4"
    fill="none">
</polyline>

 Example 2 complex <polyline /> with  fill

It is easy to construct complex polylines if you draw the shape on graph paper and plot the points first. You can use the IGP-SVG Primitive design sheet for this.  This example only uses spaces between points.

<polyline
   points="10 200 60 100 120 300 200 40 240 200 280 100 360 310 380 200"
    stroke="red" 
    stroke-width="4"
    stroke-linejoin="miter"
    fill="white">
</polyline>

 Example 3. A simple house.

You can create geometric shapes with polylines by having the same starting and ending points. Cut and paste this SVG into the SVG Editor. This was designed on the SVG Primitive design sheet first.  Notice how each polyline has a title to make it easy to understand.

<!--Wall. Points with line feed-->
<polyline title="Wall" points="
80,200 
80,360 
320,360 
320,200"
stroke="orange" stroke-width="4" stroke-linecap="round" stroke-linejoin="miter" fill="yellow"></polyline>
<!--roof. Points with only spaces-->
<polyline title="Roof" points="40 200 200 80 360 200"
stroke="darkred" stroke-width="6" stroke-linejoin="bevel" fill="red"></polyline>
<!--Door. Points with comma linked xy's-->
<polyline title="Door" points="160,360 160,240, 240,240 240,360"
stroke="darkbrown" stroke-width="4" stroke-linejoin="miter" fill="brown"></polyline>
<!--Left Window. Points with comma separated xy's and some extra line properties-->
<polyline title="Left Window" points="100 240,100 300,140 300,140 240,100 240" stroke="brown" stroke-width="12" stroke-linejoin="round" stroke-linecap="round" fill="brown"></polyline>
<!--Right Window. Points with line feed again-->
<polyline title="Right Window" points="
260,240
260,300
300,300
300,240
260,240" 
stroke-width="none" stroke-linejoin="miter" fill="brown"></polyline>

 SVG Editor

7.4  Exercises

1. Edit the default polyline to go around itself again.
2. Create Three, three point polylines with very thick strokes across the page and change the stroke-linejoin property to miter, round and bevel. Observe the different presentation of the line joint. Make the stroke-width bigger. Try stroke-width="40".
3. Use the fill attribute to see how <polyline>  handles it. 
4. Practice using points as X-Y pairs with different comma patterns so you become comfortable with look at complex point values.
5. Delete one number from the middle of a set of points coordinate to see how the line goes crazy as SVG is still using pairs of numbers for X and Y coordinates.
6. Copy and paste the Simple house example mark-up into the SVG-Editor. Edit all the points and move the house up 60px. (This is a big job but may help you become comfortable working with points.)

For Cheaters

Here is the SVG for those who are too lazy to type the SVG. View the SVG Markup

<!--1. Polyline around itself again-->
<polyline fill="none" points="200,200 300,200 300,100 100,100 100,300 350,300 350,50 50,50 50,350 375,350 375,50" stroke="green" stroke-width="4"></polyline>
<!--2. Three polylines with linejoin properties-->
<polyline fill="none" points="50,200 150,250 50,300" stroke="red" stroke-width="20" stroke-linejoin="miter"></polyline>
<polyline fill="none" points="150,200 250,250 150,300" stroke="red" stroke-width="20" stroke-linejoin="round"></polyline>
<polyline fill="none" points="250,200 350,250 250,300" stroke="red" stroke-width="20" stroke-linejoin="bevel"></polyline>
<!--4. The same polyline written with three different point patterns. They have different colours and stroke-width but the same drawing points -->
<polyline fill="none" points="50,350 50,50 100,50 100,350 150,350 150,50" stroke="green" stroke-width="10"></polyline>
<polyline fill="none" points="50 350 50 50 100 50 100 350 150 350 150 50" stroke="white" stroke-width="6"></polyline>
<polyline fill="none" points="50 350, 50 50, 100 50, 100 350, 150 350, 150 50" stroke="red" stroke-width="2"></polyline>
<!--6. Move the house up 60px. Subtract 60 from the y coordinates in each of the five polylines. EG. Right window-->
points="
260,180
260,240
300,240
300,180
260,180"