How set svg element as background-image in div?

Question

I have svg element that created during runtime on the page (it is create by another library).

Is it possible to use this svg (id="svg1") as background-image to another div?

<div style="height:300px;background-image:url(..svg1...)"></div>

svg1:

<svg id="svg1" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="xMidYMid meet">
    <rect . . . > . . . </rect>
</svg>

If it possible to do that in css only it will be great

 <svg id="svg1" viewBox="0 0 270 180" version="1.1" preserveAspectRatio="xMidYMid meet"><rect clip-path="url(#gwvlzeb48ee)" x="0" y="0" width="270" height="180" style="fill: url(&quot;#hz0tt22rgsn&quot;);"></rect><defs><clipPath id="gwvlzeb48ee"><rect x="0" y="0" rx="0" ry="0" width="270" height="140"></rect><rect x="0" y="145" rx="3" ry="3" width="150" height="15"></rect><rect x="0" y="165" rx="3" ry="3" width="150" height="15"></rect><rect x="220" y="145" rx="3" ry="3" width="50" height="15"></rect><rect x="220" y="165" rx="3" ry="3" width="50" height="15"></rect></clipPath><linearGradient id="hz0tt22rgsn"><stop offset="0.482599" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-2; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="0.982599" stop-color="#efefef" stop-opacity="1"><animate attributeName="offset" values="-1.5; 1.5" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="1.4826" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-1; 2" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg> <div style="border:1px solid red; height:300px; background-image:url(#svg1);"></div> 

Also this not working:

<!-- language: lang-html -->
<svg height="100" width="100" id="svg1">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg> 

<div style="border:1px solid red;height:300px; background-image:url(#svg1);"></div>

<!-- end snippet -->

Answer 1

You can write the SVG right in your CSS. It's also possible to use background-repeat and all other background-attribues with this approach too.

 div { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\\ <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />\\ Sorry, your browser does not support inline SVG. \\ </svg> ') 0 / auto 100%; } 

 <div style="height: 50px"> </div> 

Answer 2

You can also place the SVG inside of the div and stretch it to cover with CSS. The benefits of this approach is you can style the SVG with CSS, as opposed to inlining it in the CSS using background-image . It all depends on your particular use case.

Demo: https://codepen.io/tedw/pen/bGbKGPB?editors=1100

 .box { border: 1px solid blue; margin-bottom: 50px; position: relative; } .example-1 { height: 150px; width: 300px; } .example-2 { height: 200px; width: 200px; } .example-3 { height: 200px; width: 100px; } svg { fill: red; height: 100%; left: 0; position: absolute; top: 0; stroke: black; stroke-width: 3; width: 100%; } 

 <!-- Example 1 --> <div class="box example-1"> <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <circle cx="50" cy="50" r="40"/> </svg> </div> <!-- Example 2 --> <div class="box example-2"> <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <circle cx="50" cy="50" r="40"/> </svg> </div> <!-- Example 3 --> <div class="box example-3"> <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <circle cx="50" cy="50" r="40"/> </svg> </div>