0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG в CSS
Конвертируйте SVG-код в data URI для CSS-свойства: background-image, mask-image или CSS-переменная. Поддерживает URL и Base64-кодирование.
Формат
CSS-свойство
Параметры
SVG-код
Линии:0Характеры:0

Как это работает

Он преобразует код SVG в Data URI, готовый к использованию в CSS, так что вы можете встроить значок прямо в таблицу стилей без отдельного файла и дополнительного HTTP-запроса.

Он предлагает две кодировки: URL-encoded (процентное кодирование), короче и читаемее, рекомендуется для SVG; и Base64, чуть длиннее, но универсально совместимую.

Результат можно сгенерировать как background-image, как mask-image (чтобы окрасить значок с помощью CSS) или как многократно используемую CSS-переменную. Предварительная минификация SVG уменьшает размер ещё больше.

Примеры

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL-кодирование сохраняет SVG почти читаемым и обычно короче Base64.
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");В качестве mask-image цвет значка задаётся свойством background-color элемента.

Сценарии использования

  • Встраивать SVG-значки как background-image, не добавляя на страницу HTTP-запросы.
  • Использовать SVG как маску (mask-image), чтобы перекрашивать его из CSS в зависимости от темы или состояния.
  • Хранить значок в CSS-переменной и повторно использовать его в нескольких селекторах.
  • Уменьшить вес встроенных значков, минифицируя SVG перед встраиванием.

Часто задаваемые вопросы

Что лучше: URL-encoded или Base64?

Для SVG обычно лучший вариант — URL-encoded: он даёт более короткий и читаемый Data URI, поскольку SVG — это текст. Base64 обеспечивает максимальную совместимость, но добавляет около 33 % к размеру.

Почему стоит использовать mask-image вместо background-image?

С background-image значок сохраняет исходные цвета. С mask-image SVG задаёт только форму, а цвет обеспечивает CSS — идеально для монохромных значков, меняющихся вместе с темой.

Что делает опция минификации?

Она удаляет комментарии и сжимает пробелы SVG перед его кодированием, поэтому итоговый Data URI меньше без изменения рисунка.

Загружается ли мой SVG на сервер?

Нет. Преобразование выполняется полностью в браузере; SVG никогда не покидает ваш компьютер.

См. также