Второй день бьюсь с этими svg и пока безрезультатно. Казалось бы чего проще, взять из PSD макета в фотошопе векторную иконку, сохранить как svg, вставить в верстку и готово. Но не тут то было. Иконки упорно не хотят отображаться через background-image
. Через img
работают только в Firefox и IE, а в Chrome и Opera не работают. Причем, если открывать саму иконку через любой браузер, то они ее прекрасно отображают. Еще был интересный момент, что если вставить скопированный код иконки между тегами, которым задан background
с svg
, то иконки отобразятся. Удалить код, перезагрузиться - и опять ничего не показывает. Пожалуйста, кто знает в чем тут дело, помогите!
Часть кода (через img):
<li><img src="images/advantages-1.svg" alt="">Собственная производственная база</li>
(через background):
& li {
font-size: 1.14rem;
list-style: none;
padding: 9px 0 9px 40px;
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 30px 30px;
& img{
opacity: 1;
}
&:nth-child(1) {
background-image: url("/images/advantages-1.svg");
}
}
код иконки:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="27" viewBox="0 0 23 27">
<defs>
<style>
.cls-1 {
opacity: 0.33;
}
</style>
</defs>
<image id="Vector_Smart_Object" data-name="Vector Smart Object" class="cls-1" width="23" height="27" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAbCAMAAACgNuTpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABLFBMVEUAAAAABhAABQ0ABAwABQ0ABg8ABQ0ABQ0ABQ0ABQ4ABhAABQ4ABQwABAoABAwABAsABg8ABQ0ABAoABAsABAsABAsABAsABAsABAwABQ0ABQ0ABAwABAsABAsABQ0ABhAABQ0ABAsABAsABhAABhAABg8ABQ0ABAwABAoABQ0ABhAABhAABQ4ABQ0ABQwABg8ABAsABQwABQ0ABAsABQwABQ0ABhAABQ0ABhAABQ0ABQ4ABAoABg8ABQwABhAABAsABAwABQ4ABg8ABg8ABQ4ABQ0ABQ0ABQ0ABg8ABQ4ABAwABAsABQ0ABQwABQ0ABg8ABQ0ABhAABQ4ABQwABAoABAwABQ0ABhAABg8ABQwABAsABQwABQwABhAABhAABQwABAsABQ0ABQ0AAAA7Do6fAAAAY3RSTlMAACFIMQoqOTQeBRVCUU5ECT5PT0lLUk5DOC5EUUorBhxMTQkBETBBSyYDDCEkRg1HPEZFQCMLOgcoHVISPwRDQhoQFRg3QicXH0dQLUQ1GjIOICtQSSkKE0FIOywNAj5GL0Q+DQyaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+AJGQ01GTQTMmMAAAEXSURBVCjPbZBrV4JAEIaHIsPsKrJILZErSUKZZmZiAt1LzO7ZPev//4i4qB/YfT+8O+c5O+/MGYCkpqb5cTmTmhXSc1GZmV9YXIrp8kpWzElIziuryhpWU+uiFuKNAhGKoG+WDJVs5csmWHg7wDvZyu44z4yfai0wac9MTq5VA6vvUxs18AFAU9WT/FBsAdjtI6qh3gFwCE9xReUAXI/ix+gEQChQC5mkBHCKzqgGzwDQpfMk1i/UwI3oTlbj8sqJ6XXXD7/2ZA0yN9gXEXH76du7brsSJd+jh8en55eB9sp7EkbkzebiuPePz74zSra+vidjfobAVNkfMHnRb7Ebhh02b+Y4JrfDOzHkyL/sINdg895fkvwDdpQgqUPG9McAAAAASUVORK5CYII="/>
</svg>