БЛОГ НА HUSL


Не выводится svg-иконка через background-image CSS

Автор вопроса: word

Почему не выводится svg-иконка, добавленная через background-image CSS?

Код:

.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="">

Дополнено:

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

Ссылка на JSFiddle


Источник

Ответы (2 шт):

Автор решения: Vasily

При вставке SVG через background-image нужно использовать немного другой формат:

// у вас используется 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>

→ Ссылка
Автор решения: Alexandr_TT

@Vasiliy комментирует

Я считал что атрибуты width и height вполне работоспособные при варианте через background. Это браузерное поведение или это зависит от способа вставки?

Нужно было только уточнить, - внутри SVG или у родительского контейнера.

  1. Если внутри SVG в шапке width и height не указаны, либо они равны 100%, то SVG займет полностью родительский контейнер.

Ниже пример с одной и той же иконкой facebook, но с разными размерами родительского контейнера 32, 49, 64px

.min-icon-social{
 display: inline-block;
 width: 32px;
 height: 32px; 
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 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");
}
.mid-icon-social{
 display: inline-block;
 width: 49px;
 height: 49px; 
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 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");
} 
.big-icon-social{
 display: inline-block;
 width: 64px;
 height: 64px; 
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 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="big-icon-social"></span> 
   <span class="mid-icon-social"></span>
   <span class="min-icon-social"></span>
</a>

  1. Если ширина и высота иконки заданы внутри SVG, то иконка в родительском контейнере займет место равное её размерам.

.min-icon-social{
 display: inline-block;
 width: 23px;
 height: 23px; 
 border: 1px solid black;
  vertical-align: middle;
  
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' width='23' height='23' 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");
background-repeat: no-repeat;
}
.mid-icon-social{
 display: inline-block;
 width: 49px;
 height: 49px; 
 border: 1px solid black;
  vertical-align: middle;
  
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' width='23' height='23' 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");
background-repeat: no-repeat;
}
.big-icon-social{
 display: inline-block;
 width: 64px;
 height: 64px; 
 border: 1px solid black;
  vertical-align: middle;
  
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' width='23' height='23' 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");
background-repeat: no-repeat;
}
<a href="#">
   <span class="big-icon-social">  </span> 
   <span class="mid-icon-social">  </span>
   <span class="min-icon-social">  </span>
</a>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.