Как вставить SVG в CSS

Q: Это экспорт в PNG?

Нет. SVG остаётся вектором внутри URI data:image/svg+xml. Для растра нужен конвертер изображений.

Зачем класть SVG в таблицу стилей

Маленькой иконке не всегда нужен отдельный файл и отдельный запрос. Data URI держит рисунок внутри CSS, а браузер по-прежнему рисует его как вектор. Это другая задача, чем экспорт в PNG: форма остаётся резкой на любом размере, и отдельный файл картинки выкладывать не нужно.

Конвертер SVG в CSS превращает разметку SVG в такой URI прямо в браузере. Вы выбираете пресет: голый url(...), строку background-image, более полное правило фона, маркер списка или класс. Ничего не загружается на сервер.

Шаг за шагом

Откройте конвертер SVG в CSS. Вставьте SVG в поле или перетащите файл .svg в зону загрузки. Для этого способа годится короткая иконка. Большая иллюстрация раздует таблицу стилей.
Выберите пресет в блоке «Пресеты вывода». «Базовый Background Image» — удобный старт: одно объявление background-image. «URL обертка» даёт только url('...'), если остальное правило у вас уже есть. «Продвинутый Background Image» добавляет повтор, позицию и размер.

SVG вставлен в конвертер, выбран базовый Background Image, рядом превью иконки
Страница показывает два превью: иконку как фон CSS и исходный SVG рядом. Ниже блок «Сгенерированный CSS код» держит правило. «Копировать CSS» кладёт его в буфер. «Скачать .css» сохраняет файл.

Живое превью SVG как фона и правило background-image с data URI
Вставьте правило в элемент, на котором должна быть иконка. Задайте этому элементу ширину и высоту, иначе фоновой картинке некуда рисоваться.

Что меняет конвертер

Инструмент убирает XML-объявление и комментарии, схлопывает лишние пробелы и кодирует разметку для URL. Результат начинается с data:image/svg+xml;charset=utf-8,. SVG остаётся текстом внутри адреса, а не отдельной растровой картинкой.

«Продвинутый Background Image» нужен, когда иконка должна стоять в углу. Горизонталь и вертикаль принимают left, center или right и top, center или bottom, плюс смещение. Отрицательное смещение от правого края становится позицией calc(100% - …). Размер фона принимает contain, cover или длину.

Советы

Держите SVG небольшим. Data URI едет вместе с каждой таблицей стилей, куда он попал. Иконки в несколько строк — подходящий размер.
Размер бокса задайте в своём CSS. Сгенерированная строка не ставит width и height.
Начинайте с базового пресета. Лишние свойства фона легко добавить потом, а превью обновляется сразу.
Смотрите исходное превью. Если SVG сломан, эта панель покажет ошибку вместо рисунка.
Разметка остаётся в браузере. Вставленный логотип никуда не отправляется.

Частые вопросы

Это экспорт в PNG?

Нет. SVG остаётся вектором внутри URI data:image/svg+xml. Для растра нужен конвертер изображений.

С какого пресета начать?

С «Базовый Background Image», если нужен фон в CSS. С «URL обертка», если нужно только значение url(...). «CSS Bullets» пишет правило list-style-image. «Внутри класса» оборачивает фон в .svg-icon.

SVG загружается на сервер?

Нет. Кодирование идёт в браузере.

Иконку можно поставить в угол?

Да. Выберите «Продвинутый Background Image», задайте горизонталь и вертикаль и добавьте смещение. Превью и готовое правило обновятся вместе.

Другие инструменты

SVG в CSS: инструмент из этого гайда.
Favicon Generator: собрать полный набор иконок из одной картинки.
Конвертер единиц CSS: перевести px в окружающей вёрстке.
Веб-инструменты: остальные сервисы категории.

Попробовать

Откройте конвертер SVG в CSS, вставьте иконку и скопируйте правило фона.