title: img src=svg in the same document
body: <p>I have inline SVG with patterns. I need two different page layouts - one for "media print" another one for browsers. I am creating everything in #svgCanvas dynamically and I need it to appear at the bottom of my print layout. </p>
  
  <p>My first idea was to clone whole svg, but then I ended up with things having same ID's and Firefox and Edge got really upset about it. What are the alternatives to achieve this?</p>
  
  <p>I had a look at doing svg to html5 canvas conversion but for some reason that did not really work out for me so I though maybe there is another easier way like the one below? I know it is possible to do something like this: </p>
  
  <pre><code>&lt;img src="external.svg"&gt;
  </code></pre>
  
  <p>so thought I should be able to do the same with inline svg.</p>
  
  <pre><code>&lt;span class="media-print-only"&gt;
    some stuff
    &lt;img src="#svgCanvas"&gt;
  &lt;/span&gt;
  
  &lt;span class="no-media-print"&gt;
    some more stuff
    &lt;svg id="svgCanvas"&gt;
      &lt;defs&gt; some &lt;patterns&gt; &lt;/defs&gt;
      some lines and rectangles that are using patterns in defs
    &lt;/svg&gt;
    again more stuff
  &lt;/span&gt;
  </code></pre>