SVG Polygon

## SVG Basic

SVG HOME SVG Intro SVG Example SVG in HTML

## SVG Shapes

SVG Rectangle SVG Circle SVG Ellipse SVG Line SVG Polygon SVG Polyline SVG Path SVG Text SVG Stroking

## SVG Filters

SVG Filters Intro SVG Blur Effects SVG Drop Shadows

## SVG Gradients

SVG Linear SVG Radial

## SVG Examples

SVG Examples

## SVG Reference

SVG Reference

# SVG <polygon>

« Previous
Next Chapter »

## SVG Polygon - <polygon>

## Example 1

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

| Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".

Here is the SVG code:

## Example

<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 yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

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:

Here is the SVG code:

## Example

<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 yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

## Example 3

Use the <polygon> element to create a star:

Here is the SVG code:

## Example

<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 yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

## Example 4

Change the fill-rule property to "evenodd":

Here is the SVG code:

## Example

<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 yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE