Scalable Vector Graphic shapes can be closed or open. The svg ‘polyline’ element is used to create more complex open shapes than the svg ‘line‘ element.

Here is a simple first example using the svg ‘polyline’ element.

See the Pen svgPolylineFirstExample by Daniel (@Parsons) on CodePen.

  • The first coordinates are the starting coordinates of (10,10).
  • The second coordinates of (10,100) draws a line from (10) on the x-Axis to (100) on the y-Axis.
  • The third coordinates of (100,100) draws another line to (100) on the x-Axis and (100) on the y-Axis. Note the starting point for the third coordinates is the coordinate point from the second coordinates.

This next example extends the previous example with some more coordinates added.

See the Pen svgPolylineStairsExample by Daniel (@Parsons) on CodePen.

  • The first coordinates are the starting coordinates of (10,10).
  • The second coordinates of (10,50) draws a line from (10) on the x-Axis to (50) on the y-Axis.
  • The third coordinates of (50,50) draws a line to (50) on the x-Axis and (50) on the y-Axis. Note the starting point for the third coordinates is the coordinate point from the second coordinates.
  • The fourth coordinates of (50,100) draw a line from (50) on the x-Axis to (100) on the y-Axis. The starting point for the fourth coordinates is the coordinate point from the third coordinates.
  • Another line is drawn to (100) on the x-Axis and (100) on the y-Axis.
  • Then a line is drawn from (100) on the x-Axis to (150) on y-Axis.
  • Finally a line is drawn to (150) on the x-Axis and (150) on the y-Axis.

Therefore the rule of thumb is that the previous coordinate set is the starting point for the current coordinate set.

A triangle is easy to draw with the ‘polyline’ element.

See the Pen SVGblackTriangleExample by Daniel (@Parsons) on CodePen.

  • The pen starts at the coordinates (0,0)
  • A line is drawn from the x-Axis starting point to the x-Axis point of (100). The y-Axis is the second value (0).
  • Finally another line is drawn from from (50) on the x-Axis to the y-Axis value of (100).

Remember the that each set is defined as such – ‘<polyline points=”x,y x,y x,y”/>.
Each ‘x,y’ set is separated by a space.

Another triangle is added with a second ‘polyline’ element.

See the Pen svgBlackTrianglesExamples by Daniel (@Parsons) on CodePen.

The syntax can become a little dazing as more coordinates (x,y) coordinates are added. Consider this next example of three rectangles with a fill and stroke.

See the Pen svgComplexPolylineExample by Daniel (@Parsons) on CodePen.

As you can see the coordinates start to get a little difficult to decipher when several values are included.


More on SVG (Scalable Vector Graphics)

SVG logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *