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

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

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

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

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

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

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

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

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

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

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

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

Живой пример использования 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”, выделяем код, а затем жмем на иконку копировать, так мы получим в буфер код нашей свг-картинки.

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

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

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

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

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

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