SVG (Scalable Vector Graphics) is a markup language for describing two-dimensional vector graphics. To create a polygon in SVG, you can use the <polygon>
element. The <polygon>
element defines a closed shape by connecting a series of points with straight lines.
Here's a basic example of how to create a simple polygon:
xml<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 150,190 250,10" fill="blue" />
</svg>
In this example:
width
and height
attributes define the size of the SVG canvas.<polygon>
element is used to create the polygon.points
attribute specifies the coordinates of the polygon's vertices. In this case, the polygon has three vertices at (50,10), (150,190), and (250,10).fill
attribute sets the fill color of the polygon.Now, let's look at a more complex example with additional attributes:
xml<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 200,10 200,150 100,250"
fill="green"
stroke="red"
stroke-width="2"
fill-opacity="0.5" />
</svg>
In this example:
stroke
attribute sets the color of the polygon's border.stroke-width
attribute sets the width of the polygon's border.fill-opacity
attribute sets the opacity of the fill color.You can also create polygons with more vertices:
xml<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 200,10 200,150 100,250 20,150"
fill="yellow"
stroke="blue"
stroke-width="3"
fill-opacity="0.7" />
</svg>
In this example, the polygon has five vertices, creating a more complex shape.
Remember that the points
attribute should contain a space-separated list of x, y coordinates for each vertex. You can add as many vertices as needed to create the desired polygon shape.