SVG в CSS

Вставьте SVG, чтобы получить готовый CSS для фона или маски. Для обратного преобразования вставьте Data URI или CSS с url("data:…") — инструмент восстановит SVG. Рисунок виден в предпросмотре над кодом.

Как пользоваться

Вставьте код SVG или откройте файл — CSS появится сразу, а в предпросмотре будет видно, как браузер покажет рисунок. «Оптимизировать SVG перед преобразованием» уменьшает SVG перед кодированием: удаляет метаданные, комментарии и title — в CSS-фоне доступное название всё равно не читается.

Для обратного преобразования выберите «Data URI → SVG» и вставьте строку data:image/svg+xml,… или правило CSS целиком. Файл .svg включает кодирование, файл .css — раскодирование.

Для вашего удобства рекомендую использовать полноэкранный режим.

Действие
Кодирование
Применение

Кодируем…

SVG

Файл не выбран
UTF-8, до 2 МБ. Файл можно перетащить на поле. Файл обрабатывается только в вашем браузере.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12l4 4L19 6"/>
</svg>

CSS

Для преобразования включите JavaScript. Пример: SVG-иконку можно вставить в CSS как background-image: url("data:image/svg+xml,%3Csvg …%3E").


URL или Base64


SVG — текст, поэтому его не обязательно кодировать в Base64, который всегда увеличивает размер на треть. При URL-кодировании заменяются только символы, недопустимые в url("…"): <, >, # и некоторые другие, двойные кавычки кодируются как %22. Кавычки и текстовые пробелы сохраняются: без предварительной оптимизации обратное преобразование возвращает тот же SVG. Какое кодирование короче, зависит от содержимого. Base64 удобен, если строку передают через системы, которые портят спецсимволы.


Перекрашиваемая иконка через mask


Картинку в background-image нельзя перекрасить из CSS: цвет зашит в SVG. Маска берёт из SVG только форму, а цвет — из background-color. С currentColor иконка принимает цвет текста и меняется при наведении вместе с ним:


CSS
.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,…");
  mask-repeat: no-repeat;
  mask-size: contain;
}
.button:hover .icon {
  color: #336699;
}




Вопросы и ответы


Когда лучше подключить SVG отдельным файлом?


Если рисунок большой или используется на многих страницах: отдельный файл браузер кэширует, а Data URI загружается заново вместе с каждым CSS-файлом. Встраивать удобно маленькие иконки и декоративные фоны.


Почему рисунок в фоне не виден?


Проверьте, что у SVG есть атрибут xmlns="http://www.w3.org/2000/svg" — без него браузер не распознаёт картинку в CSS, — и что у элемента задан размер: пустой блок без ширины и высоты фон не покажет.


Можно ли вставить в Data URI SVG со скриптом?


В background-image, mask-image и <img> скрипты SVG не выполняются. Оптимизация перед кодированием их удаляет.




Связанные материалы


О фоновых изображениях — в статье о свойстве background-image. Уменьшить SVG без кодирования можно в инструменте «Оптимизация SVG», а закодировать в Base64 любой файл — в «Base64».