Shapes can be created using scalable vector graphic polygons. The svg ‘polygon‘ element is good for creating more complex shape. It is probably best to introduce the ‘polygon’ element with some basic examples first.
SVG triangles can be created with the path element or the polyline element.
Here is an example of a svg triangle using the ‘polygon‘ element.

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

Now for a star created with the svg polygon element.

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

A svg polygon element is very similar to the svg polyline element. The big difference is that the last value connects with the first value to create a closed shape. In the star example above the last set of coordiates (25,30) connect back with the first set of coordinates (30,10).

Another potential source of confusion is the svg syntax. Revisiting the triangle example notice how in this example the same coordinates are written with a space between the x-Axis and y-Axis values and a comma separating each set of coordinates.

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

This varies from the first example which does the complete opposite of having a comma between the x-Axis and y-Axis and a space separating each coordinate set. To clarify this here how each style of syntax is written.

  1. <polygon points=”x-Axis,y-Axis x-Axis,y-Axis x-Axis y-Axis” />
  2. <polygon points=”x-Axis y-Axis, x-Axis y-Axis, x-Axis y-Axis” />

And if that is not confusing enough here is the star example again however with the second method of syntax used.

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

And to completely drive you insane here is the triangle and star examples for a third time however this time both the syntax methods are mixed. This can become quite overwhelming when trying to decipher or understand what is going on with a svg drawing. It can become quite easy to get lost in the jumble of all the numbers and commas and trying to work out which is the x-Axis value and which is the y-Axis value.

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

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


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 *