Simple task (SVG vs. Canvas) [closed]

Question

I just want to make 200 clickable nodes (capture mouse events) which are connected by lines. Each node has some data associated with them in form of live data streams ( for simplicity assume CSVs) and clicking on node shows up the values plotted in a graph.

• The area in which all these nodes and lines are there, should be zoom-able.

Even after googling a lot, I confused for something as simple as this SVG is more suited or Canvas. Moreover what libraries will be best for the purpose. Like for Canvas we have KineticJS (with HTML5) and for SVGs we have d3 and all.

Experts, Please suggest. Thanks a lot in advance.

Answer 1

SVG is way better for that. Canvas has no mouse events, you would have use a picking technic.

Answer 2

It depends. If you have complex visuals associated with each node, it would work much faster if you rasterize a node once, then clone and draw on canvas rather than use SVG. It can be done using Paper.js for example (and it has some support for mouse events). If your nodes are simple, say, simple rectangles or something, you can use SVG. Some browsers are more efficient with SVG than others. For example, IE9 has very efficient SVG support, so if you target particular browser, check out it's SVG drawing speed first.
BTW, Paper.js is particularly useful if you want to rotate, zoom, move objects and groups of objects etc. It has a pretty good support for that.