HTML5 SVG Intro
Learn to create SVG(Scaleable Vector Images) graphics using XML markups.
1.SVG(Scaleable Vector Graphics) is a graphics standard maintained by World Wide Web Consortium(W3C).
2.SVG enables you to create two-dimensional Vector Images, which consists of mathematical representation of objects and can be scaled infinitely without any loss in Quality.
SVG v/s Raster?
1.While all other graphics are pixel based bitmap(or Raster), SVG graphics are based on vectors and not pixels.
2.Vector images are composed of shapes, defined by simple XML based markups and filled with colors, gradients and patterns.
3.SVG graphics are scaleable infinitely without any loss in Quality.If, you zoom on a bitmap(pixel based) Image, it can be zoomed upto a maximum resolution, after which the quailty declines and pixels start to break up.SVG has no such issues.
Advantages of SVG
Open-Source(XML): Based on XML(endorsed by W3C),source code can be viewed by all.SVG is non-proprietary and vendor neutral
Client-Side: SVG is a client-side graphics, hence has a very light load on the webserver. Also, SVG is dynamic and interactive.
Web-Apps: SVG has been incorporated with HTML5 specifications, thus can be used by Web Apps developers.
Related Technologies: SVG has overlaps with Flash, Vector Markup Language(VML), Silverlight and hence can be used cross-platform.
Browser Support for SVG.
1.The SVG is supported on latest versions of all major browsers.
Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.
Incorporating SVG within your HTML5 document.
1. HTML5 enables you to add SVG graphics directly into the webpage.
2. The root element <svg> sets the width and height of the finished graphics in pixels.
3. The element <title> provides title to the document and is displayed on top of browser tab.
3. The element <desc> provides complete description about the image.