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 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 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>
- Firstly, you need to add
- 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 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.
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
@biberman I generated it using an SVG generating site. I just want to display that kind of shape as the background for my lists
