URL-кодировщик SVG
Преобразуйте разметку SVG в URI данных, готовый к CSS, и декодируйте URI данных обратно в SVG.
URL-кодировщик SVG
Вставьте SVG и получите URI данных, который вы можете поместить прямо в CSS, готовый для фонового изображения или маски. Вместо base64 кодировщик использует подход компактного URL-кодирования: он заменяет двойные кавычки одинарными, сжимает пробелы и кодирует в процентах только те символы, которые действительно в этом нуждаются, поэтому результат остается коротким и удобочитаемым. Благодаря этому ваша таблица стилей будет меньше, чем объект base64, и вы по-прежнему сможете распознавать фигуры внутри URI.
Три формата вывода охватывают распространенные случаи. Правило CSS оборачивает URI данных в фоновое изображение: url("…"); так что вы можете вставить целую декларацию. Простой URI данных дает вам только значение пользовательского свойства, источника <img> или маски SVG. Форма base64 создает безопасный UTF-8 data:image/svg+xml;base64 URI для инструментов или шагов сборки, которые ожидают эту кодировку, включая SVG с узлами смайликов или акцентированного текста. Опция типа MIME открывает тот же кодировщик для любого содержимого: выберите text/plain, text/html, text/css, application/json или другой тип, и вставленное превратится в data URI этого типа. Только image/svg+xml сжимает пробелы и меняет двойные кавычки на одинарные — эти два приёма укорачивают разметку, но портят обычный текст и JSON. Неизображения к тому же обходятся без обёртки background-image и возвращают голый url("…").
Переключите направление на декодирование, и инструмент вернет любую из трех форм обратно в необработанную разметку SVG. Вставьте правило CSS, простой URI данных или правило base64, и оно извлечет SVG, чтобы вы могли редактировать значок, который существует только внутри таблицы стилей. Подсчет показывает входной размер, выходной размер и процентное изменение, поэтому вы можете сразу увидеть, уменьшилось или увеличилось кодирование значка. URI может прийти и обёрнутым в HTML-тег <img> или <link>, с явной кодировкой в заголовке.
Все работает в вашем браузере. Ваша разметка SVG никогда не загружается, поэтому вы можете кодировать частные значки, логотипы и внутренние ресурсы, не покидая вашего устройства.