Menu
How to make svg data image as a div background in css? If in html <img src="data:image/svg+xml;base64,[data]"> it works just fine but as a css background it does not show. I createtd a sample on code pen so you can see. So i was investigating this problem and found that some other svg data images work just fine.
.frame__wrapper {
background: transparent url('data:image/svg+xml;base64,[data]') center top no-repeat;
background-size: 100% auto;
width: 310px;
height: 272px;
margin: 0 auto;
padding: 26px 10px;
}
codepen working sample with svg image I can not paste here encoded svg.
Using data uri from this tuttorial svg data uris i managed to set css backgkround. So base64 does not show yet.
968
SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.
We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent() it will work everywhere. SVG must have attribute xmlns like this: xmlns='http: //www.w3.org/2000/svg' . If it doesn't exist, it will be added automagically.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
The SVG background is used to draw any kind of shape, set any color you want by the set property. The below examples illustrates the concept of SVG set background-color more specifically. The SVG allowed the CSS background sizing, position, and much more complex property.
My steps on how to use svg data image as a background in css:
I embedded this encoded image into svg markup
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="your width" height="your height" viewBox="0 0 your width your height">
<image xlink:href="data:image/jpeg;base64,[data]" x="0" y="0" height="100%" width="100%"/>
</svg>
Then I uri-encoded all this stuff here SVG encoder
data:image/svg+xml;charset=utf-8,[data]
In my case I needed a filter to be applied to the background image, but if you don't need it, it's ok :) Also it doesn`t work in IE. Hope this info helps.
div {
width: 100px;
height: 100px;
background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Cimage%20xlink%3Ahref%3D%22data%3Aimage/jpeg%3Bbase64%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%22%20x%3D%220%22%20y%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22/%3E%0A%3C/svg%3E);
}<div></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
