HTML5 Canvas versus SVG for interactive charts and graphical models
Some links and notes:
- sitepoint: Canvas vs SVG: How to Choose the Right Format
- MSDN Blogs > IEBlog> Thoughts on when to use Canvas and SVG
- dev.opera.org: SVG or Canvas? Choosting between the two
- Sencha Touch Charts describing why they went with Canvas not SVG
- stackoverflow posts:
- What is the difference between SVG and HTML5 Canvas?
- HTML5 Canvas vs SVG vs div
- Suggestions: Canvas or SVG?
- Why do we need the HTML5 Canvas element when the same can be achieved through SVG?
- Library for Canvas / SVG web-based tree graphs with layout algorithm?
- jQuery SVG vs. Raphael - vast majority of support is for Raphael
Toolkits and Frameworks
- Paper.js - Vector Graphics Scripting based on Canvas
- Raphaël - based on SVG. Links to tutorials in this SO thread. Makes animation and interaction easy. Good support. MIT License. Draggable graphical model is one of the examples. Also see this SO post on using dynamic data with Raphael. Some libraries built on Raphaël:
- Really good comparison between Raphaël, Paper.js and Processing
Tutorials and demos
- HTML5 graph slider using canvas and jQuery
- 2D function glotter using canvas (full screen; zoom and pan)
- HTML5 Canvas Graphic Solutions every web developer must know
I should use Raphaël and one of its graphing add-ons. I need to do more than just plot a standard line chart; I want lots of interaction.
Canvas is a lower level graphics API than SVG. Canvas thinks in terms of individual pixels whilst SVG thinks in terms of vector objects. Canvas is good for high performance 2D graphics like games; but SVG is good for applications which draw objects like boxes, lines etc. My only slight concern about using SVG is that I may run into performance issues if I want to build a full-screen waveform viewer. Also,pre-Honeycomb Android doesn't support SVG (but does support Canvas). But I don't care about pre-Honeycomb Android for my specific application.