CODEWITHSUNDEEP
javascripthtmlcsssvg
Jon Sud
Jon Sud

Reputation: 11671

How set svg element as background-image in div?

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 -->

Upvotes: 6

Views: 7756

Answers (2)

Ted Whitehead
Ted Whitehead

Reputation: 1826

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>

Upvotes: 0

cloned
cloned

Reputation: 6752

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>

Upvotes: 4

Related Questions