В одном из проектов возле меню выводились небольшие иконки в формате 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).
Комментарии (12) к “Конвертируем SVG-иконку в код для использования в CSS”
Urarak
У меня данный способ не сработал :(
Denis Creative
Скиньте код SVG файла, можно будет посмотреть, что там.
Андрей
Офигенно крутое решение. Сохранил.
Денис а можно ли конвертер вынести вотдельное приложение чтобы не на сайте. :? а то сайт сегодня есть заватра их нет )
а так огонь
все робит
я бы добавил еще калькулятор кода для бекграунда . возможность выбора параметров
репит не репить скрол фикс и т.д.
чтобы сразу добавлять с кодом
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
Открываете его в редакторе.
Переносите в него код свг
меняете
%3c на <
%3e на >
и получаете svg-иконку Facebook с таким кодом:
Поэтому я предпочитаю использовать не конвертер, а просто использовать код SVG напрямую в CSS – это описано в статье.
Igor
Мда, топ сайт, топ администрация. Не устали комменты удалять ?
Denis Creative
Комменты не удаляются, просто они были на модерации. Я не сижу тут 24 часа в сутки)
35 инструментов для веб-разработчика на каждый день — MAILSGUN.RU
[…] SVG to bg – конвертер SVG-иконок в код для использования в CSS. Подробная инструкция прилагается на сайте автора. […]
nuri
Добрый день! Подскажите, пожалуйста, при использовании svg в css, как менять цвет у картинки при hover?