Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does reusing symbols improve SVG performance?

Tags:

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>?
like image 514
peteorpeter Avatar asked Dec 22 '11 14:12

peteorpeter


1 Answers

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 symbols is at best as performant as manually creating the symbolss shape.

like image 199
F Lekschas Avatar answered Sep 20 '22 02:09

F Lekschas