Basic Drawing > Basic Shapes > Polygon

Print this Page             Close Window

Polygon

The <polygon> tag is used to create a graphic that contains at least three sides. It can have as many sides as necessary, and it can be any shape, as long as it is made up entirely of straight line segments.

We can use <polygon> to create basic triangles, hexagons and star shapes or others. A <polygon> element must also be a closed shape, so that it can't be just an open-ended series of lines.

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
" http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="120" height="250">

<!-- Triangle -->
<polygon points="20,15 20,50 60,20"
style="fill: blue; stroke: black;"/>

<!-- A Parallelogram -->
<polygon points="30,70 60,70 45,100 15,100"
style="fill: red; stroke: black;"/>

<!-- A Star -->
<polygon points="35,120.5 37.9,129.1 46.9,129.1 39.7,134.5 42.3, 143.1
35,139 27.7,143.1 30.3,134.5 23.1,129.1 32.1,129.1"
style="fill: #ccffcc; stroke: green;"/>

<!-- A unfilled Star with intersecting lines -->
<polygon points="38,166 16,236 76,188 5,188 60,236"
style="stroke: black; fill: none;"/>

</svg>

Code explanation

The <polygon> element takes a series of points and plots them on the coordinate system, then draws lines between the points to make a shape.

The points attribute consists of a series of x- and y-coordinate pairs separated by commas or whitespace.

The <polygon> element will always close a shape. You must give an even number of entries in the series of numbers. You don't have to return to the starting point; the shape will automatically be closed.