Перенос SVG файлов из HTML в CSS

#css #svg #background

Добрый день уважаемые. Подскажите пожалуйста как перенести написание SVG фаила из
html в background css ?



.heart{
                 position: absolute;
                 top: 0;
                 bottom: 0;
                 left: 0;
                 right: 0;
                 height: $heartSide;
                 width: $heartSide;
                 display: block;
                 background: url('data:image/svg+xml;utf8,') 0 0 no-repeat;
                  z-index: 1; 
 }



 





Не могу понять где я допускаю ошибку. Если разкомитить в html всё отображается как
надо, а вот в css нет
    

Ответы

Ответ 1

Убрать переносы внутри свг.
fill перенести внутрь атрибута style.
enable-background убрать вовсе.




.heart {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,');
  z-index: 1;
}



Ответ 2

не советую делать так. лучше сохраните вашу картинку в отдельный .svg файл, а далее
разместите его как обычный img. Вы также сможете менять и свойство .svg файла с помощью
CSS, если он будет в отдельном файле.

Если же вы все же хотите добавить его в CSS файл, то вот вам способ:
Переведите ваш файл в base64 и вставляйте полученный код вот в так:

.КАРТИНКА {
  background: url("data:image/svg+xml;base64,[полученный_конвертированный_код]");
}