HTML 5: how to implement a complex network

What is the correct approach if you plan to implement a (complex, interactive) network diagramm in "HTML5", which is part of a modelling tool - for example to let the user 开发者_开发知识库design a workflow?

Is SVG the right approach or using directly Javascript/Canvas?. Is there any productive application out there, which has proved that this is doable in HTML5 (the network model can be quite complex), especially regarding performance?

I do not need any implementation details, just a hint to the 'correct' technology if you would be 'forced' to do this in HTML5...

Thanks.

svg now has support from ie9. canvas is supported in most modern browsers and css is supported by all.

svg has the advantage of beeing scalable (the 'image' is a vector map, so the user can have it in every size he prefers), but the performance of beeing rendered is a bit crappy. You can bind some events to the elements..

canvas is like GDLib or ImageMagick, you have a white sheet, where you can plot onto. So if you do a change, you first have to clear the canvas and redraw everything. You don't know onto what element a user has clicked onto and only can bind events generally for the whole canvas element.

Using HTML and the DOM with CSS would be an alternative, since you just could start moving elements of the network arround and can bind events to nodes of your network. But lines are quite hard to implement (can use a rotated div with top-border)

I personally would go for a hybrid between svg and plain html, but then again, I don't know every use-case of your application.