Extracting Sprites From SVG File

This example has a polygon sprite svg file. Each sprite has a unique id, and will build a <use> element when it is requested. The use requests the sprite via use.setAttribute("href","polygonSprites.svg#"+spriteId). Therefore the <use> element's href does not have to be stored in a <defs> element. Note: Each sprite was created with its center at (0,0), therefore translations and scale are accurate.
This is supported by all current browsers
Select a sprite below via its checkbox, then click on the SVG drawing to locate it.


Sprite SVG File:

SVG Source:
Javascript: