HTML5 SVG - HTML 5

What is SVG in HTML5?

SVG stands for Scalable Vector Graphics is a language used for describing 2D-graphics and graphical applications in XML and XML is then rendered by an SVG viewer.

SVG is frequently used for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc. SVG became a W3C Recommendation on 14th January 2003.

Viewing SVG Files

Most of the web browsers display SVG similar to PNG, GIF, and JPG. Internet Explorer users might have to install the Adobe SVG Viewer for viewing SVG in the browser.

Embeding SVG in HTML5

HTML5 allows embedding SVG directly using <svg>...</svg> tag which has below simple syntax
A configuration option ("about:config") was introduced by Firefox 3.7 where user can enable HTML5 using below steps
  • Type about:config in the Firefox address bar.
  • Click the "I'll be careful, I promise!" button on the warning message that appears.
  • Type html5.enable into the filter bar which appears on top of the page.
  • Currently it would be disabled, so click it to toggle the value to true.
Now Firefox HTML5 parser will be enabled and user can try below shown examples.

HTML5 − SVG Circle

Below is an SVG example of HTML5 version which would draw a circle using <circle> tag

Output

HTML5 SVG Circle

HTML5 − SVG Rectangle

Below is an SVG example for HTML5 version which would draw a rectangle using <rect> tag

Output

HTML5 SVG Rectangle

HTML5 − SVG Line

Below is an SVG example of HTML5 version which would draw a line using <line> tag
User can use style attribute that allows the user to set additional style information like stroke and fill colors, width of the stroke etc.

Output

HTML5 SVG Line

HTML5 − SVG Ellipse

Below is an SVG example of HTML5 version which would draw an ellipse using <ellipse> tag

Output

HTML5 SVG Gradient Ellipse

HTML5 − SVG Polygon

Below is an SVG example of HTML5 version which would draw a polygon using <polygon> tag

Output

HTML5 SVG Polygon

HTML5 − SVG Polyline

Below is an SVG example of HTML5 version which would draw a polyline using <polyline> tag

Output

HTML5 SVG Polyline

HTML5 − SVG Gradients

Below is an SVG example of HTML5 version which would draw a ellipse using <ellipse> tag and use <radialGradient> tag for defining SVG radial gradient.
Similarly user can use <linearGradient> tag to create SVG linear gradient.

Output

HTML5 SVG Gradient Ellipse

HTML5 − SVG Star

Below is an SVG example of HTML5 version which would draw a star using <polygon> tag.

Output

HTML5 SVG Star

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics