HTML5 Difference Between SVG and Canvas

Both Canvas and SVG are graphics features of HTML5 for creative interactive web designs. Depending upon your choice, you can choose Canvas or SVG or a combination of both. SVG is at a higher level as each drawn shape is remembered as an object in a scene graph which is rendered to a bit map afterwards whereas Canvas is a lower level protocol.

The main differences between them are as below

Format

SVG is Shape Based whereas Canvas is Pixel based.

DOM Dependency

Canvas has no dependency on the DOM while SVG depends heavily on DOM.

Feature Specification

If you just want image or graph on the screen then you can use Canvas e.g. PNG, BMP etc. but if you want give some features of your graphics like zoom, mouse over etc then you can use SVG.

Modification

In SVG, modification is possible using script and CSS while in Canvas, modification is possible using script only.

Redrawing

With SVG, it is possible to redraw the image by just looking at the elements and attributes whereas with Canvas you have to redraw every frame yourself using the API.

Resolution

Resolution remains the same across platforms for images created using SVG which lacks in Canvas.

Performance

In SVG, performance is better with small number of objects, a larger surface or both while in Canvas, performance is better with comparatively large number of objects, a smaller surface or both.

Example
  • SVG: Google Maps are created using SVG tool.
  • Canvas: Writing Image Filters in JavaScript using Canvas tool.

See Also

HTML5 Web Storage
HTML5 Audio Tag
HTML5 Video Tag
HTML5 Canvas
HTML5 SVG Tag

You May Like

Commonly asked HTML5 Questions and Answers.
Some useful Javascript Tools.

Complete HTML5 Reference

The reference contains descriptions and examples for all HTML5 HTML5 Events Reference, HTML5 Elements Reference, HTML5 Audio/Video Reference, HTML5 Input Attribute Reference
 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.