Конвертировать SVG в Base64

SVG — удобный формат для иконок, логотипов и другой векторной графики. Обычно SVG используется как отдельный файл, который подключается к странице через <img>, <svg> или CSS.

Но иногда удобнее встроить изображение прямо в код.

Например, использовать SVG в качестве фонового изображения:

background-image: url("data:image/svg+xml;base64,...");

Для этого SVG необходимо преобразовать в формат Base64.

Вручную делать это неудобно, поэтому я добавил на сайт ещё один небольшой бесплатный инструмент — конвертер SVG в Base64.

Что умеет конвертер

Инструмент позволяет быстро преобразовать SVG в несколько готовых форматов:

• Base64-строку;
• Data URI;
• готовый код для HTML;
• готовое значение для использования в CSS.

Можно загрузить SVG-файл с компьютера или просто вставить SVG-код вручную.

После этого конвертер автоматически обработает данные и покажет готовый результат, который можно сразу скопировать.

Как пользоваться

Всё максимально просто:

1. Перетащите SVG-файл в область загрузки или выберите его с компьютера.
2. Либо вставьте SVG-код вручную.
3. Получите готовые варианты результата.
4. Скопируйте нужный формат одной кнопкой.

Например, если вам нужна строка для background-image, не придётся отдельно искать сервис для кодирования, а затем вручную собирать CSS-код.

Конвертер сразу подготовит нужный вариант.

Зачем преобразовывать SVG в Base64

Чаще всего такой формат может пригодиться при работе с HTML и CSS.

Например, когда нужно встроить небольшую SVG-иконку прямо в стили:

.icon {
    background-image: url("data:image/svg+xml;base64,...");
}

Это позволяет использовать изображение без отдельного запроса к файлу.

Также готовая строка может пригодиться для:

• CSS-фонов;
• HTML-кода;
• Data URI;
• небольших встроенных иконок;
• email-верстки;
• различных frontend-задач.

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

Всё работает прямо в браузере

Для работы с инструментом ничего не нужно устанавливать.

Загруженные SVG-файлы и вставленный код обрабатываются локально в браузере и никуда не отправляются.

Также есть ограничение на максимальный размер файла — 2 МБ, при этом поддерживаются только SVG-файлы.

Небольшой инструмент для frontend-разработки

Я сделал этот конвертер в первую очередь как простой инструмент, который может пригодиться во время разработки.

Не нужно искать отдельный сервис, копировать код между несколькими страницами или устанавливать дополнительные программы.

Загрузили SVG или вставили код → получили Base64, Data URI, HTML и CSS → скопировали нужный вариант.

Если занимаетесь frontend-разработкой, работаете с вёрсткой или просто иногда используете SVG в HTML и CSS — возможно, этот инструмент сможет немного сэкономить время.