title: Unable to get SVG 'use' to work, if created dynamically
body: <p>SVG has a wonderful <code>symbol</code> / <code>use</code> system where one can define e.g. icons just one, then drop them around the SVG by using <code>use</code>. Only I don't get it to work from JavaScript.</p>
  
  <p>See this <a href="http://jsfiddle.net/bmdesignhki/tby6t3z8/" rel="nofollow">fiddle</a>.</p>
  
  <p>The programmatically created <code>use</code> nodes become visible in the browser's DOM, and are identical to the statically created ones. But only the static ones are visible.</p>
  
  <p>Can you explain what's going on?</p>
  
  <hr>
  
  <p><code>symbol</code> is very similar to <code>defs</code>, but allows the <code>viewBox</code> to be defined next to the symbol, thus making scaling of the entries easier and causes cleaner code. I'm okay working with <code>defs</code> but I faced similar issues there, too.</p>
  
  <p>Note: My JavaScript is on the HTML side, not within SVG. I would like to have it that way.</p>