title: How to reference external SVG file in SVG correctly?
body: <p>Hello I am working on an SVG/JS map, which consists of many little SVG graphics (City districts). I put every graphic into an own file so that my main SVG file will still be maintainable and not bloated.</p>
  <p>How can I reference an external SVG file from another SVG correctly?</p>
  <p>Expected result: Open 1.svg in a browser and see a blue rectangle.
  How it should work: <a href="http://www.w3.org/TR/SVG/struct.html#UseElement" rel="nofollow noreferrer">w3c: use element</a></p>
  <p>So this is what I tried:
  1.svg:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
  &lt;?xml-stylesheet href=&quot;style.css&quot; type=&quot;text/css&quot;?&gt;
  &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.0//EN&quot; &quot;http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd&quot;&gt;
  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;    width=&quot;1000&quot; height=&quot;1000&quot;&gt;
  &lt;use xlink:href=&quot;another.svg#rectangle&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>another.svg:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
  &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.0//EN&quot; &quot;http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd&quot;&gt;
  &lt;svg id=&quot;rectangle&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;    width=&quot;1000&quot; height=&quot;1000&quot;&gt;
  &lt;rect class=&quot;blue&quot; x=&quot;558.5&quot; y=&quot;570&quot; width=&quot;5&quot; height=&quot;5&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>style.css</p>
  <pre><code>.blue { fill: blue; }
  </code></pre>
  <p>Result:</p>
  <ul>
  <li>Firefox: A blue rectangle (exactly what I wanted)</li>
  <li>Chrome: <strong>Nothing</strong></li>
  <li>Opera: <strong>Black</strong> rectangle</li>
  </ul>
  <p>Note: I tried it with the image element but that didn't work with the stylesheets i.e. I got a black rectangle not a blue one.</p>
  <p><strong>Important:</strong> When you want to reference another SVG <strong>and</strong> want to have the referenced SVG to be part of the formal document structure, you can <a href="http://wiki.svg.org/index.php/XMLHttpRequest" rel="nofollow noreferrer">use AJAX</a> to do that.</p>
  <p><a href="https://bugs.webkit.org/show_bug.cgi?id=12499" rel="nofollow noreferrer">https://bugs.webkit.org/show_bug.cgi?id=12499</a></p>