Assuming a relatively modern, SVG-supporting desktop browser and an SVG consisting of hundreds of similar, simple nodes:
<circle>
, <line>
, etc.) with their own attributes defined. <symbol>
elements and many individual <use>
instances that place them and size them appropriately (W3 spec). I understand the semantic and code-maintenance reasons to use <symbols>
/<use>
, but I'm not concerned with those now, I'm strictly trying to optimize rendering, transformation and DOM update performance. I could see <symbol>
working similar to reusing sprites in Flash, conserving memory and being generally a good practice. However, I'd be surprised if browser vendors have been thinking this way (and this isn't really the intent of the feature).
Edit: I am not expecting the base symbols to be changed or added to over the life-cycle of the SVG, only the instance locations, sizes, etc
<symbol>
/<use>
performance? <symbol>
vs <g>
vs nested <svg>
?Rohit Kalkur compared rendering speed of the creation of 5000 SVG symbols using use
against directly creating the SVG symbol's shapes, see here. It turns out that rendering SVG
shapes using use
was almost 50% slower. He reasons that:
The use element takes nodes from within the SVG document, and duplicates them in a non-exposed DOM
Given this, I assume that using SVG symbol
s is at best as performant as manually creating the symbols
s shape.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With