Перейти к основному содержимому

SVG в Data URI

Преобразование SVG в URI данных для CSS или HTML.

Создайте SVG data URI с URL-кодированием или Base64, а также готовый код для CSS background-image, CSS mask-image и HTML img. Оптимизируйте разметку, проверьте результат и скопируйте нужный формат без загрузки SVG.

Перетащите файлы сюда

Редактирование значений по умолчанию для новых файлов

Кодирование

URL-кодирование экранирует только те символы, которые не может нести URL, поэтому для файлов размером с иконку результат обычно на 20-30% меньше, чем Base64, а разметка остаётся читаемой. Выбирайте Base64, если шаг сборки или CMS переписывает знаки процента.

Дополнительно кодирует пробелы, апострофы и скобки, поэтому URI безопасен внутри url(...) без кавычек и в строках Sass или Less. Стоит несколько лишних байт. Для Base64 такое экранирование не нужно вовсе.

Оптимизация

Запускает безопасный пресет оптимизатора перед созданием результата.

Оформление

Заменяет заливки и обводки, чтобы иконка наследовала цвет окружающего текста. Полезно только для одноцветной графики: многоцветный SVG сводится к одному цвету.

Нет предпросмотра. Добавьте и выберите файлы, чтобы увидеть результат.

Файлов пока нет. Перетащите файлы выше или нажмите ВЫБРАТЬ ФАЙЛЫ.

Файлов пока нет. Перетащите файлы выше или нажмите ВЫБРАТЬ ФАЙЛЫ.

Что такое SVG?

SVG (Scalable Vector Graphics) - это XML-формат векторных изображений. Вместо пикселей SVG математически описывает фигуры, контуры, заливки и обводки, поэтому может отображаться в любом размере без потери качества.

SVG - стандартный векторный формат для веба. Все современные браузеры поддерживают его напрямую; оформление можно задавать через CSS, а анимацию - через JavaScript или SMIL. SVG часто компактен для логотипов, иконок и иллюстраций, однако сложные файлы могут быть большими.

Когда встраивать SVG как data URI

URI данных помещает весь SVG внутрь таблицы стилей или разметки, поэтому браузеру не требуется второй запрос для его рисования. Это выгодно для небольших декоративных рисунков: маркеров, стрелок, шевронов, флажков или отметки в нижнем колонтитуле. Кодировка URL обычно более компактна для текста SVG, тогда как Base64 может быть полезна, когда ее ожидает другой инструмент. Маска CSS рассматривает SVG как трафарет для собственного цвета фона элемента, поэтому один монохромный значок может быть перекрашен для каждого состояния, темы или компонента с помощью одного объявления CSS.

Как конвертировать SVG в data URI онлайн

  1. 1

    Перетащите SVG-файлы или нажмите ВЫБРАТЬ ФАЙЛЫ, чтобы добавить их в очередь. До 40 за раз.

  2. 2

    Выберите URL-кодирование или Base64 и решите, оптимизировать ли разметку заранее. Все пять результатов и их размеры в байтах обновляются, как только вы меняете параметры.

  3. 3

    Скопируйте нужный фрагмент или нажмите СОХРАНИТЬ ВСЁ, чтобы скачать по одному файлу .css на каждый SVG с правилами фона и маски.

Приватность: ваши файлы не покидают браузер

Преобразование выполняется локально в вашем браузере с использованием JavaScript и WebAssembly. Загрузка файлов или преобразование на стороне сервера не выполняются, поэтому добавляемые вами файлы остаются на вашем устройстве.

Локальная обработка помогает защитить конфиденциальные логотипы, внутренние документы и неопубликованные изображения клиентов. Страницы и код преобразования кэшируются по мере их использования, поэтому уже открытые вами инструменты могут продолжать работать без подключения к сети.

Часто задаваемые вопросы

Меньше ли data URI с URL-кодированием, чем в Base64?

Обычно. Base64 добавляет служебные данные кодирования к необработанным байтам, тогда как кодирование URL расширяет только символы, которые необходимо экранировать. Точная разница зависит от разметки SVG, поэтому инструмент показывает оба размера и позволяет сравнить их с файлом перед вами.

Каким образом правило маски CSS перекрашивает иконку?

mask-image использует SVG как трафарет: элемент закрашивает себя собственным background-color, а маска решает, какие пиксели останутся. Поскольку цвет задаётся в CSS, один data URI может быть любого цвета, а вариант для наведения или тёмной темы сводится к одной смене background-color. Работает только с одноцветной графикой, потому что маска сохраняет альфа-канал и отбрасывает собственные цвета SVG. Safari до сих пор требует префикс -webkit-mask-image, и он включён в сгенерированное правило.

Когда не стоит встраивать SVG как data URI?

Когда файл большой или общий. URI данных копируется в каждую таблицу стилей или страницу, которая его использует, поэтому его нельзя кэшировать отдельно, и он повторно загружается при каждом изменении файла. Для более крупных иллюстраций или ресурсов, повторно используемых на многих страницах, лучшим выбором часто является отдельный файл .svg с собственными заголовками кэша. URI данных также не может быть стилизован извне, поэтому сгенерированное правило маски полезно для монохромных значков.