В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы при наведении курсора на пункт меню, текст и иконка меняли цвет. Для того чтобы не плодить большое количество картинок, было решено перевести svg в код и использовать в стилях CSS.
Краткая инструкция как использовать 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 в 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).