Post
Ask Question

Scalable Vector Graphics - Polygon

Introduction

 
This is used to draw a closed shape by connecting multiple straight lines. 
 
Before reading further, read the following articles.
Now let's move forward to understanding SVG polygons.
 

SVG Polygon

 
 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.
  1. <html>  
  2.     <body>  
  3.         <svg height="250" width="500">  
  4.             <polygon points="20,20 100,180 130,100" style="fill:cyan;stroke:blue;stroke-width:2" />  
  5.             <polygon points="130,180 200,140 250,80 230,20" style="fill:pink;stroke:red;stroke-width:2" />  
  6.             <polygon points="280,20 300,100 350,120 380,60 450,20" style="fill:#cccc00;stroke:purple;stroke-width:2" />  
  7.         </svg>  
  8.     </body>  
  9. </html>  
Output
 
Polygons of minimum
 
Example 2
 
Polygons with strokes and opacity.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="600">  
  4.             <polygon points="20,50 20,110 60,130 100,110 100,50 60,30" style="fill:yellow;stroke:blue;stroke-width:3; stroke-opacity:0.5" />  
  5.             <polygon points="120,50 120,120 150,150 210,150 240,120 240,50 180,20 " style="fill:blue;stroke:red;stroke-width:3; fill-opacity:0.5" />  
  6.             <polygon points="260,50 260,130 300,170 360,170 400,130 400,50 360,10 300,10" style="fill:red;stroke:black;stroke-width:3; fill-opacity:0.5 ; stroke-opacity:0.5; stroke-dasharray:10 5" />  
  7.         </svg>  
  8.     </body>  
  9. </html>  
Output
 
Polygons
 
Example 3
 
Star polygon.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="600">  
  4.             <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:grey;stroke:blue;stroke-width:5; stroke-opacity:0.5" />  
  5.             <polygon points="220,90 300,90 330,10 360,90 440,90 380,150 410,230 335,190 255,235 285,150 "   
  6. style="fill:lightgreen;stroke:green;stroke-width:3; fill-opacity:0.7; stroke-dasharray:10 3" />  
  7.         </svg>  
  8.     </body>  
  9. </html>  
Output
 
Output
 
Example 4
 
Polygon with fill-rule properties “evenodd” & “nonzero”. 
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="600">  
  4.             <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:orange;stroke:blue;stroke-width:5; stroke-opacity:0.5; fill-rule:evenodd" />  
  5.             <polygon points="250,110 320,10 390,110 320,210" style="fill:lightgreen;stroke:green;stroke-width:3; fill-opacity:0.7; fill-rule:nonzero" />  
  6.             <polygon points="280,110 320,50 360,110 320,170" style="fill:white;stroke:green;stroke-width:3; fill-opacity:0.5; fill-rule:nonzero; stroke-dasharray:10 5" />  
  7.         </svg>  
  8.     </body>  
  9. </html>  
Output
 
star
 
By applying the preceding property, the crossing area gets unfilled by “evenodd” and the separate area is unfilled by “nonzero”.
 
If you want to read more. 
 
Thank you, keep learning and sharing.


Similar Articles