A little guide to HTML5 — SVG

SVG stands for Scalable Vector Graphics.We can do so many cool things on the web using SVG.Let’s get started.
To create a svg , we use <svg> tag.
For example : Below code creates a 500 x 500 svg.(width and height can be set using CSS too).
<svg width=”500" height=”500">
<style>
svg{
background-color:#1e0233;
}
</style>
</svg>
Creating circles,paths,rectangles and many other complex shapes is pretty easy in SVG.
Creating a rectangle in SVG :
To create a rectangle we use <rect /> tag,some of its attributes are
x - X coordinate of the rectangle.y- Y coordinate of the rectangle.width-width of the rectangle.height-height of the rectangle.
For example:
<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
</svg>
Creating a circle in SVG :
To create a circle we use <circle /> tag,the attributes cx & cy refer to the x and y coordinates of the center of the circle.r-radius of the circle.
For example:
<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
</svg>
Creating a path in SVG :
Paths in svg can be used to create complex shapes,curves etc.To create a path we use <path />. The attribute d consists of series of commands about drawing the path.
For example d=”M 100 100” says move to the (100,100).d=”L 200 100” says a draw a line to (200,100) and d=”H x” draws a horizontal line and d=”V y” draws a vertical line and Z closes the path.
For example:
<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
</svg>
Creating a line in SVG :
A simple line can be created using <line />. Some of it’s attributes arex1-x coordinate of starting pointy1-y coordinate of starting pointx2-x coordinate of ending pointy2-y coordinate of ending point.
For example:
<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" /></svg>

Placing text in SVG :
<text /> tag is used for this purpose and x,y attributes specify and x and y coordinates.
For example :
<svg width="500" height="500">
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
.text{
font-size:1.4em;
fill:yellow;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" />
<text class="text" x="230" y="260">SVG<text/>
</svg>
<defs> and <use> in SVG:
Reusable paths,shapes etc can be placed inside <defs>.
In the below example path with id linePath is used by setting attribute href of use tag to linePath
<svg width="500" height="500">
<defs>
<path id="linePath" d="M100 400 L400 100" style="stroke-width:2;stroke:deeppink" />
</defs>
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
.text{
font-size:1.4em;
fill:yellow;
}
</style>
<rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" />
<use class="linePath" href="#linePath"></use>
<text class="text" x="230" y="260">SVG<text/>
</svg>
Curved text using <textPath> in SVG :
This is same as use tag,here you will set href of <textPath> to the id of your path.
For example:
<svg width="500" height="500">
<defs>
<path id="linePath" d="M100 400 L400 100" style="stroke-width:2;stroke:deeppink" />
<path id="textPath"d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
</defs>
<style>
svg{
background-color:#1e0233;
}
.rect{
fill:#05464f;
}
.circle{
fill:#6d1d40;
}
.path{
fill:#117552;
}
.line{
stroke-width:2;
stroke:deeppink;
}
.text{
font-size:1.4em;
fill:yellow;
}
.textPath{
font-size:1.4em;
fill:yellow;
}
</style><rect class="rect" x="100" y="0" width="300" height="100" />
<circle class="circle" cx="250" cy="250" r="100" />
<path class="path" d="M 100 500 V 400 H 400 L 400 500 Z" />
<line class="line" x1="100" y1="100" x2="400" y2="400" />
<use class="linePath" href="#linePath"></use>
<text class="text" x="230" y="260">SVG</text>
<text class="textPath">
<textPath href="#textPath">
A Little Guide
</textPath>
</text>
</svg>

viewBox in SVG:
To get a clear idea about scaling svg,go to this link.
Complete code :
Clap it if you like it.
