What is HTML5 SVG

In this article I have described about the HTML5 SVG and HTML5 has support for inline SVG.
  • 2396

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

svg1.jpg
 

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

svg2.jpg
 

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

svg3.jpg
 

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

© 2019 DotNetHeaven. All rights reserved.