1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Create Polygons and Polylines in the SVG DOM

    Sarah DrasnerSarah Drasner
    htmlHTML 5

    In this lesson, we go over how to draw any polygon element, as well as how to convert it to a polyline

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Drawing both polygons and polylines are pretty similar in SVG. Polygons tend to be very useful for drawing complex shapes, whereas polygons are good for drawing many lines that are connected, which tend to be good for charts.

    To draw a polygon, we'll create a polygon element, and use an array of values, the first of which will be plotted on the x-axis. The second is the y-axis. These values will plot themselves along our coordinate system, which you can think of as a grid of graphing paper.

    A polygon will always assume that you want to close off that shape, so the last coordinate will actually be penultimate to the return of the first coordinate. If we change this polygon to a polyline, you can see that our syntax is the same, but both path values end up at the very last point.

    You can also see how if we were going to bind these points to data in a table, for instance, it would be really easy to create a visualization of those numerical values.