How to use Polygon SVG shape in HTML5

In this article I have describe about a examples of Polygon in HTML5.  
  • 2541

Read about SVG here

Polygon predefine SVG shape in HTML5

<polygon> is use to create a Polygon shape

The polygon have minimum three line and the lines create a close shape. The meaning of polygon is poly means "many" and gon means "angle" .

Example 1:

Lets draw a Polygon

<!DOCTYPE html>



<meta charset="utf-8" />



<h2>HTML5 SVG Polygon</h2>

<svg id="svgelem" height="200" xmlns="">

    <polygon  points="18,9 270,18, 153,45" fill="blue" />






polygon image.jpg


Define the code

  • html define the DOCTYPE in this program.
  • The points defines each corner of the polygon.
  • Points define x and y coordinates of each corner.
  • The line are create a close polygon.

Further Readings

You may also want to read these related articles :

Ask Your Question

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.