<polygon> 要素は、少なくとも3つの辺を含むグラフィックを作成するために使用します。
ポリゴンは、直線で作られ、形は「閉じ」ています（すべての線がつながっています）。
ポリゴンは、ギリシャ語から来ています。"Poly" は「多くの」で、"gon" は「角度」を意味します。
次の例は、3 つの辺を持つポリゴンを作成します：
SVG コードは次の通りです：
<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 »
コードの説明：
次の例は、4 つの辺を持つポリゴンを作成します：
SVG コードは次の通りです：
<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 »
星形を作成するために <polygon> 要素を使用します：
SVG コードは次の通りです：
<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 »
fill-rule プロパティを "evenodd" に変更します：
SVG コードは次の通りです：
<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 »