Конвертируем SVG-иконку в код для использования в CSS

HTML
22.09.2017

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

UPDATE — Не обязательно конвертировать svg в код. Можно использовать код файла svg почти без преобразований и без конверторов.

Краткая инструкция как использовать SVG в CSS

Например, у вас есть файл arrow-right.svg, внутри этого файла вот такой код:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175">
  <path d="M360.731 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/>
</svg>

Если конвертировать этот SVG в CSS старым способом представленным ниже, то получится такой код:

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.175 477.175'%3e%3cpath d='M360.731 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z'/%3e%3c/svg%3e");

Добавляется куча лишних действий, на выходе получаем сконвертированный код, некрасиво и долго.

Самый простой вариант — использовать код SVG напрямую в CSS.

Пример использования SVG в CSS:

background-image: url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175">\
  <path d="M360.731 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/>\
  </svg>');

То есть, мы взяли весь код без изменения из файла arrow-right.svg и просто вставили его в background-image: url(' ');, но добавили в самое начало data:image/svg+xml,, а каждую новую строку заэкранировали обратным слешом \.

Получается, что код SVG почти не изменен и времени это заняло 15 секунд, но нужно учесть такие моменты:

  • Можно использовать многострочный svg-код, экранируя каждую строку с помощью обратного слеша — \
  • Можно создавать анимированные фоны или элементы с помощью CSS-анимации внутри встроенного SVG.
  • Отсутствие viewBox или размеров позволяет фону SVG занимать всю площадь элемента.
  • Необходимо экранировать # как %23 при указании цвета, потому что это зарезервированный символ в URL.

Можно ознакомиться с примером анимированной рамки с градиентом с помощью SVG.

Живой пример использования SVG в CSS:

See the Pen KKKRBxr by Denis (@deniscreative) on CodePen.default

Если же вас устраивает вариант с конвертацией SVG, тогда старый добрый рабочий пример представлен ниже.

Краткая инструкция как конвертировать SVG в CSS

Сначала отправляем svg в https://jakearchibald.github.io/svgomg/ для того чтобы получить кодовое значение.

Затем копируем код и вставляем его в это окно:

See the Pen Convert SVG to Data URI for css background-image by Denis (@deniscreative) on CodePen.0

полученный код используем в своем css файле.

Например, берем иконку Facebook (стандартная иконка с небольшим изменением).

На сайте https://jakearchibald.github.io/svgomg/ жмем «Open SVG» или просто перетягиваем иконку на область просмотра. В левом верхнем углу жмем «CODE», выделяем код, а затем жмем на иконку копировать, так мы получим в буфер код нашей свг-картинки.

Примерно такой:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z"/></svg>

Затем полученный код вставляем в окно выше, жмем Converte и получаем готовый background-image:

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z'/%3e%3c/svg%3e");

Копируем и используем его в своем css.

Чтобы изменить цвет, меняем fill='%23FFF', только учитываем, что %23 — это обычный знак #, то есть fill='%23000' — это обычный черный (#000).

Рекомендую к прочтению:

Комментарии (11) к “Конвертируем SVG-иконку в код для использования в CSS”

  • Urarak

    У меня данный способ не сработал :(

    Ответить

  • Андрей

    Офигенно крутое решение. Сохранил.
    Денис а можно ли конвертер вынести вотдельное приложение чтобы не на сайте. :? а то сайт сегодня есть заватра их нет )

    а так огонь

    все робит

    я бы добавил еще калькулятор кода для бекграунда . возможность выбора параметров

    репит не репить скрол фикс и т.д.
    чтобы сразу добавлять с кодом
    background-repeat: no-repeat;
    background-image: url(‘
    и т.д.

    Background Position
    Background Attachment
    Background Repeat
    Background Origin
    Background Size
    Overlay
    Overlay Blend

    вот выписал

    Ответить

    • Denis Creative

      Онлайн конвертор есть на Codepen.
      Но я бы рекомендовал обратить внимание на часть статьи с заголовком «Самый простой вариант – использовать код SVG напрямую в CSS.» — там пример, как использовать svg в css без конвертора, именно этим способом я пользуюсь сейчас. Он проще, понятнее и быстрее можно скорректировать что-то.
      По поводу разных опций для background (position, repeat, etc.) то это уже бы перегрузило основную тему, главное суть — использование SVG в CSS.

      Ответить

      • Igor

        Я что-то искал но не нашёл ничего, конвертор в .css да есть но из .css нету.

        Ответить

  • Igor

    А есть ли как-то способ восстановить и/или как-то смотреть что за фото из в .css

    Ответить

    • Igor

      А то я добавил фото в формате :

      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z'/%3e%3c/svg%3e");

      и сейчас решил обновить его но не помню какая из них, какая …

      Ответить

      • Denis Creative

        Так тут конвертер не нужен, это просто за 5 сек делается руками.
        Создаете файл icon.svg
        Открываете его в редакторе.
        Переносите в него код свг

        %3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z'/%3e%3c/svg%3e

        меняете
        %3c на <
        %3e на >
        и получаете svg-иконку Facebook с таким кодом:

        <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z'/></svg>

        Поэтому я предпочитаю использовать не конвертер, а просто использовать код SVG напрямую в CSS — это описано в статье.

        Ответить

  • Igor

    Мда, топ сайт, топ администрация. Не устали комменты удалять ?

    Ответить

  • 35 инструментов для веб-разработчика на каждый день — MAILSGUN.RU

    […] SVG to bg – конвертер SVG-иконок в код для использования в CSS. Подробная инструкция прилагается на сайте автора. […]

    Ответить

Оставить комментарий