CODEWITHSUNDEEP
javascriptperformancecanvassvg
SimplGy
SimplGy

Reputation: 20437

Web App Performance: SVG, Canvas, or Dom Manipulation

I'm working on an application that will display a 'boxes and arrows' diagram similar to a Visio. Some elements are drag and drop-able. Key features are opacity, angled connecting lines, and some animated transitions.

Target platforms are webkit browsers, iOS tablets, and android tablets.

(I see this question, but the links I saw do not give a high level performance comparison of the two Canvas versus SVG animations (effects[filters] and performance))

What web technology will give me the best performance for this kind of rendering and manipulation? Canvas drawing, SVG, or div/Dom manipulation?

Upvotes: 2

Views: 1070

Answers (1)

kevin628
kevin628

Reputation: 3526

Canvas: gives you complete control over everything. You can define your shapes and text and other widgets yourself. You have pixel level control.

SVG: gives you a large array of shapes and effects to use. SVG is in XML, which-- excuse my personal bias-- I love the most about it.

DOM: probably the trickiest to use because you have to fight with cross-browser compatibly issues, but the trade off is that it's easy to express effects with CSS and animations or other logic with JavaScript.

Performance? Not really sure. Your target platform range is quite wide. You'll just have to do a little empirical or benchmark testing.

Canvas will probably get you the fastest performance if you use common shortcuts like stacking canvases or drawing off-screen, among others.

All my opinion, of course.

Upvotes: 4

Related Questions