# 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-сторінці: ```html Наступний крок ``` `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 зауважує, що браузери зазвичай показують його як спливну підказку, коли вказівник затримується над малюнком. Той самий малюнок як окремий файл потребує простору імен на кореневому елементі, ``, а сторінка показує його через `Наступний крок`. Тепер це окремий документ. Успадкування в CSS іде від батьківського елемента до дочірнього, а кореневий елемент цього документа батьківського не має, тож `currentColor` у файлі вже не стежить за текстом навколо `img`. Текстову альтернативу тепер дає атрибут `alt`, а SVG 2 очікує, що браузер покаже файл у безпечному анімованому режимі, без скриптів і без зовнішніх файлів. [Заява про доступність](/uk/accessibility/) цього сайту каже, що сторінки написано на 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, там можуть злитися в пляму. [Сторінка портфоліо про те, як створювали айдентику компанії](/uk/portfolio/built-the-visual-identity-from-2-drawings/), описує векторну шестірню, яку намалювали для вкладки браузера з міркування, що виразний силует лишається розбірливим у 16 пікселях. У тій роботі, виконаній у липні 2026 року, шестірню та знак компанії показали поруч у розмірах 16, 32 і 48 пікселів на світлій і темній панелях вкладок: знак лишився впізнаваним, шестірня розмилася, і піктограма вкладки перейшла на знак. Перевіряйте малюнок у найменшому розмірі, в якому його показуватимуть, на обох видах тла, а якщо він не витримує, намалюйте для малих розмірів простіший варіант. **Завантажений SVG — це документ, а не картинка.** SVG-файл може містити скрипт і посилання на інші файли. Реєстрація його типу медіа прямо каже, що скриптові мови є виконуваним вмістом, і попереджає, що зловмисно побудовані сутності XML, розгорнуті знову і знову, можуть забрати великі обсяги пам'яті. Скільки з цього справді виконається, залежить від того, як файл показано. SVG 2 очікує, що елемент `object` без пісочниці відтворює файл у динамічному інтерактивному режимі, зі скриптами, тоді як `img` і фонові зображення в CSS використовують безпечний анімований режим, без скриптів і без зовнішніх посилань. Показуйте SVG із чужих джерел лише через `img`, віддавайте завантаження з окремого домену або очищайте їх за дозвільним списком елементів і атрибутів, перш ніж зберегти. ## Що почитати далі - [Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/) — Candidate Recommendation Snapshot W3C від 6 жовтня 2026 року: статус, анотація і всі розділи. - [Coordinate Systems, Transformations and Units](https://www.w3.org/TR/SVG2/coords.html) — `viewBox`, `preserveAspectRatio` і початкова система координат. - [Paths](https://www.w3.org/TR/SVG2/paths.html) — команди контурів, абсолютні й відносні координати і що стається з даними контуру, у яких є помилка. - [Painting: Filling, Stroking and Marker Symbols](https://www.w3.org/TR/SVG2/painting.html) — `fill` і `stroke`, їхні початкові значення та значення `currentColor`. - [Conformance Criteria](https://www.w3.org/TR/SVG2/conform.html) — п'ять режимів обробки і який із них дістається кожному способу вбудовування. - [Document Structure](https://www.w3.org/TR/SVG2/struct.html) — `title` і `desc` та неявні ролі ARIA елементів SVG.