title: How to embedd an SVG File into another SVG
body: <p>I want to reference another SVG file in my main SVG file and show it there.</p>
  <p>The &quot;svg1.svg&quot;:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&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;main&quot;
      xmlns=&quot;http://www.w3.org/2000/svg&quot;
      viewBox=&quot;0 0 512 512&quot;&gt;
      &lt;path id=&quot;testPath&quot;
          d=&quot;M 100 350 q 150 -300 300 0&quot;
          stroke=&quot;blue&quot;
          fill=&quot;none&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>The &quot;referencing.svg&quot;:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&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;
      viewBox=&quot;0 0 100 100&quot;&gt;
      &lt;g transform=&quot;translate(20,20)&quot;&gt;
          &lt;circle r=&quot;10&quot;
              stroke=&quot;black&quot;
              fill-opacity=&quot;20%&quot; /&gt;
          &lt;use xlink:href=&quot;svg1.svg#main&quot;
              x=&quot;10&quot; /&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>The referencing.svg should show the content of the svg1.svg but its not showing up at all. Both Svg-Files are in the same local Folder.
  The validator at <a href="https://validator.w3.org/check" rel="nofollow noreferrer">https://validator.w3.org/check</a> says the Syntax is correct.</p>
  <p>Am I missing something or does it not work like this at all?</p>