Img Src=svg In The Same Document

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 i

Solution 1:

You can use use element for this purpose. When you create SVG graphic with id, you can refer it in any place by using use element, like this.

<span class="media-print-only">
  <div class="svg-container">
    <svg width="200px" height="200px">
      <use xlink:href="#svgCanvas"/>
    </svg>   
  </div>
</span>

<span class="media-no-print">
  <div class="svgRealPlace">
    <svg width="200px" height="200px">
      <use xlink:href="#svgCanvas"/>
    </svg>
  </div>
</span>

<!--defining base SVG graphic-->
<svg width="0" height="0">
  <svg id="svgCanvas" width="200px" height="200px">
    <defs>
      <pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="5" fill="blue"/>
      </pattern>
    </defs>
    <circle cx="100" cy="100" r="100" fill="url(#pattern)"/>
  </svg>   
</svg>

Note:
Base svg element or its ancestor elements must not have display:none style or hidden property, because they break reference to base svg. So I set size of container svg element to 0 to hide from screen.

Solution 2:

I found a workaround to this problem - use jquery to move svg to printable place just before window.print() method and put the svg back to its original place straight after the method:

HTML

<span class="media-print-only">
  some-stuff
  <div class="svg-container"></div>
</span>

<span class="media-no-print">
  some more stuff
  <div class="svgRealPlace">
    <svg id="svgCanvas">
      <defs> some patterns </defs>
      some lines and rectangles that are using patterns in defs
    </svg>
  </div>
  again more stuff
</span>

JS

function printButtonClicked(){
    $(".svg-container").append($('#svgCanvas'));
    window.print();
    $(".svgRealPlace").append($('#svgCanvas'));
}

Tested on Chrome, Firefox and Edge. I really hope there exists a better solution since DOM modifications are almost never a good idea.