SVG: что это, ключевые понятия и использование в веб-разработке

Что такое SVG?

SVG — формат векторной графики, основанный на XML, который появился в 2001 году как рекомендация W3C. В отличие от растровых форматов, SVG описывает изображение через геометрические примитивы: точки, линии, кривые и многоугольники. Файл SVG — это обычный текстовый XML-документ, который можно читать, редактировать и сжимать стандартными инструментами.

Архитектура SVG включает несколько ключевых концепций. viewBox задаёт виртуальную систему координат, independent от фактических размеров элемента. Например, viewBox="0 0 100 100" создаёт квадратную сетку 100×100, внутри которой все координаты фиксированы. При изменении ширины или высоты контейнера содержимое масштабируется пропорционально.

По данным W3C SVG 2 Specification, современная версия SVG поддерживает градиенты, маски, фильтры, текст с произвольным позиционированием, интерактивность через JavaScript и анимацию через CSS и SMIL. SVG интегрирован в DOM как полноценный элемент HTML, что позволяет управлять каждым графическим примитивом программно.

В мобильной разработке SVG также используется в iOS через UIGraphicsImageRenderer и в Android через VectorDrawable — оба формата конвертируют SVG-подобные описания в аппаратно-ускоренные растры на GPU.

История и развитие формата SVG

SVG 1.0 стал рекомендацией W3C в 2001 году, SVG 1.1 — в 2003 году, SVG 2.0 находится в разработке с 2012 года. Основное нововведение SVG 2 — интеграция с CSS более глубокого уровня, поддержка compositing и blending modes, а также возможность использования SVG в HTML без namespace-префиксов.

Несмотря на то что SVG 2 ещё не достиг статуса Recommendation, современные браузеры уже поддерживают большую часть его функциональности. Chrome, Safari, Firefox и Edge имеют практически полную поддержку SVG 1.1 и значительную часть SVG 2.

Основные элементы SVG

SVG предоставляет набор элементов для описания двумерной графики. Каждый элемент имеет атрибуты, определяющие его положение, размер и визуальное оформление. Атрибуты могут быть заданы в виде xml-атрибутов или через CSS-свойства.

• <rect> — прямоугольник с атрибутами x, y, width, height, rx, ry (скругление углов).
• <circle> — окружность с атрибутами cx, cy (центр) и r (радиус).
• <ellipse> — эллипс с атрибутами cx, cy, rx, ry.
• <line> — отрезок с атрибутами x1, y1, x2, y2.
• <polyline> — ломаная линия с атрибутом points (список координат).
• <polygon> — замкнутый многоугольник с атрибутом points.
• <path> — произвольный контур с атрибутом d (команды: M, L, C, Q, A, Z).
• <text> — текстовый элемент с атрибутами x, y, font-size, font-family.

Элемент path — самый мощный и гибкий элемент SVG. Атрибут d содержит последовательность команд: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Каждая команда имеет абсолютную или относительную форму (заглавная или строчная буква).

SVG также поддерживает группировку элементов через <g>. Группа наследует визуальные атрибуты (fill, stroke, transform) на все дочерние элементы. Это позволяет применять единый стиль к целому набору фигур и управлять их положением через единый transform.

SVG vs растровая графика: сравнение форматов

Основное различие между SVG и растровыми форматами (JPEG, PNG, WebP) — способ хранения информации. Растр хранит цвета каждого пикселя в сетке фиксированного размера. SVG хранит математические команды для воспроизведения фигур. Это различие определяет все преимущества и недостатки форматов.

По данным HTTP Archive, 2025, 68% веб-сайтов используют SVG для иконок, 34% — для иллюстраций и 22% — для логотипов. Средний размер SVG-иконки составляет 0.5–2 КБ, тогда как растровая иконка аналогичного качества — 5–20 КБ в формате PNG.

Для фотографий и сложных растровых изображений SVG не подходит — размер XML-описания превысит размер эквивалентного JPEG. Рекомендуемая область применения SVG: иконки, логотипы, иллюстрации, схемы, графики, интерфейсные элементы с адаптивным дизайном.

Когда выбрать SVG, а когда — растровый формат

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

Гибридный подход — комбинация SVG для интерфейсных элементов и WebP/AVIF для фотоконтента — даёт наилучший баланс между качеством и производительностью загрузки страницы.

Inline SVG и стилизация через CSS

Inline SVG — это встраивание SVG-разметки непосредственно в HTML-документ, а не в виде отдельного файла через <img> или background-image. Преимущество inline SVG в том, что элементы SVG становятся частью DOM и могут быть стилизованы через CSS, управляемы через JavaScript и анимированы без дополнительных запросов к серверу.

В отличие от <img src="icon.svg">, где SVG изолирован в shadow DOM, inline SVG наследует цвета и шрифты родительского документа. Это позволяет реализовать, например, смену цвета иконки при наведении через CSS-псевдокласс :hover без загрузки отдельного файла для каждого состояния.

По данным CSS-Tricks, inline SVG — рекомендованный способ использования иконок в современных веб-приложениях. CSS-свойства fill, stroke, stroke-width применяются к элементам SVG напрямую. Для кастомизации через CSS важно, чтобы в исходном SVG не были заданы fill и stroke как inline-атрибуты — иначе CSS не сможет их переопределить.

• Преимущества: стилизация через CSS, управление через JS, отсутствие HTTP-запросов, адаптивность viewBox.
• Недостатки: увеличение размера HTML-страницы, невозможность кэширования отдельно от HTML.
• Альтернатива: SVG-спрайты — объединение нескольких SVG в один файл и использование <use href="#id">.

SVG-спрайты решают проблему кэширования: все иконки собираются в один файл, браузер загружает его один раз, а отдельные иконки подключаются через <use> с указанием id нужного элемента внутри спрайта.

Анимация SVG: CSS и SMIL

CSS-анимация SVG — самый распространённый и производительный способ анимации векторной графики в браузере. CSS-свойства, такие как transform, opacity и fill, применяются к элементам SVG так же, как к HTML-элементам. Для анимации вдоль произвольного пути используется CSS-свойство offset-path.

SMIL (Synchronized Multimedia Integration Language) — встроенный в SVG механизм анимации, не зависящий от CSS. Элементы <animate>, <animateTransform> и <animateMotion> позволяют анимировать любые атрибуты SVG без JavaScript и CSS. SMIL-анимация гарантированно синхронизирована с кадровой частотой браузера.

По данным MDN Web Docs, SMIL поддерживается во всех современных браузерах, но CSS-анимация считается более предсказуемой и производительной. Основной сценарий для SMIL — анимация атрибутов, которые недоступны через CSS, например d (path) элемента <path>.

JavaScript + requestAnimationFrame даёт максимальный контроль над анимацией SVG. Веб-разработчики используют библиотеки GSAP и Anime.js для сложных последовательностей анимаций с временными шкалами и easing-функциями, которые сложно реализовать через чистый CSS.

Примеры кода: создание SVG-графики

Первый пример — простая иконка домика с использованием базовых SVG-элементов. Все фигуры — rect и polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Второй пример — анимация вращения лоадера через CSS. Используется <circle> с атрибутом stroke-dasharray для создания прерывистого контура:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Третий пример — анимация path через библиотеку GSAP для плавного рисования контура. GSAP работает с атрибутом stroke-dashoffset, создавая эффект появления линии:

// Draw path with GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});