HTML5 SVG Element

HTML5 introduced very special element knon as SVG element which is stands for scalable vector graphics. SVG element 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

See Also

HTML5 Web Storage
HTML5 Audio Tag
HTML5 Video Tag
HTML5 Canvas
HTML5 SVG Tag


 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.