SVG в data URI (CSS и HTML)
Преобразуйте код SVG в оптимизированный data URI для использования в CSS (background-image, mask) и HTML, с URL-кодированием, которое короче Base64, и предпросмотром изображения.
Как пользоватьсяВставьте код SVG.
Доступно на: 
SVG в data URI (CSS и HTML): для чего нужен
Вставьте код SVG и выберите формат вывода. Инструмент удаляет лишние пробелы, заменяет кавычки и кодирует только необходимые символы, создавая data URI меньше Base64, показывает предпросмотр изображения и итоговый размер.
Как пользоваться
- Вставьте код SVG.
- Выберите CSS, data URI, img или Base64.
- Скопируйте результат.
Когда использовать
- Встраивать иконки в CSS без лишних файлов.
- Использовать SVG в mask-image.
- Сократить число запросов страницы.
Частые вопросы
Почему не использовать Base64?
Для SVG URL-кодирование обычно даёт результат меньше, чем Base64, потому что SVG — это уже текст. Кодировать нужно только специальные символы, такие как <, >, # и кавычки.
Как использовать в CSS?
Скопируйте результат в формате background-image: url("data:image/svg+xml,..."). Также работает в mask-image, list-style-image и в атрибуте src тега img.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.