1

Второй день бьюсь с этими 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>
4
  • открой svg ты мог вытянуть в формате base64 и отображение через svg не будет, посмотри код svg <image xlink:href="data:img/png;base64, если так начинается, то не svg 13 окт 2016 в 9:57
  • Да есть base64. Это можно исправить? Если нельзя, то может Вы знаете как вытягивать из Rhotoshop СС без этого base64? 13 окт 2016 в 10:15
  • вот и естественно никак оно отображать не будет, смотря как вам предоставили дизайн и не желательно переделывать в смарт обьект, а сразу тянуть чистым и тянуть из Photoshop CC либо же уговорить дизанера предоставить вам сразу иконки в таком формате 13 окт 2016 в 10:20
  • Спасибо! Непонятно только зачем растр упаковали как смарт. Всю голову себе поломал. 13 окт 2016 в 12:03

2 ответа 2

2

Фотошоп сохранил вам иконку в svg-файл, но содержащую внутри себя png-картинку в base64 формате.

Быстрое решение - поставить на фон требуемого вам блока этот base64-код, вот так:

& :nth-child(1) {
    background-image: url("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-файл вам не понадобится.

Возможно вам имеет смысл связаться с автором PSD-макета и попросить его скинуть вам png-файлы иконок, которые он вставлял в макет. Это будет проще, чем вырезать из макета смарт-объекты и вставлять base64 в стили.


Также, когда вы устанавливаете фон блока (неважно, сплошной цвет, градиент или изображение) - вы влияете лишь на фон блока, но не на его размеры. И если размеры блока явно не заданы - вы получаете блок размером 0px 0px, который оказывается не виден.

Задайте размеры блока явно через height и width, взяв значения из размеров svg в вашем PSD макете.

9
  • Разумеется, все подобные манипуляции с размерами и цветом я уже делал. К сожалению не помогло. 13 окт 2016 в 9:36
  • Тогда пожалуйста, дополните ваш вопрос стилями, которые вы присваиваете блоку помимо background-image. 13 окт 2016 в 9:37
  • & 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"); } 13 окт 2016 в 9:47
  • 1
    base64 предоставлен для мелких деталей на странице, а лить фон полностью не желательно, он дает возможность не делать лишние http запросы на разные мелочи 13 окт 2016 в 10:23
  • 1
    Спасибо! Мне проще будет из ФШ пересохранить как пнг. Я просто был уверен, что это векторная иконка, вот и мучился. 13 окт 2016 в 12:07
1
  1. Проверить наличие xmlns="http://www.w3.org/2000/svg" у тега svg.
  2. Проверить наличие <?xml version="1.0"?> в начале файла.
<svg xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="23" height="27" viewBox="0 0 23 27"> <defs> <style> .cls-1 { opacity: 0.33; } </style> </defs>

Тут какой-то мусор в атрибутах, плюс пара лишних. Попробуй так:

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://w3.org/1999/xlink" viewBox="0 0 23 27"><defs>
5
  • Первая строчка есть, вот второй вроде не нашел. 13 окт 2016 в 9:34
  • <svg xmlns="w3.org/2000/svg" xmlns:xlink="w3.org/1999/xlink" width="23" height="27" viewBox="0 0 23 27"> <defs> <style> .cls-1 { opacity: 0.33; } </style> </defs> 13 окт 2016 в 9:35
  • Правки не помогают. 13 окт 2016 в 9:46
  • @Евгений я же тебе выше написал, что нужно делать: никакие правки в этом ответе не помогут, если ты вытащил base64 13 окт 2016 в 11:43
  • @LieutenantJimDangle, использовать base64 для текстовых данных - это извращение.
    – Qwertiy
    13 окт 2016 в 12:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.