SVG

Що це таке

SVG (Scalable Vector Graphics, масштабована векторна графіка) — це мова, яка описує двовимірну графіку як фігури, а не як сітку пікселів. Файл каже, що саме намалювати: тут коло, там лінію від однієї точки до іншої, а цей обрис залити синім. Пікселі браузер обчислює сам, у тому розмірі, в якому малюнок показано, і звідси масштабованість: у файлі немає пікселів, які довелося б розтягувати.

Специфікацію веде W3C. Остання версія, SVG 2, має статус Candidate Recommendation Snapshot від 6 жовтня 2026 року, стати рекомендацією W3C може не раніше 1 грудня 2026 року і спирається на SVG 1.1 Second Edition. У власному стислому описі специфікація каже, що SVG ґрунтується на XML, поєднує векторні фігури з растровими зображеннями, а ще піддається стилізації, скриптам і анімації. Малюнок може існувати окремо, стояти всередині HTML-сторінки або бути вбудованим в іншу мову на основі XML.

Словник невеликий. Шість базових фігур, rect, circle, ellipse, line, polyline і polygon, покривають прості випадки, а контур path малює все інше за коротким рядком команд. text розміщує справжній текст, який можна виділити, група (g) дає кільком фігурам спільний стиль чи перетворення, а градієнт або візерунок може зафарбувати фігуру замість одного кольору. Ефекти фільтрів, які в SVG 1.1 були розділом специфікації, тепер мають власну специфікацію. Кожен малюнок має систему координат із початком у лівому верхньому куті: x зростає праворуч, y — донизу.

Специфікація визначає SVG через об’єктну модель документа, а не через якийсь конкретний формат файлу. Малюнок може бути окремим файлом із типом медіа image/svg+xml і розширенням .svg або елементом svg, написаним просто в HTML-сторінці. Окремий файл мусить оголосити простір імен SVG. У HTML парсер сам кладе елементи в потрібний простір імен, тож атрибут xmlns там не потрібен.

SVG — не растровий формат, як PNG чи JPEG, що зберігають колір кожного пікселя й розпливаються, коли їх збільшують. Фотографіям місце саме в них. SVG пасує до того, що намальовано: піктограм, логотипів, діаграм, графіків, мап і мальованих написів. Усередині SVG може бути й растрове зображення, і саме це специфікація називає змішаною графікою.

Чому це важливо

Один файл годиться для кожного екрана. Піктограма, намальована один раз, виглядає чітко і на старому моніторі, і на телефоні, де на один CSS-піксель припадає кілька фізичних, і на папері, і нікому не треба тримати в синхроні окремі експорти для кожного розміру. Простий малюнок до того ж дає малий файл, бо описує кілька обрисів замість тисяч пікселів, а специфікація реєструє .svgz для SVG-файлу, стиснутого gzip.

Оскільки розмітка — це текст, вона вписується в те, як команда вже працює. Експорт від дизайнера можна прочитати під час рев’ю коду й порівняти рядок за рядком у системі контролю версій, а скрипт може згенерувати малюнок із даних, і саме так з’являється багато графіків. Коли малюнок написано просто в сторінці, його елементи стають частиною DOM: CSS їх стилізує, скрипт може їх змінити, і вони реагують на наведення, фокус і колірну схему читача так само, як усе інше на сторінці.

Ще SVG несе зміст, якого растрове зображення не передасть. Текст у SVG лишається текстом, і специфікація вимагає, щоб браузер давав читачеві шукати його й виділяти. Елемент title дає малюнку або окремій його частині доступну назву, а SVG 2 надає елементу svg неявну роль ARIA graphics-document. Графік, намальований у SVG, може мати названі частини, до яких екранний читач дістається одна за одною. Той самий графік, експортований у PNG, — це одна картинка з однією текстовою альтернативою.

Як це виглядає на практиці

Ось невелика стрілка в рамці із заокругленими кутами, написана просто в HTML-сторінці:

<svg viewBox="0 0 120 40" width="240" height="80">
  <title>Наступний крок</title>
  <g fill="none" stroke="currentColor" stroke-width="3">
    <rect x="2" y="2" width="116" height="36" rx="8" />
    <path d="M 20 20 H 92 M 80 10 L 100 20 L 80 30" />
  </g>
</svg>

viewBox дає малюнку власні координати: чотири числа, тобто лівий край, верхній край, ширину й висоту області, яку треба показати. Тут ця область має 120 одиниць завширшки і 40 заввишки. width і height просять 240 на 80 CSS-пікселів, тож кожна одиниця займає два пікселі. Змініть ці два числа на 60 і 20, і весь малюнок зменшиться разом із ними, включно з товщиною ліній, бо ніщо всередині не виміряно в пікселях.

Група задає фарбування один раз. Заливка, обведення й товщина обведення успадковуються, тож і рамка, і стрілка беруть їх від g. rect малює рамку, а rx заокруглює її кути. Контур читається як вказівки для пера: M 20 20 переносить перо в точку, нічого не малюючи, H 92 проводить горизонтальну лінію до точки, де x дорівнює 92, друге M піднімає перо й ставить його на верхній кінець вістря, а дві команди L малюють два штрихи вістря. Команди з великої літери беруть абсолютні координати, з малої — відносні, тож той самий контур можна записати як m 20 20 h 72 m -12 -10 l 20 10 l -20 10, де кожен крок відміряно від місця, де перо зупинилося.

currentColor робить колір обведення значенням CSS-властивості color, яку елемент svg у сторінці успадковує від HTML навколо нього. Поставте стрілку в посилання, і вона матиме колір посилання. Перемкніть сторінку на темну тему, і стрілка підлаштується без другого файлу. title не малюється. Він дає малюнку доступну назву, а SVG 2 зауважує, що браузери зазвичай показують його як спливну підказку, коли вказівник затримується над малюнком.

Той самий малюнок як окремий файл потребує простору імен на кореневому елементі, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">, а сторінка показує його через <img src="/images/next.svg" alt="Наступний крок">. Тепер це окремий документ. Успадкування в CSS іде від батьківського елемента до дочірнього, а кореневий елемент цього документа батьківського не має, тож currentColor у файлі вже не стежить за текстом навколо img. Текстову альтернативу тепер дає атрибут alt, а SVG 2 очікує, що браузер покаже файл у безпечному анімованому режимі, без скриптів і без зовнішніх файлів.

Заява про доступність цього сайту каже, що сторінки написано на HTML, CSS і SVG, з WAI-ARIA там, де самого HTML не досить, щоб щось назвати, і що кожна сторінка повна й без виконуваного JavaScript. Там, як і в цій статті, SVG — одна з мов, якими пишуть сторінку, поряд із розміткою та таблицями стилів.

Де виникають проблеми

Лінійний малюнок стає суцільною фігурою. Початкове значення fill — чорний колір, а початкове значення stroke — відсутність обведення. Відкритий контур, задуманий як лінія, скажімо вістря стрілки чи галочка, заливається так, ніби його кінці з’єднано, а без обведення самих ліній не видно зовсім. Задайте fill="none" і stroke для лінійних малюнків один раз, на групі, що їх містить.

Піктограма зникає в темній темі. Експортовані піктограми часто мають фіксований колір, fill="#1a1a1a", і на темному тлі він лишається темним. До того ж такий атрибут — найслабший стиль, який тільки буває: SVG 2 дає атрибутам представлення нульову специфічність, тож випадкове правило CSS деінде перекриває його, і ніхто цього не помічає. Для піктограм у тексті використовуйте currentColor, а кольори задавайте з CSS, а не в розмітці.

Малюнок не масштабується або масштабується не так. Без viewBox одиниці малюнка — це пікселі браузера, тож нова ширина лише обрізає малюнок або додає довкола нього порожнечу, а preserveAspectRatio ігнорується повністю. Від’ємна ширина чи висота у viewBox — помилка, і тоді атрибут вважається відсутнім. Нульова ширина або висота вимикає відображення. Дайте кожному малюнку viewBox, а розмір нехай визначають width і height або CSS. Значення за замовчуванням, xMidYMid meet, зберігає пропорції й ставить малюнок посередині його області.

Масштабованість ще не означає розбірливість. Ніщо у векторному малюнку не заважає показати його в 16 пікселях, але деталі, добре помітні у 200, там можуть злитися в пляму. Сторінка портфоліо про те, як створювали айдентику компанії, описує векторну шестірню, яку намалювали для вкладки браузера з міркування, що виразний силует лишається розбірливим у 16 пікселях. У тій роботі, виконаній у липні 2026 року, шестірню та знак компанії показали поруч у розмірах 16, 32 і 48 пікселів на світлій і темній панелях вкладок: знак лишився впізнаваним, шестірня розмилася, і піктограма вкладки перейшла на знак. Перевіряйте малюнок у найменшому розмірі, в якому його показуватимуть, на обох видах тла, а якщо він не витримує, намалюйте для малих розмірів простіший варіант.

Завантажений SVG — це документ, а не картинка. SVG-файл може містити скрипт і посилання на інші файли. Реєстрація його типу медіа прямо каже, що скриптові мови є виконуваним вмістом, і попереджає, що зловмисно побудовані сутності XML, розгорнуті знову і знову, можуть забрати великі обсяги пам’яті. Скільки з цього справді виконається, залежить від того, як файл показано. SVG 2 очікує, що елемент object без пісочниці відтворює файл у динамічному інтерактивному режимі, зі скриптами, тоді як img і фонові зображення в CSS використовують безпечний анімований режим, без скриптів і без зовнішніх посилань. Показуйте SVG із чужих джерел лише через img, віддавайте завантаження з окремого домену або очищайте їх за дозвільним списком елементів і атрибутів, перш ніж зберегти.

Що почитати далі

• Scalable Vector Graphics (SVG) 2 — Candidate Recommendation Snapshot W3C від 6 жовтня 2026 року: статус, анотація і всі розділи.
• Coordinate Systems, Transformations and Units — viewBox, preserveAspectRatio і початкова система координат.
• Paths — команди контурів, абсолютні й відносні координати і що стається з даними контуру, у яких є помилка.
• Painting: Filling, Stroking and Marker Symbols — fill і stroke, їхні початкові значення та значення currentColor.
• Conformance Criteria — п’ять режимів обробки і який із них дістається кожному способу вбудовування.
• Document Structure — title і desc та неявні ролі ARIA елементів SVG.