title: Inserting SVGs with conflicting IDs using javascript
body: <p>SVGs inserted into a document using javascript look like gibberish because they have symbols with conflicting IDs inside them. For instance, these two different svg files</p>
  
  <p><a href="http://filebin.ca/1LMtJr5zc2x/svg1.svg" rel="nofollow">http://filebin.ca/1LMtJr5zc2x/svg1.svg</a></p>
  
  <p><a href="http://filebin.ca/1LN9F5ZPIbH/svg2.svg" rel="nofollow">http://filebin.ca/1LN9F5ZPIbH/svg2.svg</a></p>
  
  <p>When inserted into a document with javascript*, one of them looks wrong (in my case the a's turned into x's). If you open the SVG files with a text editor you'll see they both have a line like this</p>
  
  <pre><code>&lt;symbol overflow="visible" id="glyph0-0"&gt;
  </code></pre>
  
  <p>So I'm guessing the browser sees the second svg reference "glyph0-0" and uses the one defined by the <em>first</em> svg. Is there some way to tell the browser "symbols defined inside an &lt;svg> only matter there"? Like restricting the scope of symbols.</p>
  
  <p>&lt;img> tags which point to those two files don't have this problem. However I'm not using that solution because then the server would have to keep a bunch of files around and keep track of when they can be thrown away. With my current solution the browser has the SVGs in memory and they're gone when the window closes.</p>
  
  <p>*with XMLHttpRequest, I fetch a dynamically-generated SVG file, clone the root &lt;svg> tag and append it to the document. </p>