title: Include one SVG inside another
body: <p>Is it possible to include one SVG inside another <em>without</em> rasterization effects? I've tried this</p>
  
  <pre><code>&lt;svg version="1.2" width="600.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
   &lt;image height="655.813953488" width="600.0" x="0" xlink:href="A.svg" y="0"/&gt;
   &lt;image height="740.540540541" width="600.0" x="0" xlink:href="B.svg" y="655.813953488"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Which renders a composite image of <code>A.svg</code> and <code>B.svg</code> but they lose their vector graphics properties and turn into bitmaps (tested in <code>chrome, inkscape, inkview</code> and <code>eog</code>). The resulting svg will not be displayed inside a webbrowser so external javascript calls are not an option. How can I "include" one svg inside another without copying and pasting and preserving vectorization?</p>
  
  <h2>Zoomed in results of composite image in chrome:</h2>
  
  <p><img src="https://i.stack.imgur.com/Ouoz4.png" alt="enter image description here"></p>
  
  <h3>(the effect is not present with <code>A.svg</code> alone)</h3>
  
  <p><strong>EDIT</strong>: Here are the exact images I'm using to test:</p>
  
  <h2>A.svg</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="129pt" height="141pt" viewBox="0 0 129 141" version="1.2"&gt;
        &lt;defs&gt;
          &lt;g&gt;
            &lt;symbol overflow="visible" id="glyph0-0"&gt;
       &lt;path style="stroke:none;" d="M 133.296875 0 L 133.296875 -5.1875 C 122.734375 -5.1875 119.15625 -5.1875 116.5625 -12.546875 L 72.328125 -137.6875 C 71.328125 -140.265625 70.9375 -140.875 68.9375 -140.875 C 66.953125 -140.875 66.546875 -140.265625 65.546875 -137.6875 L 23.3125 -18.125 C 19.53125 -7.375 11.5625 -5.1875 4.578125 -5.1875 L 4.578125 0 C 8.171875 -0.40625 16.140625 -0.40625 19.921875 -0.40625 C 24.90625 -0.40625 32.875 -0.40625 37.65625 0 L 37.65625 -5.1875 C 28.296875 -5.578125 26.90625 -11.953125 26.90625 -14.34375 C 26.90625 -16.140625 27.296875 -17.140625 27.703125 -18.328125 L 38.25 -48.015625 L 90.453125 -48.015625 L 102.421875 -14.140625 C 103.40625 -11.75 103.40625 -11.359375 103.40625 -10.5625 C 103.40625 -5.1875 94.84375 -5.1875 91.0625 -5.1875 L 91.0625 0 C 96.828125 -0.40625 107.203125 -0.40625 113.375 -0.40625 C 118.546875 -0.40625 128.515625 -0.40625 133.296875 0 Z M 88.671875 -53.203125 L 40.046875 -53.203125 L 64.359375 -121.734375 Z M 88.671875 -53.203125 "/&gt;
            &lt;/symbol&gt;
          &lt;/g&gt;
        &lt;/defs&gt;
        &lt;g id="surface1"&gt;
          &lt;g style="fill:rgb(0%,0%,0%);fill-opacity:1;"&gt;
            &lt;use xlink:href="#glyph0-0" x="-4.59" y="140.87"/&gt;
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>B.svg</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="111pt" height="137pt" viewBox="0 0 111 137" version="1.2"&gt;
        &lt;defs&gt;
          &lt;g&gt;
            &lt;symbol overflow="visible" id="glyph0-0"&gt;
       &lt;path style="stroke:none;" d="M 120.9375 -36.265625 C 120.9375 -54.203125 104.609375 -69.53125 83.28125 -70.9375 C 102.421875 -74.71875 115.765625 -87.46875 115.765625 -102.609375 C 115.765625 -119.15625 99.421875 -136.09375 73.71875 -136.09375 L 10.359375 -136.09375 L 10.359375 -130.90625 C 24.109375 -130.90625 26.296875 -130.90625 26.296875 -121.9375 L 26.296875 -14.140625 C 26.296875 -5.1875 24.109375 -5.1875 10.359375 -5.1875 L 10.359375 0 L 78.90625 0 C 104.40625 0 120.9375 -18.125 120.9375 -36.265625 Z M 101.21875 -102.609375 C 101.21875 -87.46875 89.0625 -72.328125 67.546875 -72.328125 L 38.859375 -72.328125 L 38.859375 -123.140625 C 38.859375 -129.90625 39.25 -130.90625 47.21875 -130.90625 L 72.71875 -130.90625 C 92.453125 -130.90625 101.21875 -114.96875 101.21875 -102.609375 Z M 106.203125 -36.46875 C 106.203125 -21.921875 94.84375 -5.1875 73.125 -5.1875 L 47.21875 -5.1875 C 39.25 -5.1875 38.859375 -6.171875 38.859375 -12.953125 L 38.859375 -69.140625 L 75.71875 -69.140625 C 96.234375 -69.140625 106.203125 -51.015625 106.203125 -36.46875 Z M 106.203125 -36.46875 "/&gt;
            &lt;/symbol&gt;
          &lt;/g&gt;
        &lt;/defs&gt;
        &lt;g id="surface1"&gt;
          &lt;g style="fill:rgb(0%,0%,0%);fill-opacity:1;"&gt;
            &lt;use xlink:href="#glyph0-0" x="-10.361" y="136.082"/&gt;
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>