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>
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>