HTML5 SVG Tag
HTML5 introduced very special element knon as SVG element which is stands for scalable vector graphics. HTML5 SVG Tag is basically designed to create vector graphics in XML format like 2D, charts etc. It is the recommendation of W3C. The <svg> element is used as ccontainer for SVG graphics.
All most all the web browsers support SVG just like any image format like PNG, GIF, and JPG. SVG element provides several built in methods for drawing paths, rectangle, circles, text, and graphic images. Internet Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.
Advantages of SVG
- The beggest advantage of SVG is, its images can be created and edited with any text editor.
- The SVG images can be searched, indexed, scripted, and compressed.
- The SVG images can be scalable.
- The SVG images are printable with high quality at any resolution.
- The SVG images can be zoomed without loosing quality.
Syntax
<svg width="100" height="100"> SVG method will come here... </svg>
Browser Support
Almost all latest browsers like Safari, Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9.0 support many HTML5 features and functionalities. The good thing is that now many mobiles web browsers like iPhones, iPads, and Android phones all have excellent support for HTML5.
 |
 |
 |
 |
 |
SVG Line
The <line> element of SVG is used to create a line connecting two points.Example
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8" />
<title>HTML5 SVG Element Line Example</title>
</head>
<body bgcolor="#fvvyee">
<svg width="100" height="100">
<line x1="10" y1="10" x2="10" y2="100"
stroke-width="3" stroke="blue"/>
</svg>
</body>
</html>
This will produce following result
SVG Circle
The <circle> element of SVG is used to create circles based on a center point and a radius.Example
<svg width="130" height="300"> <circle cx="50" cy="50" r="40" stroke="blue" fill="red"/> </svg>
This will produce following result
SVG Ellipse
The <ellipse> element of SVG is used to create ellipses based on a center point and a radius.Example
<svg width="120" height="120"> <ellipse cx="60" cy="60" rx="50" ry="25" stroke="blue" fill="red"/> </svg>
This will produce following result
SVG Rectangle
The <rect> element of SVG is used to create rectangle based on a the position of a corner and their width and height.Example
<svg width="120" height="120">
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"/>
<rect x="120" y="10"
width="100" height="100"
rx="15" ry="15" stroke="black" fill="yellow"/>
</svg>
This will produce following result
SVG Polygon
The <polygon> element of SVG is used to create polygon shap consisting of a set of connected straight line .Example
<svg width="120" height="120"> <polygon points="60,20 100,40 100,80 60,100 20,80 20,40" stroke="black" fill="red"/> </svg>
This will produce following result
