Как пользоваться
- Перетащите файл .svg в область загрузки, нажмите на неё, чтобы выбрать файл, или вставьте изображение.
- Оставьте в списке «Преобразовать в» значение «Исходный формат», чтобы закодировать саму разметку SVG, или выберите PNG, JPEG или WebP, чтобы превратить её в пиксели.
- Если вы растеризуете изображение, задайте его размер в пикселях в параметре «Макс. ширина».
- Скопируйте CSS background-image для таблицы стилей либо data URI, чистый Base64, тег img или версию для Markdown.
SVG в виде data URI
SVG (Scalable Vector Graphics, тип MIME image/svg+xml) описывает фигуры в виде текста XML, поэтому изображение остаётся чётким при любом размере. Его Base64 обычно начинается с PHN2Zy (закодированное <svg) или с PD94bWw, если файл начинается с объявления XML.
Когда SVG используется как изображение, корневой элемент должен содержать xmlns="http://www.w3.org/2000/svg". Во многих фрагментах, скопированных из HTML, этого атрибута нет, и тогда data URI ничего не показывает. Кроме того, в режиме изображения внешние ресурсы блокируются, поэтому веб-шрифты и связанные изображения внутри SVG не загрузятся; сначала преобразуйте текст в контуры или встройте эти ресурсы.
Base64 или URL-кодирование?
Поскольку SVG уже является текстом, data URI может содержать разметку напрямую, а в процентную запись переводятся лишь несколько символов (<, >, #, % и кавычки). Для типичного значка в CSS такой вариант короче Base64 и лучше сжимается gzip. Base64 надёжнее, если строка проходит через системы, которые искажают кавычки или специальные символы, или если API ожидает именно Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Процентное кодирование */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Чтобы получить вариант с процентным кодированием, воспользуйтесь генератором data URI и выберите «Процентное кодирование».
Очищайте SVG из ненадёжных источников
SVG может содержать элементы <script>, атрибуты обработчиков событий, например onload, и ссылки на другие документы. Браузеры не выполняют скрипты в SVG, показанном через <img> или фон CSS, но тот же файл, встроенный в HTML или открытый отдельно, может их выполнить. Если пользователи могут загружать файлы SVG в ваше приложение, очищайте их, например с помощью DOMPurify, прежде чем сохранять или встраивать. Base64 лишь скрывает разметку от беглого взгляда, но не делает её безопасной.
Часто задаваемые вопросы
Что лучше для SVG: Base64 или URL-кодирование?
Для SVG в CSS URL-кодирование обычно короче и остаётся читаемым. Base64 надёжнее, когда строка проходит через другие системы или когда API требует Base64.
Почему мой data URI для SVG не отображается?
xmlns у корневого элемента, в неэкранированном символе # в URI с процентным кодированием, а также в шрифтах или изображениях, которые SVG загружает из других файлов.Можно ли преобразовать SVG в строку Base64 в формате PNG?
Да. Выберите PNG в списке «Преобразовать в». Браузер отрисует SVG в пикселях, а параметр «Макс. ширина» позволяет уменьшить результат.