Как встроить SVG в HTML через Base64 и убрать лишний код

Когда на странице десятки мелких иконок, каждая загружается отдельным запросом. Браузер тратит время на соединение с сервером, а вы — на ожидание. SVG, закодированный в Base64, решает проблему: вставляете картинку прямо в HTML или CSS, и она грузится вместе с документом.

Зачем кодировать SVG в Base64

SVG — это текстовый формат. Файл иконки весит 200–500 байт, но браузер всё равно делает отдельный HTTP-запрос. Если на странице 20 иконок, это 20 запросов. На HTTP/1.1 соединения открываются последовательно, на HTTP/2 — параллельно, но накладные расходы остаются.

Base64 превращает SVG в строку, которую можно вставить в атрибут src тега <img> или в CSS как background-image. Браузер получает картинку вместе с HTML, без дополнительных запросов. Загрузка страницы ускоряется на 50–200 мс, особенно на мобильных сетях.

Минусы тоже есть:

• Размер увеличивается на 30–40% (Base64 менее эффективен, чем бинарные данные)
• HTML или CSS файл раздувается
• Браузер не кэширует инлайн-картинки отдельно

Используйте Base64 для мелких иконок (до 2 КБ), которые нужны сразу при загрузке. Большие изображения лучше грузить отдельно.

Как закодировать SVG в Base64 вручную

Возьмём простую иконку галочки:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M13.5 2L6 9.5 2.5 6" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>

В терминале Linux/macOS:

base64 icon.svg

Получите строку вроде:

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTMuNSAyTDYgOS41IDIuNSA2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=

В Windows PowerShell:

[Convert]::ToBase64String([IO.File]::ReadAllBytes("icon.svg"))

Онлайн: скопируйте код SVG, вставьте в конвертер, нажмите «Encode». Получите готовую строку.

Вставка Base64 SVG в HTML

Закодированную строку вставляете в атрибут src с префиксом data:image/svg+xml;base64,:

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTMuNSAyTDYgOS41IDIuNSA2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=" alt="Check icon">

Браузер декодирует строку и рендерит SVG. Никаких внешних файлов, никаких запросов.

Альтернатива — вставить SVG напрямую:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M13.5 2L6 9.5 2.5 6" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>

Это чище и компактнее, чем Base64. Используйте прямую вставку, если SVG короткий (до 10 строк) и нужен только в одном месте. Base64 удобен, когда один файл переиспользуется в CSS или JS.

Использование в CSS

Base64 SVG работает в background-image:

.icon-check {
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTMuNSAyTDYgOS41IDIuNSA2IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=');
  background-size: contain;
}

Применяете класс к элементу:

<span class="icon-check"></span>

Иконка появляется как фон. Удобно для псевдоэлементов:

.list-item::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background-image: url('data:image/svg+xml;base64,...');
}

В CSS-файле Base64 хорош тем, что браузер кэширует весь файл стилей. Если иконка используется на многих страницах, она загрузится один раз.

Оптимизация: URL-encoding вместо Base64

Base64 раздувает SVG на 30–40%. Для SVG есть лучший способ — URL-encoding. Вместо преобразования в Base64, кодируете спецсимволы (<, >, ", #) в проценты (%3C, %3E, %22, %23).

Исходный SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M2 8l4 4 8-8" stroke="#000" fill="none"/></svg>

URL-encoded:

%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 8l4 4 8-8' stroke='%23000' fill='none'/%3E%3C/svg%3E

Вставляете в CSS:

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 8l4 4 8-8' stroke='%23000' fill='none'/%3E%3C/svg%3E");
}

Размер меньше на 20–30%, чем у Base64. Код читаемее — видно структуру SVG. Минус: не все редакторы корректно подсвечивают синтаксис.

Онлайн-инструменты для URL-encoding ищите по запросу «SVG to data URI». Многие конвертеры предлагают оба варианта: Base64 и URL-encoded.

Когда не стоит встраивать SVG

Не используйте Base64 или инлайн-SVG для:

• Больших иллюстраций (от 5 КБ) — лучше загрузить файлом и кэшировать
• Часто меняющихся иконок — при каждом изменении придётся перегенерировать строку и обновлять HTML/CSS
• Изображений, которые нужны только на части страниц — они раздуют основной CSS или HTML

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

Для остальных случаев используйте обычные файлы с кэшированием. Современные CDN и HTTP/2 делают загрузку мелких файлов быстрой.

Инструменты для быстрого кодирования

Вручную конвертировать SVG каждый раз неудобно. Используйте онлайн-инструменты:

• Base64 Encoder — вставляете SVG-код, получаете строку для data:image/svg+xml;base64,
• URL Encoder — кодирует спецсимволы для компактной data URI без Base64

Оба инструмента работают в браузере, данные не уходят на сервер. Вставили код, скопировали результат, вставили в HTML или CSS. Весь процесс занимает 10 секунд.