Данила Пантелеев
Все инструменты

SVG в CSS

Конвертируйте SVG-код в Data URI и вставляйте иконки прямо в CSS как background-image — без отдельных файлов и лишних запросов к серверу.

1Вставьте SVG-код или выберите пресет
2Проверьте превью и формат кодирования
3Скопируйте готовое CSS-правило одной кнопкой
0 символов

Когда пригодится

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

Инструмент предлагает два формата: URL-encoded — компактный и читаемый, его почти всегда стоит выбирать для SVG; и Base64 — на случай проблем со спецсимволами в старых сборщиках. Сравнение длины обоих вариантов показывается сразу, а превью помогает убедиться, что разметка валидна. Вся обработка выполняется локально в браузере — код не отправляется на сервер.

Для работы с текстом и ссылками посмотрите инструменты Изменение регистра и UTM-генератор.