Кодирование SVG

SVG в Base64

Преобразуйте SVG-файлы в Base64 data URI для HTML-тегов img, CSS-фонов и строк JavaScript.

Поддержка векторного SVG Готово для CSS и HTML Без загрузки на сервер

4.8 / 5 124 оценок

Рабочая область «SVG в Base64»

Загрузите SVG и скопируйте data URI для встроенного использования в коде.

Обработка локально

Перетащите SVG сюда или нажмите, чтобы выбрать файл

Максимальный размер файла 2 МБ

Нужна помощь с использованием SVG Base64 в коде? Прочитайте руководство по HTML, CSS и JavaScript

Преобразование SVG в Base64

SVG-файлы — это векторные изображения на основе XML. Когда вы конвертируете svg to base64, вы превращаете файл в одну текстовую строку, которую можно вставить в JSON, JavaScript или устаревшие шаблоны.

Этот инструмент выводит data URI data:image/svg+xml;base64,..., который можно скопировать с вкладки Data URI.

Формат SVG data URI

Закодированный URI сохраняет MIME-тип SVG, чтобы браузеры отображали его как векторное изображение.

Если вам нужно значение data image svg xml base64, скопируйте полный URI из результата конвертера и вставьте его в код.

Используйте вкладки HTML или CSS, когда нужен готовый фрагмент вместо исходной строки.

Base64 SVG и встроенный SVG

Встроенная SVG-разметка проще стилизуется с помощью CSS и часто даёт меньший вес страницы.

Base64 SVG лучше подходит, когда нужна одна закодированная строка для конфигураций, переменных JavaScript или систем, которые не принимают сырые блоки XML.

Использование SVG Base64 в HTML и CSS

В HTML поместите data URI в атрибут src тега img, когда нужен шаблон base64 img tag для векторных иконок.

В CSS используйте значения background image base64 с background-image: url("data:image/svg+xml;base64,..."); для иконок, значков и декоративных ресурсов.

Распространённые проблемы кодирования SVG

Большие SVG-файлы создают длинные строки Base64, которые трудно читать и поддерживать в исходном коде.

Некоторые функции SVG ведут себя иначе, когда изображение загружается через тег img вместо встроенного SVG.

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

Только когда нужна одна закодированная строка. Для большинства веб-страниц встроенный SVG проще и гибче.

Да. Используйте закодированный URI как значение для background-image в CSS.