What renders faster - DOM elements or SVG elements with similar functionality?

Question

HTML

if instead of divs and spans and their effects, we make rectangles and text and svg effects
and animations comparable in complexity,
what will be rendered faster? and how
and how to measure the rendering speed of a large document?

Answer 1

SVGs are also DOM elements, so I believe they will render just like HTML elements with position: absolute;

Answer 2

In Chrome DevTools, open the Timeline tab, refresh the page.
There you can track the execution time of scripts and the rendering time.

Answer 3

If the SVG elements are simple, then it is significantly faster than the DOM - though still not as fast as we would like. Because the DOM element inside is more complicated, it has more properties, methods, etc.
If you wind up SVG a lot - gradients, filter cascades - you can wind it up so that it will be slower.
Real life example - Leaflet cards.
If you put 3-5 hundred markers (which are DOM elements) on the map, it will lag, and a similar number of SVG points works fine. But if you increase the number to several thousand, then the SVG will also be embedded. To the question "a few thousand is how much?" I will answer that it very much depends on the browser.