Как вставить SVG на сайт — img, инлайн, background и что выбрать
SVG можно вставить на сайт четырьмя разными способами, и они не взаимозаменяемы: один даёт кэширование, другой — управление цветом из CSS, третий — экономию запросов. Выбор влияет на скорость, гибкость и даже безопасность. Разберём каждый способ с кодом и честным списком ограничений.
Логотип и картинки — <img src="logo.svg">: просто, кэшируется, безопасно. Иконки, которые нужно перекрашивать (ховеры, тёмная тема) — инлайн <svg> в HTML. Декор и фоны — background-image в CSS. Спрайты через <use> — когда одинаковых иконок много.
Способ 1. Тег img — дефолтный выбор
<img src="/images/logo.svg" alt="Логотип компании" width="140" height="40">Работает как любая картинка: файл кэшируется браузером, лениво грузится с loading="lazy", не раздувает HTML.
Плюсы: кэширование, простота, безопасность — скрипты внутри SVG в этом режиме не выполняются.
Минусы: нельзя управлять внутренностями из CSS. Перекрасить логотип по ховеру через fill не получится — стили страницы внутрь <img> не проникают.
Без явных размеров некоторые браузеры считают размер SVG уже после загрузки — и вёрстка прыгает. Атрибуты width/height резервируют место заранее и убирают сдвиг макета (тот самый CLS из Core Web Vitals).
Способ 2. Инлайн SVG — полный контроль
Код SVG вставляется прямо в HTML:
<button class="btn">
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
</svg>
Отправить
</button>Плюсы: полное управление из CSS и JS — цвет, анимации, transition по ховеру. Волшебное слово fill="currentColor" заставляет иконку наследовать цвет текста: сменился цвет кнопки — сменилась и иконка, включая тёмную тему автоматически. Плюс ноль сетевых запросов.
Минусы: код не кэшируется (грузится с каждой страницей), раздувает HTML, а повторяющаяся иконка копипастится по всему шаблону.
Когда выбирать: интерфейсные иконки, которые меняют цвет по состоянию, и критичные элементы первого экрана, которым нельзя ждать сетевой запрос.
Способ 3. Background‑image в CSS — для декора
.hero {
background-image: url('/images/pattern.svg');
background-size: cover;
}Плюсы: кэшируется, декор отделён от контента, работают background-repeat и все фоновые трюки.
Минусы: перекрашивать нельзя (лайфхак: одноцветную иконку можно красить через mask-image + background-color), для скринридеров изображение невидимо — значит, только для декора, не для смысла.
Способ 4. SVG‑спрайт и use — когда иконок много
Все иконки складываются в один файл‑спрайт, а на странице вызываются по id:
<svg class="icon"><use href="/sprite.svg#icon-search"/></svg>Плюсы: один запрос на все иконки, кэшируется, currentColor работает.
Минусы: нужно собирать спрайт (обычно автоматикой в сборке), а с ленивой загрузкой отдельных иконок сложнее.
Когда выбирать: дизайн‑системы и интерфейсы с десятками повторяющихся иконок.
Сводная таблица
| img | инлайн | background | спрайт | |
|---|---|---|---|---|
| Кэширование | ✅ | ⛔ | ✅ | ✅ |
| Перекраска из CSS | ⛔ | ✅ | ⛔ | ✅ |
| Доступность (alt) | ✅ | ✅ | ⛔ | ✅ |
| Не раздувает HTML | ✅ | ⛔ | ✅ | ✅ |
| Типичный случай | логотип | иконки UI | декор | иконки UI (много) |
Безопасность: почему чужой SVG нельзя вставлять инлайном
SVG — это XML, и внутри него могут жить <script>, обработчики событий и внешние ссылки. Через <img> и background браузер это всё игнорирует, а вот инлайн‑вставка выполняет скрипты с полными правами вашей страницы.
Инлайном вставляйте только SVG, которые вы контролируете: свои или из проверенного источника, прогнанные через оптимизатор (SVGO вычищает скрипты). SVG, загруженный пользователями, — только через <img> и с отдельного домена.
Частые вопросы
Нужен ли фоллбэк в PNG? Нет. SVG поддерживают все браузеры, которые вы встретите в 2026 году. Фоллбэки для IE — археология.
Почему мой инлайн‑SVG огромный на странице? У него, скорее всего, нет атрибута viewBox или заданы гигантские width/height в самом файле. Проверьте, что viewBox есть, а размеры управляются с уровня CSS.
Как анимировать SVG? Инлайн‑вставка + обычные CSS‑анимации на path и группы. Для сложного — библиотеки типа GSAP или Lottie (какая анимация логотипу вообще нужна — разбирали отдельно).
Работает ли lazy loading для SVG? Для <img> — да, обычный loading="lazy". Инлайн‑SVG грузится вместе с HTML и лениво не бывает — ещё один аргумент не инлайнить всё подряд.
Как задать SVG в качестве курсора или favicon? Favicon — да, через <link rel="icon" type="image/svg+xml"> (детали — в статье про фавиконы). Курсор — формально можно (cursor: url(icon.svg)), но поддержка капризная, надёжнее PNG.
Доступность: три атрибута, о которых забывают
SVG на сайте должен быть понятен не только глазам, но и скринридерам:
- Смысловая картинка (логотип, иллюстрация): в
<img>— обычныйalt; в инлайн‑SVG —role="img"и<title>первым дочерним элементом:
<svg role="img" viewBox="0 0 100 100">
<title>Логотип компании</title>
...
</svg>- Декоративная иконка рядом с текстом (иконка в кнопке «Отправить»): наоборот, спрячьте её от скринридера —
aria-hidden="true", иначе он прочитает и текст, и описание иконки. - Интерактивный SVG (кнопка‑иконка без текста):
aria-labelна самой кнопке, а SVG внутри — сaria-hidden.
Это три строки кода, которые отделяют аккуратный сайт от сайта, где незрячий пользователь слышит «graphic graphic graphic» вместо навигации.
Производительность: что даёт каждый способ в цифрах
Прикинем на типичной странице с логотипом и 20 иконками:
- Всё инлайном: +30–60 КБ к каждому HTML‑документу; иконки не кэшируются между страницами. На сайте из 100 страниц пользователь скачает иконки 100 раз.
- Всё через img: 21 запрос при первом визите, дальше — из кэша. Но 20 запросов на старте — заметная пауза на медленных сетях (HTTP/2 смягчает, но не отменяет).
- Спрайт + инлайн‑логотип: 1 запрос на все иконки (кэшируется), логотип виден мгновенно без запроса. Обычно это оптимум.
И два усилителя для любого способа: сожмите SVG оптимизатором (минус 30–70% веса — см. статью про оптимизацию SVG) и убедитесь, что сервер отдаёт SVG с gzip/brotli — текстовый формат сжимается в 3–5 раз.
Частый вопрос: SVG‑логотип «прыгает» при загрузке
Классический симптом: страница отрисовалась, а логотип появился на долю секунды позже, сдвинув шапку. Причины и лечение:
- Нет width/height у img — браузер не знает размер до загрузки. Задайте атрибуты.
- SVG грузится из CSS‑фона после парсинга стилей — для логотипа в шапке используйте
<img>или инлайн. - Логотип зависит от веб‑шрифта (текст в SVG не в кривых) — переведите текст в кривые.
Для первого экрана работает и приём «критический инлайн»: логотип шапки — инлайном (мгновенно), всё остальное — файлами с кэшированием.
Коротко
<img> — для логотипов и картинок, инлайн — для перекрашиваемых иконок, background — для декора, спрайт — для иконок оптом. И никогда не инлайньте SVG из непроверенных источников.
Все SVG в нашем каталоге логотипов — чистый вектор без скриптов и мусора: можно скачать файл для <img> или скопировать код прямо в разметку одной кнопкой.