Преобразовать SVG в CSS-фон

Вставьте SVG и сразу получите CSS-правило background-image, готовое для вставки в вашу таблицу стилей, без необходимости размещать отдельный файл изображения.

Пример:

Зачем использовать SVG в качестве CSS-фона вместо файла изображения?

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

Почему SVG кодируется как URL, а не в base64?

Кодирование в URL (с экранированием нескольких символов, таких как #, < и >) для текста вроде SVG обычно даёт более короткий и читаемый data URI, чем base64, что немного уменьшает итоговый размер CSS.

Можно ли изменить цвет иконки после того, как она встроена как CSS-фон?

Нет, после кодирования в background-image цвет SVG зафиксирован внутри data URI: чтобы сменить цвет, измените его в исходном SVG и заново сгенерируйте CSS (например, с помощью нашего инструмента замены цвета в SVG).

100% локальная обработка: кодирование выполняется целиком в вашем браузере, ваш SVG никогда не отправляется на сервер.