Закодируйте разметку SVG как URL-кодированный или base64 data URI, с готовыми к вставке строками CSS background-image и <img>. Опциональная минификация.
— результат появится здесь —
— результат появится здесь —
— результат появится здесь —
Об этом инструменте
Вставьте сырую разметку SVG и получите data URI, который можно вставить прямо в CSS или HTML. Инструмент выдаёт две кодировки, и всё генерируется в браузере, поэтому ничего не загружается.
URL-кодированный вывод заменяет двойные кавычки на одинарные, запускает encodeURIComponent, затем восстанавливает несколько безопасных символов (пробел, двоеточие, слэш, знак равенства), чтобы результат был компактным и читаемым. Вывод base64 кодирует SVG в UTF-8 и прогоняет через btoa, давая data:image/svg+xml;base64,… . Побайтовое сравнение показывает, какая кодировка меньше; для большинства иконок выигрывает URL-кодированная форма.
Включите минификацию, чтобы удалить комментарии и свернуть пробелы между тегами перед кодированием. Скопируйте строку background-image для CSS или строку <img src> для HTML. Обратите внимание, что кавычки внутри SVG нормализуются в одинарные, чтобы data URI можно было безопасно обернуть в двойные кавычки.
Часто задаваемые вопросы
URL-кодирование или base64 — что использовать?
URL-кодирование обычно меньше и остаётся читаемым, что помогает при отладке. Base64 более непрозрачно, но принимается повсеместно; сравнение размеров здесь подскажет, что меньше.
Почему мои двойные кавычки заменены на одинарные?
Кавычки атрибутов преобразуются в одинарные, чтобы весь data URI мог располагаться внутри url("…") или src="…" в двойных кавычках без экранирования. Оба варианта корректны в SVG.
Меняет ли минификация внешний вид SVG?
Нет. Она лишь удаляет комментарии и сворачивает пробелы между тегами и внутри них; отрисованный вектор идентичен, просто меньше по размеру.
Загружается ли мой SVG куда-либо?
Нет. Кодирование выполняется полностью в браузере с помощью encodeURIComponent и btoa; разметка никогда не покидает ваше устройство.