YouTip

# SVG Polygon The `` element in SVG is used to draw polygons and is one of the commonly used basic shapes in SVG. Using the `` element, you can create closed polygons and control their vertex coordinates, fill color, stroke color, etc., by setting attributes. ### Basic Syntax <polygon points="x1,y1 x2,y2 x3,y3 ..." fill="fill-color" stroke="stroke-color" stroke-width="width" /> **Attribute Explanation:** * The `points` attribute defines the coordinates of each vertex of the polygon. The coordinates of multiple vertices are separated by spaces or commas, and each pair of coordinates is separated by a comma. * The `fill` attribute defines the fill color of the polygon. * The `stroke` attribute defines the stroke color of the polygon. * The `stroke-width` attribute defines the stroke width of the polygon. The following code draws a polygon with an orange fill, black stroke, and a width of 2 pixels. Its vertex coordinates are (100, 10), (150, 190), and (50, 190), forming a closed triangle. ### Example 1 The `` tag is used to create shapes with at least three sides. A polygon is made up of straight lines, and its shape is "closed" (all lines are connected). Polygon comes from Greek. "Poly" means "many", and "gon" means "angle". Here is the SVG code: ## Example [Try it »](#) Click to view: (#). **Code Explanation:** * The points attribute defines the x and y coordinates of each corner of the polygon. ### Example 2 The following example creates a four-sided polygon: Here is the SVG code: ## Example [Try it »](#) Click to view: (#). ### Example 3 Create a star shape using the `` element: Here is the SVG code: ## Example [Try it »](#) Click to view: (#). * * * ## Example 4 Change the fill-rule attribute to "evenodd": Here is the SVG code: ## Example [Try it »](#) Click to view: (#).