HTML5 Svg

SVG stands for Scalable Vector Graphics. It is W3C recommended. The graphics in SVG are defined in XML format. It is an open standard that has been actively developed by the W3C. SVG generated graphics are vector based that require less storage space and image can be scaled up or down without the loss of quality. It is supported by all major browsers.

Each element of SVG is part of the DOM, it can be styled with CSS and add behavior with the SVG DOM. It is good for data charts, interactive animation, resolution independent graphics.

SVG Element

SVG tag is used to add svg on the web page.

Example

<svg xmls="http://www.w3.org/2000/svg">
...
</svg>

To draw the shape element inside the parent SVG element, different shapes are available like, rect, circle, line, polygon, polyline, ellipse etc.

Example

<svg xmls="http://www.w3.org/2000/svg">
<rect fill="red" stroke="blue" x="150" y="100" width="100" height="80"/>
</svg>

Output of the above code

In the above example, x and y coordinates represent the starting coordinates for drawing. It means the rectangle will be drawn from 50 pixels from the left and 20 pixels from the top.