SVG для веба: полное руководство 2026

SVG (Scalable Vector Graphics). единственный формат изображений в вебе, который одновременно обладает бесконечным разрешением и является текстовым. Один SVG-логотип выглядит идеально на экране мобильного телефона, 4K-мониторе и печатном билборде. без какой-либо потери качества. Понимание того, когда и как использовать SVG, необходимо для создания быстрых, чётких и современных сайтов.

Чем SVG отличается от JPEG, PNG или WebP?

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

Когда использовать SVG

• Логотипы и фирменные знаки: важнейший сценарий. один SVG-файл работает во всех размерах
• Иконки и элементы интерфейса: наборы иконок, навигационные иконки, иконки кнопок, SVG легче и чётче, чем PNG-спрайты
• Диаграммы, графики, инфографика: всё, что содержит линии, фигуры и текст, значительно выигрывает от векторного формата
• Иллюстрации с плоскими или градиентными цветами: иллюстрации в нарисованном от руки стиле чисто экспортируются в SVG
• Анимированная графика: анимированные CSS SVG. лёгкие альтернативы GIF или видео для простой анимации

Когда НЕ использовать SVG

• Фотографии: SVG не имеет эффективного способа представления фотографического контента. Фотография, встроенная в SVG, является просто растровым изображением в формате base64. используйте JPEG/WebP/AVIF вместо этого
• Очень сложные иллюстрации: высокодетализированный SVG с тысячами путей может быть больше и медленнее в рендеринге, чем эквивалентный WebP. Оцените перед выбором

Три способа встраивания SVG в HTML

1. Как тег <img> (внешний файл)

<img src="logo.svg" alt="Логотип компании" width="200" height="60">

Просто и кешируемо. SVG не может быть стилизован с помощью CSS родительской страницы. Хорошо подходит для логотипов и декоративных изображений.

2. Встроенный SVG (непосредственно в HTML)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
</svg>

Разметка SVG находится в HTML. Вы можете обращаться к его элементам с помощью CSS и JavaScript. отлично подходит для интерактивных иконок или иллюстраций с поддержкой тем, которые должны менять цвет в тёмном режиме.

3. Как CSS-фон

background-image: url('icon.svg');

Полезно для декоративных фонов или при использовании SVG в качестве CSS-маски. Не может быть динамически стилизован.

Оптимизация SVG-файлов

SVG, экспортированные из дизайн-инструментов (Illustrator, Figma, Inkscape), часто содержат ненужные метаданные, комментарии и избыточные атрибуты. Всегда прогоняйте SVG через оптимизатор перед развёртыванием:

• SVGO: стандартный SVG-оптимизатор командной строки. Может уменьшить размер файла на 40–70%
• Настройки экспорта Figma / Sketch: используйте настройки экспорта «Оптимизированный» в вашем дизайн-инструменте
• Онлайн-инструменты: svgomg.net предоставляет визуальный интерфейс для SVGO

Доступность SVG

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

<!-- Для декоративных SVG -->
<img src="decoration.svg" alt="" role="presentation">

<!-- Для информационных SVG -->
<img src="chart.svg" alt="Столбчатая диаграмма, показывающая рост продаж на 40% в 4 квартале">

<!-- Для встроенных SVG -->
<svg role="img" aria-labelledby="title">
  <title id="title">Логотип компании</title>
  ...
</svg>