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

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

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

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

<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 477.175 477.175&quot;>
  <path d=&quot;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&quot;/>
</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=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 477.175 477.175&quot;>\
  <path d=&quot;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&quot;/>\
  </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 в 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).