Question

Question:
Is canvas more suitable than svg in the following case?

Case:
I’m drawing a chart (using d3js library) similar to this one (but with much more data):

http://mbostock.github.com/d3/talk/20111116/iris-parallel.html

It’s based on an svg and it works fine for several thousands of lines (up to 5000), adding more lines (svg path) decreases the performance dramatically (scrolling in the page becomes slow)

Keep in mind: That I need to add mouse events (which is handy in svg)

Answer 1

Generally svg is better suited for vector images, like in your example. However canvas has a lot of benefits in modern browsers such as hardware acceleration, so for drawing the lines, as long as zooming, panning ect. isn’t required performance will be using canvas.

Mouse events can be a pain using canvas, since you have to manually keep track of everything, so with 5000+ points using canvas it wont be fun. The trade off however will be once the points are drawn, assuming you only draw them once the page will behave fine regardless of the number of lines, since they are all drawn to a raster image and aren’t part of the DOM.

Honestly though the best way to find it is to test what you currently have using canvas.