Introduction
This is used to draw a closed shape by connecting multiple straight lines.
Before reading further, read the following articles.
- Overview of Scalable Vector Graphics (SVG)
- Scalable Vector Graphics - Rectangle
- Scalable Vector Graphics - Circle
- Scalable Vector Graphics - Ellipse
- Scalable Vector Graphics - Line
- Scalable Vector Graphics - Polyline
Now let's move forward to understanding SVG polygons.
The tag <polygon> is used to draw various polygon shapes by connecting multiple straight lines like a polyline, but with the difference that a polyline draws open structures and a polygon draws closed structures.
In other words, it draws graphics or polygons that are closed (all lines are connected to each other) and that should contain at least three sides to be closed.
Note: When we use three coordinates to draw a shape by a polyline, it only draws two straight lines depending on the given coordinates but if we draw by a polygon then it automatically adds or connects one additional straight line to close the shape.
Like polyline, it also has the attribute “points” which is the list of points to make up the polygons.
Let's see a few examples to understand it properly.
Example 1
Polygons of a minimum of three sides, four sides, and five sides.
SVG Polygon
- <html>
- <body>
- <svg height="250" width="500">
- <polygon points="20,20 100,180 130,100" style="fill:cyan;stroke:blue;stroke-width:2" />
- <polygon points="130,180 200,140 250,80 230,20" style="fill:pink;stroke:red;stroke-width:2" />
- <polygon points="280,20 300,100 350,120 380,60 450,20" style="fill:#cccc00;stroke:purple;stroke-width:2" />
- </svg>
- </body>
- </html>





Gopi ChandPosted Aug 19, 2015, 6:55 AM
Thanks a lot everyone :)
Rajeesh MenothPosted Jul 29, 2015, 7:25 AM
Good One
Neeraj KumarPosted Jul 29, 2015, 6:46 AM
Nice Article
Gowtham RajamanickamPosted Jul 27, 2015, 5:18 AM
keep writing
Gowtham RajamanickamPosted Jul 27, 2015, 5:18 AM
good
Sibeesh VenuPosted Jul 27, 2015, 12:43 AM
Nice Share. Thanks
Pankaj Kumar ChoudharyPosted Jul 26, 2015, 6:20 AM
Nice Article Series Sir...........
Abhishek JaiswalPosted Jul 26, 2015, 2:53 AM
Good going, nice read! :)
Santhakumar MunuswamyPosted Jul 26, 2015, 2:08 AM
Thanks for nice article
RakeshPosted Jul 26, 2015, 12:32 AM
Good one sir