WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

SVG <polygon>


SVG Polygon - <polygon>

The <polygon> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).


Example 1

The following example creates a polygon with three sides:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Try it yourself »

Code explanation:

  • The points attribute defines the x and y coordinates for each corner of the polygon

Example 2

The following example creates a polygon with four sides:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Try it yourself »

Example 3

Use the <polygon> element to create a star:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
Try it yourself »

Example 4

Change the fill-rule property to "evenodd":

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Try it yourself »