SVG vs canvas

Fundamental differences between SVG and canvas

  • SVG is DOM element. So it's managed, convenient, and slow. CSS Animation can be used, eventhandler can be used for hover/click. It's even responsive and browser provides a Current Transformation Matrix so you can translate client coordinate to SVG coordinate (the coordinates which the SVG is written in vs client coordinate of mouse etc). But this makes it slow. GPU and hardware rendering can't do all the job, because browser has to come in to maintain DOM tree, to apply CSS rules, to emit events, in single-threaded JS event loops
  • SVG is also scalable vector so you can zoom. It can be translated to bitmap and drawn
  • Canvas is draw-and-forget. It's pixels. So it's faster and GPU can help more. You need to calculate coordinates, animations, events. But it's fast because it's math. Not re-rendering. And anyway likely you will do frame-based game engine, e.g. 60fps, so you redraw every time. Indeed the canvas is redrawn every frame, but it's still fast.
  • It's also hard to do responsive canvas. You need to listen resize event, and recalculate
  • WebGL is a set of API that draws onto canvas. It uses canvas webgl context. Three.js uses WebGL, and it abstracts to scene, camera, and renderer level
Written on September 20, 2017