Why is SVG rendering so slow?

I want to make animated SVG graphics (as in having a single SVGSVGElement and animating attributes of thousands of descendant elements). For example, make I want to make a force-directed graph with thousands of nodes.

It is nearly impossible to do this by animating SVG elements.

In contrast, I can use a library like Two.js to achieve the same things. In fact, Two.js has an SVG interpreter that can read an SVG from DOM and create a drawing from it which can then be animated with SPEED.

Why is the native SVG implementation so slow compared to concepts like Two.js.

Here's three examples, comparing native SVG, Pixi.js, and Two.js. Both Pixi and Two win, while SVG is the slowest:

- https://jsbin.com/nohovowupa/edit?js,output (Two.js, fastest, 10000 circles)
- https://jsbin.com/vizuwemibe/1/edit?js,output (Pixi.js, slower, 2000 circles)
- https://jsbin.com/xocarayepi/edit?js,output (native SVG, slowest, 1000 circles and barely chugging)

By observing those examples, you can infer this: if it can be done in JavaScript, then it can certainly be done in native CPP.


But why isn't it? What's taking browser vendors (f.e. Mozilla) so looooong to achieve this performance?