CODEWITHSUNDEEP
htmlcsssvg
RuLee
RuLee

Reputation: 183

Use inline SVG with HTML5 as a background in a DIV element

I'm not very familiar with svgs. Please suggest anything I could use for the following situation. I have two divs like the following. The first div generates an svg and the second div is a normal div. I want to use the SVG which is generating from the first div as the background for the second div(main-div). I don't want to use absolute/fixed positioning in here. Is there any way to do that except use positioning?

<div class="svg-div" style="height: 150px; overflow: hidden;">
  <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
    <path d="M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #08f;"></path>
  </svg>
</div>

<div class="main-div"> 
  <ul> <li>a</li><li>b</li> </ul>
</div>

Thank you

Upvotes: 0

Views: 718

Answers (2)

Sana Mumtaz
Sana Mumtaz

Reputation: 833

  • Firstly, you need to add xmlns="http://www.w3.org/2000/svg" to your svg element.
  • Then, use the following JavaScript to set the background image.

var svg = document.getElementsByTagName('svg')[0];
var svgCode = window.btoa(svg.outerHTML);

document.getElementById('main-div').style.backgroundImage = "url(data:image/svg+xml;base64," + svgCode + ")";
<div class="svg-div" style="height: 150px; overflow: hidden;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<path d="M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #08f;"></path>
</svg>
</div>
<div id="main-div">
  <ul>
    <li>a</li>
    <li>b</li>
  </ul>
</div>

Read this to understand why xmlns is required.

Upvotes: 2

MaxiGui
MaxiGui

Reputation: 6348

The best would be to save SVG into an SVG file as it will be the most flexible for all browser.

After you can use the position even though you don't want.

Finaly after searching a bit more, I found out a subject using URI here.

But pay attention that it might not work in all browser (specialy olds ones).

So I search for a URI-Converter to SVG.

And the output is:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none' style='height: 100%25; width: 100%25;'%3E%3Cpath d='M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z' style='stroke: none; fill: %2308f;'%3E%3C/path%3E%3C/svg%3E");

Demo

.svg-div{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none' style='height: 100%25; width: 100%25;'%3E%3Cpath d='M0.00,49.99 C150.00,150.00 349.21,-49.99 500.00,49.99 L500.00,150.00 L0.00,150.00 Z' style='stroke: none; fill: %2308f;'%3E%3C/path%3E%3C/svg%3E");
}
<div class="svg-div" style="height: 150px; overflow: hidden;">
  <div class="main-div"> 
    <ul> <li>a</li><li>b</li> </ul>
  </div>
</div>

Upvotes: 2

Related Questions