Polygons in SVG: <polygon>

Polygons are closed shapes composed of straight lines. Here's how we define polygons in svg:

<svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1000 200">

  <polygon fill="#F4D37D"
      stroke="#E4AF4C" stroke-width="2"
      points="622,118.5 583,47.5 494,113.5
      430,37.5 378,89.5 506,162.5" />


Breaking it down

Polygons are very similar to polylines, expect they are a closed shape:

  • points: A list of points. Each point consists two numbers for the X and Y position separated by a space, comma or end of line.
  Tweet It

🕵 Search Results

🔎 Searching...