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>?