SVG: що це, ключові поняття та використання в веб-розробці

Що таке SVG?

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

Архітектура SVG включає кілька ключових концепцій. viewBox визначає віртуальну систему координат, незалежну від фактичних розмірів елемента. Наприклад, 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, підтримка режимів композитингу та змішування, а також можливість використання SVG в HTML без префіксів namespace.

Хоча SVG 2 ще не досяг статусу Рекомендації, сучасні браузери вже підтримують більшість його функціоналу. 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 (кубічна крива Безьє), Q (квадратична крива Безьє), A (дуга), Z (закритий контур). Кожна команда має абсолютну або відносну форму (велика або мала літера).

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

SVG проти растрової графіки: порівняння форматів

Основна відмінність між 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 для фотоконтенту — надає найкращий баланс між якістю та продуктивністю завантаження сторінки.

Інлайн SVG та стилізація через CSS

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

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

За даними CSS-Tricks, інлайн SVG — рекомендований спосіб використання іконок у сучасних веб-додатках. Властивості CSS fill, stroke, stroke-width застосовуються безпосередньо до елементів SVG. Для налаштування через CSS важливо, щоб у вихідному SVG не були задані fill та stroke як інлайн-атрибути — інакше CSS не зможе їх перевизначити.

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

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

Анімація SVG: CSS та SMIL

Анімація SVG через CSS — найпоширеніший та найпродуктивніший спосіб анімації векторної графіки в браузері. Властивості 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 для складних послідовностей анімацій з часовими шкалами та функціями плавності, які складно реалізувати через чистий 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>

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

// Налягувати контур за допомогою 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"
});