Autoplay

    Create Polygons and Polylines in the SVG DOM

    Sarah DrasnerSarah Drasner

    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
    Transcript

    Transcript

    00:03 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.

    00:14 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.

    00:30 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.

    00:46 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.

    Discuss

    Discuss