SVG Encoder
Кодируйте SVG в URL-совместимый формат для использования в CSS background-image, border-image или mask.
О сервисе SVG Encoder
Кодирование SVG в Base64 и Data URI для встраивания в CSS (background), HTML и инлайн-стили. Минификация и оптимизация SVG. Удобно для иконок и мелкой графики.
Часто задаваемые вопросы
Data URI позволяет встроить SVG в CSS без отдельного HTTP-запроса. Удобно для мелких иконок — меньше запросов, быстрее загрузка. Минус — нельзя кэшировать отдельно.
Для маленьких SVG (иконки до 1–2 КБ). Для крупных изображений лучше отдельные файлы — кэширование и сжатие Brotli эффективнее.
Удаление пробелов, переносов и комментариев. Размер уменьшается на 10–30%. Не влияет на отображение. Рекомендуется перед кодированием.
Скопируйте сгенерированный Data URI и подставьте в url(): background: url(data:image/svg+xml;base64,...). Работает во всех современных браузерах.
Data URI в CSS ограничен длиной строки. Для SVG больше 10–20 КБ предпочтительнее внешний файл или SVG sprite.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker