Конвертируем SVG-иконку в код для использования в CSS
В одном из проектов возле меню выводились небольшие иконки в формате 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).
Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…
Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…
Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…
В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…
12 комментариев
Ответить
У меня данный способ не сработал :(
Скиньте код SVG файла, можно будет посмотреть, что там.
Офигенно крутое решение. Сохранил.
Денис а можно ли конвертер вынести вотдельное приложение чтобы не на сайте. :? а то сайт сегодня есть заватра их нет )
а так огонь
все робит
я бы добавил еще калькулятор кода для бекграунда . возможность выбора параметров
репит не репить скрол фикс и т.д.
чтобы сразу добавлять с кодом
background-repeat: no-repeat;
background-image: url(‘
и т.д.
Background Position
Background Attachment
Background Repeat
Background Origin
Background Size
Overlay
Overlay Blend
вот выписал
Онлайн конвертор есть на Codepen.
Но я бы рекомендовал обратить внимание на часть статьи с заголовком «Самый простой вариант – использовать код SVG напрямую в CSS.» — там пример, как использовать svg в css без конвертора, именно этим способом я пользуюсь сейчас. Он проще, понятнее и быстрее можно скорректировать что-то.
По поводу разных опций для background (position, repeat, etc.) то это уже бы перегрузило основную тему, главное суть — использование SVG в CSS.
Я что-то искал но не нашёл ничего, конвертор в .css да есть но из .css нету.
А есть ли как-то способ восстановить и/или как-то смотреть что за фото из в .css
А то я добавил фото в формате :
и сейчас решил обновить его но не помню какая из них, какая …
Так тут конвертер не нужен, это просто за 5 сек делается руками.
Создаете файл icon.svg
Открываете его в редакторе.
Переносите в него код свг
меняете
%3c на <
%3e на >
и получаете svg-иконку Facebook с таким кодом:
Поэтому я предпочитаю использовать не конвертер, а просто использовать код SVG напрямую в CSS — это описано в статье.
Мда, топ сайт, топ администрация. Не устали комменты удалять ?
Комменты не удаляются, просто они были на модерации. Я не сижу тут 24 часа в сутки)
Добрый день! Подскажите, пожалуйста, при использовании svg в css, как менять цвет у картинки при hover?