adding svg as background in css

user_3867949 0
Viewed 286

I am trying to add an svg as background for a div.

This is the SVG.

<svg version="1.1" class="h-4 text-dark"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
    <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
    c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
    C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
    S32.459,40,21.983,40z"/>
</svg>

This is the CSS:

.logo {
    background: url("white_logo.svg") no-repeat;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
}

.menu {
    opacity: 0.5;
    width: 50px;
    height: 50px;
    padding: 0px;
    background-color: #ff8c00;
    border-radius: 50%;
    /* touch-action: none; */
    /* user-select: none; */
}

.parent {
    position: fixed;
    z-index: 214748364;
    box-sizing: border-box;
}

and this is how I have my htlm set up:

<div class="parent">
    <div class="menu">
        <div class="logo"></div>
    <div>
<div>

I tried different SVGs and still does not work (if I view the svg in the browser I see it fine). If I put and url of a picture it works. If I put a bg of logo to black I see a black square with no svg inside. I tried converting the svg to png and still nothing.

EDIT

This code is part of an extension and is injected on a webpage

google-chrome-extension svg css
2 Answers

SVG rendering issues were due to a bug in the viewBox
This is what your SVG looks like when loaded into a vector editor.

enter image description here

Using the JS method getBBox() we find out the required values of the viewBox parameters at which the SVG shape will be completely placed on the SVG canvas

<svg version="1.1" class="h-4 text-dark"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 20 20" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
    <path id="p1" d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
    c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
    C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
    S32.459,40,21.983,40z"/>
</svg>

<script>
console.log(p1.getBBox());
</script>

instead of viewBox ="0 0 20 20" set viewBox ="0.98 0 51 52.96"

<svg version="1.1" class="h-4 text-dark"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30"
     viewBox="0.98 0 51 52.96" style="border:1px solid red;">
    <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
    c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
    C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
    S32.459,40,21.983,40z"/>
</svg>

Red border shows SVG canvas borders. red border is only needed for demonstration. Before encoding SVG in background it needs to be removed from styles

To place the svg code in the background CSS, it needs to be encoded in URL-encoder for SVG

Below is the complete code with your layout

.logo {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' class='h-4 text-dark' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0.98 0 51 52.96'%3E%3Cpath d='M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21 c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279 C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19 S32.459,40,21.983,40z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
}

.menu {
    opacity: 0.5;
    width: 50px;
    height: 50px;
    padding: 0px;
    background-color: #ff8c00;
    border-radius: 50%;
    /* touch-action: none; */
    /* user-select: none; */
}

.parent {
    position: fixed;
    z-index: 214748364;
    box-sizing: border-box;
}
<div class="parent">
    <div class="menu">
<div class="logo">

</div> 
    <div>
<div>

user_73948710

Try to use background-image instead of background like this:

.logo {
    background-image: url("white_logo.svg"); /* delete no-repeat */
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
}

Bella li ✌

user_147252390
Related