0

Can we say canvas has a greater scalability than SVG when you have to draw many elements?

I know SVG little, but I see that every element is a DOM object, so can we say SVG has a lower scalability than canvas because of the impact of many DOM objects on browser reflow/repaint?

cdarwin
  • 4,141
  • 9
  • 42
  • 66
  • Do you want to manipulate objects *after* they are drawn? If yes, you will keep a virtual DOM in canvas as well. In general, estimate the max amount of objects and do some benchmarks - SVG rendering in browsers might do some unexpected optimisations trick under the hood you don't know yet – nicholaswmin Aug 01 '17 at 22:15
  • Also I don't think browser reflow/repaint is taking place in SVG canvasses since SVG doesn't flow according to document flow, elements are drawn on absolute coordinates (in this context), i.e if you enlarge an SVG object it doesn't need to recalculate the position of other SVG's since SVG elements are not positioned relative to *another* SVG element - SVG groups being one of the few exceptions to this rule – nicholaswmin Aug 01 '17 at 22:17
  • Yes I need to move objects in an animation after they are drawn. – cdarwin Aug 01 '17 at 22:19
  • https://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div – nicholaswmin Aug 01 '17 at 22:22
  • thank you, that's a good answer, however no one says why svg is slow with many elements, i.e. no one talks about browser reflow/repaint. From what I understand, however, they say canvas has a better scalability in terms of number of objects drawn. – cdarwin Aug 06 '17 at 17:14

0 Answers0