{Tutorial}HTML5 HTML5 SVG.Step 26.

MrHotFire · December 13, 2012

What is SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define vector-based graphics for the Web

SVG defines the graphics in XML format

SVG graphics do NOT lose any quality if they are zoomed or resized

Every element and every attribute in SVG files can be animated

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

SVG images can be created and edited with any text editor

SVG images can be searched, indexed, scripted, and compressed

SVG images are scalable

SVG images can be printed with high quality at any resolution

SVG images are zoomable (and the image can be zoomed without degradation)

Browser Support

Internet Explorer,Firefox,Opera,Google Chrome,Safari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support inline SVG.

Embed SVG Directly Into HTML Pages

In HTML5, you can embed SVG elements directly into your HTML page:

Example:

 <!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas 	

    Resolution dependent
    No support for event handlers
    Poor text rendering capabilities
    You can save the resulting image as .png or .jpg
    Well suited for graphic-intensive games


SVG


    Resolution independent
    Support for event handlers
    Best suited for applications with large rendering areas (Google Maps)
    Slow rendering if complex (anything that uses the DOM a lot will be slow)
    Not suited for game applications

Credits Olympus,Internet,ME.

{Tutorial}HTML5 HTML5 SVG.Step 26.

Recommended Posts

MrHotFire

Join the conversation

Posts

Topics

Browse

Activity

Store