Assuming a relatively modern, SVG-supporting desktop browser and an SVG consisting of hundreds of similar, simple nodes:
- The document could be set up as many individual shape elements (
<circle>
,<line>
, etc.) with their own attributes defined. - The document could be set up as a few
<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
- Are there any clear patterns to
<symbol>
/<use>
performance? - How idiosyncratic is it to individual browser implementations?
- Are there differences between reusing
<symbol>
vs<g>
vs nested<svg>
?