Create Polygons and Polylines in the SVG DOM

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