SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <polygon> element of SVG is used to make any type of polygon on the SVG and defines a closed shape consisting of a set of connected straight line segments.
Syntax:
<polygon points="Pair of points required to draw the shape"
stroke="stroke color"
fill="fill color for colored closed shapes">
Attributes:
- points: Pair of points required to draw the shape
- pathLength: It tells the total length of the path.
Few examples are given below for a better understanding of the <polygon> SVG element.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="400px" height="400px">
<!-- try different pairs and make different shapes-->
<polygon points="0, 100 100, 100 100, 100 100, -20000"
fill="green">
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
background-color: black;
}
</style>
<body>
<svg width="200px" height="200px">
<!-- try different pairs and make different shapes-->
<polygon points="100, 100 15, 205 150, 7 20, 0"
fill="green" stroke="yellow">
</svg>
</body>
</html>
Output:
Browsers supported: Below given are the browsers supported by this svg element.
- Chrome
- Edge
- Opera
- Internet explorer
- Safari
- Firefox
