What is HTML5 SVG
In this article I have described about the HTML5 SVG and HTML5 has support for inline SVG.
SVG
SVG stands for Scalable Vector Graphics.
What is SVG
- SVG is a W3C recommendation.
- It is used to define vector based graphics.
- HTML5 has support for inline SVG.
- SVG defines the graphics in XML format.
- If SVG are zoomed or resized, the quality of the SVG graphics remain same.
SVG Syntax
HTML5 allows embeding SVG directly using <svg>...</svg> tag. Which has following simple syntax
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
Browser Support
Following are the browsers that support the support inline SVG
- Internet Explorer 9,
- Firefox,
- Chrome
- Safari 5
Advantage of SVG
- SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs etc.
- Due to the use of mathematical formulae in SVG it require far less data to be stored.
- With zoomed or resized the SVG image, the quality of the SVG graphics remain same.
- SVG images are rendered by the browser and can be drawn programmatically.
- The source file of SVG image is accessible and search engine friendly because it is text based file.
SVG Example
Lets draw a rectangle
|
<!DOCTYPE html>
<head>
<title>SVG Rectangle</title>
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="400" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="green" />
</svg>
</body>
</html>
|
Output
Lets draw a circle
|
<!DOCTYPE html>
<html>
<body>
<h2>HTML5 SVG Circle</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="yellow" />
</svg>
</body>
</html>
|
Output
Lets Draw a line
|
<!DOCTYPE html>
<head>
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:blue;stroke-width:3"/>
</svg>
</body>
</html>
|
Output
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