a blog for those who code

Monday 11 January 2016

What is HTML5 SVG and How it is different from HTML5 Canvas

In this post we will discuss about HTML5 SVG and how it is different from HTML5 Canvas. SVG stands for Scalable Vector Graphics and it is used for 2D-graphics graphical representation in HTML5. SVG images and their behaviors are defined in XML files and the XML is then rendered by an SVG Viewer. SVG as the name suggests is mostly useful for vector type diagrams like graphs, pie chart etc.

The advantages of SVG images are that they are scalable and can be printed with high quality at any resolution.

Embedding SVG in HTML5 :

<svg width="200" height="200">
  <line> </line> //to create straight line
  <rect> <rect> //to create simple rectangle and square shapes
  <circle> </circle> //to create circle shapes
  <text> </text> //to draw text on web pages
</svg>

Current Browser Support of SVG Element.


Difference between HTML5 SVG and HTML5 Canvas

1. SVG is vector based i.e. composed of shapes whereas Canvas is raster based i.e. composed of pixels.
2. SVG is modified through script and css whereas Canvas is modified through script. Since SVG images are defined in XML that's why every SVG element are is appended to DOM and can be manipulated through JavaScript and CSS. But Canvas is a simple graphics API which draws pixel that can't be altered (as there is no preexisting image). To edit Canvas element you have to redraw the canvas.
3. SVG is resolution independent whereas Canvas is resolution dependent.
4. SVG has better scalability than Canvas. Thus SVG can be printed with high quality at any resolution whereas Canvas is not suitable for printing high resolution.

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment