Base64 в SVG

Как декодировать Base64 в SVG

1. Вставьте Base64, URI data:image/svg+xml;base64,... или CSS либо HTML, в котором он есть. URL-кодированные data URI с SVG (data:image/svg+xml,%3Csvg...) тоже подходят.
2. Превью рисует графику и показывает её размеры или «масштабируемое», если браузер не сообщает фиксированного размера. Ниже – полный исходный XML.
3. Нажмите Скачать файл, чтобы сохранить .svg, или выделите разметку в блоке исходного кода, чтобы её скопировать.

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

Безопасность SVG: превью картинкой и встроенная разметка

Файл SVG – это документ. В нём могут быть элементы <script>, атрибуты событий вроде onload, ссылки, встроенный HTML через <foreignObject> и ссылки на внешние картинки и шрифты. Что браузер со всем этим сделает, зависит от того, как SVG загружен:

Эта страница декодирует байты и передаёт их в <img> как data:image/svg+xml;base64,..., поэтому, что бы ни было в файле, он только рисуется. Блок исходного кода показывает текст, ничего не интерпретируя.

Если вы собираетесь встроить SVG в страницу, сначала прочитайте исходный код и поищите:

• элементы <script> и атрибуты, начинающиеся с on, например onload или onclick
• javascript: в href или xlink:href
• <foreignObject>, внутри которого может быть произвольный HTML
• значения href, указывающие на адреса http:// или https:// (их могут использовать для отслеживания)
• объявления <!ENTITY, которые некоторые серверные XML-парсеры опасно раскрывают

Base64 прячет всё это от беглого взгляда, поэтому вредоносный SVG и кодируют. Декодирование здесь снимает маскировку. Сам Base64 ничего не защищает; см. кодирование и шифрование.

Как распознаётся SVG

Большинство файлов SVG начинается с <svg или с XML-объявления, поэтому их Base64 начинается с PHN2Zy или PD94bWwg. Метка порядка байтов UTF-8 в начале добавляет 77u/, как в 77u/PHN2Zy....

Инструмент считает данные SVG, если тег <svg – первый элемент после пропуска XML-объявления, комментариев и строки <!DOCTYPE svg ...>, и всё это в пределах первых 2 KB. Если data URI объявляет image/svg+xml, в любом случае используется заявленный тип. Если SVG встроен во что-то другое, например в HTML-страницу, или очень длинный комментарий отодвигает тег дальше 2 KB, появится подсказка «Не похоже на SVG»; впишите image/svg+xml в поле MIME-тип, чтобы его отрисовать.

Если SVG не отрисовывается

• «Не удалось отрисовать этот SVG». XML сломан: незакрытый тег, неэкранированный & или обрезанная строка без закрывающего </svg>. Сначала посмотрите в конец исходного кода.
• Здесь отрисовывается, а на вашем сайте нет. Проверьте, как сайт его отдаёт. В data URI тип должен быть image/svg+xml; файл, отданный как text/plain или application/octet-stream, тоже не отрисуется как картинка.
• Встроенным отрисовывается, а как data URI – нет. У корневого элемента нет xmlns="http://www.w3.org/2000/svg". Встроенному SVG в HTML он не нужен, а картинкам нужен.
• Не те цвета. SVG в роли картинки не может унаследовать currentColor или CSS со страницы. Он рисуется теми цветами, что заданы в файле, по умолчанию чёрным.

Как использовать декодированный SVG в коде

В браузере безопасный способ показать SVG из Base64 – оставить его картинкой:

const img = new Image();
img.src = "data:image/svg+xml;base64," + b64;
document.body.append(img);

Если вместо этого написать element.innerHTML = atob(b64), разметка попадёт в вашу страницу, где её скрипты и обработчики событий выполнятся с правами вашей страницы. Кроме того, atob() возвращает байты как символы Latin-1, что ломает текст не из ASCII внутри SVG, в том числе кириллицу; как правильно декодировать UTF-8, показано в статье Base64 в JavaScript. Чтобы закодировать SVG, используйте SVG в Base64.

Вопросы и ответы