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

Question

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

Is the SVG dynamically generated or why do you want it to be inline? — biberman, Sep 02 '21 at 11:14
Check this response: https://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text/37558030#37558030 — MaxiGui, Sep 02 '21 at 11:26
@biberman I generated it using an SVG generating site. I just want to display that kind of shape as the background for my lists — RuLee, Sep 02 '21 at 11:37

score 2 · Answer 1 · answered Sep 02 '21 at 11:38

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>

Sana Mumtaz · Answer 2 · 2021-09-02T11:52:05.053

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.

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

2 Answers2

Demo