Home > DeveloperSection > Blogs > HTML5 Inline SVG

HTML5 Inline SVG


HTML5 HTML5 
Ratings:
0 Comment(s)
 1807  View(s)
Rate this:

HTML5 Inline SVG

HTML5 has support for inline SVG. Here we draw a polygon shape using SVG tags.

SVG-Polygon code

<svg width="400" height="200">

   <polygon points="40,80 50,40 50,40 150,60 150,60 220,50 220,50 220,10 220,10 240,40 240,40 260,90 260,90 220,150 220,150 140,150 140,150 80,70 "

   style="fill:LightBlue;stroke:black;stroke-width:3;"></polygon>

 </svg>

Note:  for drawing polygon we use some properties there are:

Fill: fill the color

Stroke: set stroke color

Stroke-width: set the stroke width

Screen Shot

Another polygon example

Here we draw a regular polygon shape

<svg width="200" height="200">

   <polygon points="0,100 0,50 0,50 50,0 50,0 100,0 100,0 150,50 150,50 150,100 150,100 100,150 100,150 50,150 50,150 0,100"

   style="fill:LightGreen;stroke:black;stroke-width:1;"></polygon>

 </svg>

Screen Shot


Don't want to miss updates? Please click the below button!

Follow MindStick