My approach to reusing certain SVG objects involves defining symbols in an SVG element at the top of my DOM. When I want to display an SVG, I typically use:
<svg><use xlink:href="#symbol-identifier" /></svg>
For animating SVG's, I rely on Snap.svg. However, I've encountered an issue where creating a Snap object from an SVG referenced by an xlink seems impossible. To solve this problem, my plan is to dynamically inject the SVG contents (already existing in the DOM) into the SVG currently using the xlink.
In order to achieve this, I need to extract the contents (innerHTML?) of a symbol. This method has proven effective in all browsers I tested, with the exception of mobile safari.
Below is a simplified test scenario without the symbol-wrap but operating similarly:
HTML:
<div id="outer" style="width: 100px; height: 100px;">
<svg id="inner" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="5" fill="#ffffff" />
</svg>
</div>
Javascript:
var outerElement = document.getElementById('outer');
var innerElement = document.getElementById('inner');
outerElement.innerHTML // returns <svg id=".. etc..
innerElement.toString() // returns [object SVGSymbolElement]
innerElement.getAttribute('viewBox') // returns 0 0 100 100
innerElement.innerHTML // returns undefined (in Mobile Safari)
// The content <circle .. etc .. is returned everywhere else.
Why does this happen? Is there an alternative method to obtain the SVG contents as a string without removing unwanted HTML using regex?