SVG Polygon
Last Updated :
04 Dec, 2023
The SVG (Scalable Vector Graphics ) Polygon the <polygon> element wrapped inside the <SVG> element is used to create a polygon. The meaning of a polygon is a shape having many angles. It must have at least three sides to make Polygon. The points of the polygon are defined with the attribute points and for giving style there are different attributes like stroke-width, stroke to define stroke color, and fill used to fill the area.
Example: The example illustrates the creation of an SVG Polygon.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG Polygon</title>
</head>
<body>
<svg height="210" width="500">
<polygon points="190,20 200,150 130,190 200,250"
fill="rgb(16, 93, 16)"
stroke="rgb(77, 19, 77)"
stroke-width="1" />
</svg>
</body>
</html>
|
Output:
Â
Example 2: This is another example that illustrates the creation of an SVG Polygon.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG Polygon</title>
</head>
<body>
<svg height="310" width="600">
<polygon points="180,20 200,180 250,250 20,50"
fill="rgb(84, 152, 84)"
stroke="rgb(77, 19, 77)"
stroke-width="2"/>
</svg>
</body>
</html>
|
Output:
Â
Share your thoughts in the comments
Please Login to comment...