---
title: "HTML5 Inline SVG"  
description: "HTML5 has support for inline SVG. Here we draw a polygon shape using SVG tags.SVG-Polygon code  style=\"fill:LightBlue;stroke:black;stroke-width:3;\""  
author: "AVADHESH PATEL"  
published: 2012-10-20  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/380/html5-inline-svg  
category: "html5"  
tags: ["html5"]  
reading_time: 1 minute  

---

# HTML5 Inline SVG

[HTML5](https://www.mindstick.com/articles/1535/offline-add-edit-delete-data-in-html5-indexeddb) has [support](https://yourviews.mindstick.com/view/286/modi-support-for-sportsperson) for [inline](https://www.mindstick.com/interview/1012/describe-the-difference-between-inline-and-code-behind) [SVG](https://www.mindstick.com/forum/159187/create-svg-progress-bar-to-move-anti-clockwise-using-css). Here we draw a [polygon](https://www.mindstick.com/news/1219/crypto-prices-bounce-back-to-green-zone-as-bitcoin-ether-most-altcoin-bag-gain) shape using SVG tags.

SVG-Polygon [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii)

```
<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](https://www.mindstick.com/articles/23331/nootropics-7-different-types-and-their-unique-properties) there are:

Fill: fill the [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp)

[Stroke](https://www.mindstick.com/blog/11707/what-you-can-do-to-reduce-your-risk-of-strokes): set stroke color

Stroke-width: set the stroke width

##### Screen Shot

![HTML5 Inline SVG](https://www.mindstick.com/blogs/8481ed8e-1996-45ff-bff8-fba4db8e1abc/images/da4f9919-c4e7-4634-8201-84ae4c43db66.png)

##### 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

![HTML5 Inline SVG](https://www.mindstick.com/blogs/8481ed8e-1996-45ff-bff8-fba4db8e1abc/images/1ca89247-d577-4e7c-9c9a-a3e7436e5ce0.png)

---

Original Source: https://www.mindstick.com/blog/380/html5-inline-svg

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.