SVG

SVG stands for Scalable Vector Graphics and it is used for 2D-graphics graphical representation with Html5. Sometimes we need to draw a graphic representation in Web. In Html5 We already know about the canvas, by which we were able to create the graphical representation. But the new feature of Html5 is SVG element, by which we can also draw the graphical representation. There are some certain additional features, those are -

• It is used to define vector-based graphics for the Web.
• It defines the graphics in XML format
• Graphics of SVG do not lose any quality if they are zoomed or resized.
• All the element in SVG files can be animated.
• It is the recommendation of W3C.

Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

Advantages of SVG

• It's images can be created and edited with any text editor.
• It's images can be searched, indexed, scripted, and compressed.
• It's images are scalable.
• It's images can be printed with high quality at any resolution.
• It's images are zoomable without loosing quality.

Differences between SVG and Canvas

SVG is a language for describing 2D graphics in Xml. But Canvas draws 2D graphics, with the help of JavaScript.

In SVG, all drawn shape is remembered as an object. If any attributes of an SVG object are changed, the browser can automatically re-render the shape. But Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, and if its position should be changed, the entire scene needs to be redrawn.