SVG в Base64

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

1. Перетащите файл .svg в поле или выберите его через диалог выбора файла.
2. Формат вывода по умолчанию – CSS background-image. Если нужен другой вид, переключитесь на Data URI, HTML <img>, Markdown или Чистый Base64.
3. Нажмите Скопировать результат и вставьте правило в свою таблицу стилей.

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

Base64 или URL-кодированный SVG

SVG – это текст, так что Base64 ему вообще не обязателен. Разметку можно положить в data URI напрямую, если закодировать через percent-encoding несколько символов. Вот одна и та же иконка-треугольник на 104 байта обоими способами:

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

URL-кодированный вариант короче, и после gzip разрыв растёт: два правила выше сжимаются до 200 и 162 байт. Для 20 маленьких иконок в одной таблице стилей вариант с Base64 занял 4421 байт (801 после gzip), а URL-кодированный – 3720 байт (615 после gzip). Gzip хорошо сжимает повторы в разметке, а Base64 их перемешивает.

У Base64 всё же есть свои плюсы. Ему не нужны правила экранирования, он переживёт любой контекст, где допустим URL, и именно его ждут многие API и инструменты сборки. URL-кодированный вариант ломается, если забыть экранировать # (он начинает фрагмент URL) или перепутать кавычки с окружающим url("..."). SVG в data URI собирает оба варианта и показывает их размеры.

Требования к data URI с SVG

• MIME-тип image/svg+xml. Данные PNG и JPEG браузеры распознают даже под неверным типом, а SVG – нет. С любым другим типом картинка не отобразится.
• Атрибут xmlns. Встроенный в HTML <svg> работает и без него, но в роли картинки корневой элемент обязан объявлять xmlns="http://www.w3.org/2000/svg". Многим иконкам, написанным вручную, его не хватает, и они молча не работают.
• Корректный XML. Незакрытый тег или неэкранированный & ломают всю картинку: частичной отрисовки не будет.

Base64 от SVG обычно начинается с PHN2Zy (<svg) или PD94bWwg (<?xml ). Если в начале что-то другое, например комментарий или метка порядка байтов, браузерам это не мешает, но формат труднее узнать по префиксу.

Стили и цвета

SVG в background-image или в <img> – это отдельный документ. CSS вашей страницы не может залезть внутрь, поэтому цвета при наведении и currentColor не работают. Два распространённых обходных пути:

• Используйте data URI как маску и раскрасьте её через background-color:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• Встройте разметку <svg> прямо в HTML, если иконка должна меняться в зависимости от состояния или темы.

Декодирование и исправление

Base64 в SVG превращает строку Base64 обратно в разметку, которую можно читать и править. Если SVG отображается в редакторе, но не как data URI, декодируйте его там и первым делом проверьте xmlns у корневого элемента.

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