How to draw a polygon in HTML5 SVG?

SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG.

To draw a polygon in HTML SVG, use the SVG <polygon> element. The <polygon> element creates a graphic containing at least three sides. The points attribute is the x and y coordinates for each corner of the polygon.


You can try to run the following code to learn how to draw a polygon in HTML5 SVG.

<!DOCTYPE html>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
      <title>HTML5 SVG Polygon</title>

      <h2>HTML5 SVG Polygon</h2>
      <svg id="svgelem" width="300" height="300" xmlns="">
         <polygon points="100, 20 200,180 100,200" style="fill:green;" />


Sharon Christine
Sharon Christine

An investment in knowledge pays the best interest