Latest web development tutorials

SVG polygon

SVG polygon - <polygon>

Example 1

<Polygon> tag is used to create graphics containing at least three sides.

Polygons are straight lines, the shape is "closed" (all lines connected).

Remark polygon from Greece. "Poly" a "many", "gon" means "angle".

Here is the SVG Code:

Examples

<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon points = "200,10 250,190 160,210"
style = "fill: lime; stroke: purple; stroke-width: 1" />
</ Svg>

try it"

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

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

Example 2

The following example creates a four-sided polygon:

Here is the SVG Code:

Examples

<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon points = "220,10 300,210 170,250 123,234"
style = "fill: lime; stroke: purple; stroke-width: 1" />
</ Svg>

try it"

For Opera users: view SVG file (right-click on the preview source SVG graphics).


Example 3

Use <polygon> element to create a star:

Here is the SVG Code:

Examples

<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon points = "100,10 40,180 190,60 10,60 160,180"
style = "fill: lime; stroke: purple; stroke-width: 5; fill-rule: nonzero;" />
</ Svg>

try it"

For Opera users: view SVG file (right-click on the preview source SVG graphics).


Example 4

Change the fill-rule attribute "evenodd":

Here is the SVG Code:

Examples

<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon points = "100,10 40,180 190,60 10,60 160,180"
style = "fill: lime; stroke: purple; stroke-width: 5; fill-rule: evenodd;" />
</ Svg>

try it"

For Opera users: view SVG file (right-click on the preview source SVG graphics).