Assuming a relatively modern, SVG-supporting desktop browser and an SVG consisting of hundreds of similar, simple nodes:

  1. The document could be set up as many individual shape elements (<circle>, <line>, etc.) with their own attributes defined.
  2. 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>?
performance svg visualization
Edit
Report