top button
Flag Notify
Site Registration

In Html5 What is the difference between SVG and Canvas?

0 votes
In Html5 What is the difference between SVG and Canvas?
posted Jul 1, 2014 by Parampreet Kaur

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+1 vote

SVG is like a "draw" program. The drawing is specified as drawing instructions for each shape and any part of any shape can be changed. Drawings are shape-oriented.

Canvas is like a "paint" program. Once the pixels hit the screen, that is your drawing. You cannot change shapes except by overwriting them with other pixels. Paintings are pixel-oriented.

Being able to change drawings is very important for some programs; e.g. drafting apps, diagramming tools, etc. So SVG has an advantage here.

Being able to control individual pixels is important for some artistic programs.

Getting great animation performance for user-manipulation via mouse drags is easier with Canvas than SVG.

A single pixel on the computer screen will often consume 4 bytes of information and a computer screen these days takes several megabytes. So Canvas might be inconvenient if you want to let the user edit an image and then upload it again.

By contrast, drawing a handful of shapes that cover the entire screen using SVG takes up few bytes, downloads quickly, and can be uploaded again easily with the same advantages going in that direction as when it comes down on the other direction. So SVG can be faster than Canvas.

Google implemented Google Maps with SVG. That gives the web app its zippy performance and smooth scrolling.

answer Jul 1, 2014 by Rajneesh
Nice Explanation Rajneesh.Really useful for me.Thank you so much.
Similar Questions
+2 votes

I need to create a charts.I wonder is it possible to create a chart in html5.Sorry am new to html5.If possible mean explain with example. Thx.