Svg icon is not rendered via background-image CSS

Question:

Why is the svg icon added via background-image CSS not being rendered?

The code:

.icon-social{
    display: inline-block;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid black;
    vertical-align:middle;
}
.icon-social.big{
    width: 49px;
    height: 49px;
}
.icon-social i{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.icon-facebook i{
    background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");

}
<a href="#">
   <span class="icon-social icon-facebook big">
     <i></i>
   </span>
</a> <span>- не отображается svg</span>
<img src="data:image/svg+xml,%3Csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E" alt="">

Added:

<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z"/></svg>

Link to JSFiddle

Answer:

When inserting SVG via background-image , you need to use a slightly different format:

// у вас используется encode и
// после декодирования получаеться
data:image/svg xml

// а нужно
data:image/svg+xml

// так же определенные атрибуты могут
// провоцировать данное поведение
// когда изображение вставляется
// через background-image
width='512'    
height='512'

.icon-social {
  display: inline-block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1px solid black;
  vertical-align: middle;
}

.icon-social.big {
  width: 49px;
  height: 49px;
}

.icon-social i {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.icon-facebook i {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' id='Capa_1' enable-background='new 0 0 512 512'><path d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/></svg>");
}
<a href="#">
  <span class="icon-social icon-facebook big">
     <i></i>
   </span>
</a>
<span>- не отображается svg</span>
Post Views: 19
Scroll to Top