Как пользоваться
- Вставьте строку Base64 или URI data:image/svg+xml;base64.
- Проверьте предпросмотр, определённый формат и размеры.
- Оставьте в списке «Скачать как» формат SVG. Если на входе SVG, файл сохраняется как текст SVG.
- Скачайте файл .svg и откройте его в редакторе, если хотите прочитать или изменить разметку.
Как найти SVG внутри Base64
В отличие от других форматов изображений, SVG — это обычный текст XML. Файл, который начинается с <svg, кодируется в строку Base64, начинающуюся с PHN2Zy, а файл с объявлением XML (<?xml) — в строку, начинающуюся с PD94bWwg. SVG в Base64 часто встречаются в фоновых изображениях CSS, наборах значков, экспорте из графических редакторов и шаблонах писем. Тип MIME — image/svg+xml.
Многие data URI с SVG вовсе не используют Base64, а содержат текст в процентном кодировании, например data:image/svg+xml,%3Csvg.... Этот инструмент ожидает Base64, поэтому такие строки разбирайте с помощью генератора data URI.
Как прочитать код SVG
Предпросмотр показывает, как отображается графика, но самое интересное часто скрыто в разметке: данные контуров, цвета, атрибут viewBox или встроенные шрифты. Скачайте файл в варианте «Оригинал» или SVG и откройте его в любом текстовом редакторе либо вставьте ту же строку Base64 в инструмент Декодирование Base64, чтобы сразу увидеть XML в виде текста.
Растр в SVG — это обёртка, а не векторизация
Если данные Base64 содержат PNG, JPEG или другое растровое изображение, при выборе SVG получится файл SVG, в котором исходные пиксели находятся в элементе <image>. Это удобно, когда программа принимает только файлы SVG, но изображение не трассируется в фигуры: при увеличении оно по-прежнему размывается, а файл получается больше растрового, потому что пиксели хранятся внутри него в виде Base64. Чтобы получить настоящие векторные контуры, используйте программы трассировки, например Potrace или функцию «Векторизовать растр» (Trace Bitmap) в Inkscape.
Работа с SVG из ненадёжных источников
SVG может содержать элементы <script>, атрибуты обработчиков событий и ссылки на внешние ресурсы. Браузеры блокируют всё это, когда SVG показывается как изображение — через тег <img> или фон CSS. Скрипты могут выполняться, а внешние ресурсы загружаться, если файл открыт непосредственно во вкладке браузера или его разметка вставлена прямо в страницу. Прежде чем использовать SVG из неизвестных источников таким образом, проверьте или очистите его.
Часто задаваемые вопросы
Можно ли превратить PNG в настоящий векторный SVG?
Нет. При преобразовании растрового изображения в SVG оно лишь встраивается в файл SVG. Результат масштабируется как исходный растр, а не как векторный рисунок.
Почему не удаётся декодировать мой data URI с SVG?
;base64,. Если нет, SVG записан в процентном кодировании или обычным текстом и не является Base64. Разобрать такую строку может генератор data URI.Безопасно ли декодировать SVG из неизвестного источника?
Декодирование и сохранение безвредны, потому что результат — просто текст. Скрипты внутри SVG могут выполниться, только если открыть его как документ или вставить прямо в веб-страницу.
Почему после преобразования SVG в PNG пропадают шрифты или связанные изображения?
Чтобы растеризовать SVG, браузер загружает его как изображение, а в этом режиме SVG не может обращаться к внешним файлам. Веб-шрифты и связанные изображения пропускаются, а вместо них используются шрифты по умолчанию. Чтобы SVG был самодостаточным, встройте в него шрифты и изображения.