It sounds remarkably flashy to create a polygon in SVG, but what exactly is a polygon? A polygon is any closed shape that has at least three sides. Put simply, this can be a triangle, a square or something a little odder, such as a five-sided polygon. Once you start adding points to your geometrical figure with SVG, the code gets a little more complicated.
Polygon Element
Polygon starts out the same way all the elements do, with a declaration statement.
<?xml version-="1.0" standalone="no"?>
This is the basic XML declaration statement with one additional feature. Standalone directs the parser to look for an external file for more information. In SVG, this is a DTD located at W3C.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
The second line identifies the DTD address for the parser. This line is static, so it never changes.
<svg width="100%" height="100%" version="1.0"
xmlns="http://www.w3.org/2000/svg">
This is the root element and namespace declaration. The root element will always be 'svg' and the namespace will also be 'http://www.w3.org/2000/svg.' Width and height attributes, when located after the root element, assign characteristics for the entire page. The attributes tell the parser to use 100 percent of the width and height for the page as a whole.
Next, add the instruction to explain your shape.
<polygon points="220, 150 350, 220 220, 350"
Polygon introduces a new attribute to the SVG equation – points. When using SVG, you are providing instructions to the parser about how to draw a shape. Points tell the parser the coordinates of each stopping point. In other words, draw a line from point 'A' to 'B' to 'C.' By adding points, you create more sides. The sample code draws a triangle.
<polygon points="220, 150 350, 220"
style="fill:#FFFFFF;
stroke:#000000;stroke-width:1"/>
The design attributes fill and stroke can be presented in a number of ways. Fill="red" is the simplest method, but not the only one.
Fill="white" says the same thing as style="fill:#FFFFFF" but just presents the data in a different way.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.0"
xmlns="http://www.w3.org/2000/svg">
<polygon points="220, 150 350, 220 220, 350"
style="fill:#FFFFFF;
stroke:#000000;stroke-width:1"/>
</svg>