Пошук уроків, статей та іншого контенту
Створите просту векторну графіку через SVG, використовуючи фігури, атрибути розмірів і вбудовування в HTML.
SVG (Scalable Vector Graphics) — формат векторної графіки, який описує зображення за допомогою XML-елементів. SVG можна безпосередньо вставити в HTML і стилізувати через CSS.
На відміну від растрових зображень, SVG складається з геометричних фігур. Тому його можна масштабувати без втрати якості.
SVG зручно використовувати для:
іконок;
логотипів;
простих ілюстрацій;
графіків;
схем і діаграм;
декоративних елементів інтерфейсу.
SVG можна записати безпосередньо всередині HTML-документа:
<svg width="200" height="120" aria-label="Проста ілюстрація">
<rect width="200" height="120" fill="#dbeafe"></rect>
<circle cx="100" cy="60" r="40" fill="#2563eb"></circle>
</svg>Елемент <svg> є контейнером для векторної графіки.
Основні атрибути контейнера:
width — ширина SVG;
height — висота SVG;
viewBox — внутрішня система координат;
aria-label — текстовий опис для допоміжних технологій.
У прикладі:
область SVG має розмір 200 × 120;
прямокутник займає всю область;
коло розташоване в центрі.
У SVG початок координат розташований у верхньому лівому куті:
координата x збільшується праворуч;
координата y збільшується вниз.
Наприклад, точка з координатами x="30" y="20" розташована на 30 одиниць праворуч і на 20 одиниць нижче від верхнього лівого кута.
<svg width="300" height="150" aria-label="Точки в системі координат">
<circle cx="30" cy="20" r="8" fill="crimson"></circle>
<circle cx="270" cy="130" r="8" fill="seagreen"></circle>
</svg>Для створення прямокутника використовується елемент <rect>.
<svg width="300" height="160" aria-label="Прямокутник">
<rect
x="40"
y="30"
width="220"
height="100"
fill="#bfdbfe"
stroke="#1d4ed8"
stroke-width="4"
></rect>
</svg>Основні атрибути:
x — горизонтальна координата лівого краю;
y — вертикальна координата верхнього краю;
width — ширина;
height — висота;
fill — колір заливки;
stroke — колір контуру;
stroke-width — товщина контуру.
За допомогою rx і ry можна заокруглити кути:
<svg width="300" height="140" aria-label="Прямокутник із заокругленими кутами">
<rect
x="40"
y="30"
width="220"
height="80"
rx="16"
fill="#fef3c7"
stroke="#d97706"
stroke-width="4"
></rect>
</svg>Для створення кола використовується елемент <circle>.
<svg width="240" height="180" aria-label="Коло">
<circle
cx="120"
cy="90"
r="60"
fill="#bbf7d0"
stroke="#15803d"
stroke-width="5"
></circle>
</svg>Атрибути кола:
cx — координата центра по горизонталі;
cy — координата центра по вертикалі;
r — радіус;
fill — заливка;
stroke — контур;
stroke-width — товщина контуру.
Елемент <ellipse> створює еліпс.
<svg width="300" height="160" aria-label="Еліпс">
<ellipse
cx="150"
cy="80"
rx="110"
ry="50"
fill="#ddd6fe"
stroke="#7c3aed"
stroke-width="4"
></ellipse>
</svg>Атрибути:
cx і cy — координати центра;
rx — горизонтальний радіус;
ry — вертикальний радіус.
Якщо rx і ry однакові, еліпс буде колом.
Для створення відрізка використовується <line>.
<svg width="300" height="140" aria-label="Лінія">
<line
x1="30"
y1="110"
x2="270"
y2="30"
stroke="#dc2626"
stroke-width="6"
></line>
</svg>Атрибути:
x1, y1 — координати початку;
x2, y2 — координати кінця;
stroke — колір лінії;
stroke-width — товщина лінії.
У лінії немає внутрішньої області, тому fill для неї не використовується.
Елемент <polyline> створює незамкнену ламану лінію.
<svg width="320" height="180" aria-label="Ламана лінія">
<polyline
points="20,140 90,60 160,110 230,30 300,90"
fill="none"
stroke="#2563eb"
stroke-width="5"
></polyline>
</svg>Атрибут points містить послідовність координат:
x1,y1 x2,y2 x3,y3Елемент <polygon> створює замкнений багатокутник.
<svg width="240" height="200" aria-label="Трикутник">
<polygon
points="120,20 220,170 20,170"
fill="#fecaca"
stroke="#b91c1c"
stroke-width="5"
></polygon>
</svg>На відміну від <polyline>, <polygon> автоматично з'єднує останню точку з першою.
Для оформлення фігур найчастіше використовують:
fill — колір внутрішньої області;
stroke — колір контуру;
stroke-width — товщина контуру;
fill-opacity — прозорість заливки;
stroke-opacity — прозорість контуру;
opacity — прозорість усієї фігури.
Значення кольорів можна задавати різними способами:
<svg width="360" height="150" aria-label="Різні способи задання кольорів">
<circle cx="60" cy="75" r="35" fill="tomato"></circle>
<circle cx="180" cy="75" r="35" fill="#22c55e"></circle>
<circle cx="300" cy="75" r="35" fill="rgb(59, 130, 246)"></circle>
</svg>Щоб прибрати заливку, використовуйте fill="none":
<svg width="300" height="140" aria-label="Фігура без заливки">
<rect
x="40"
y="30"
width="220"
height="80"
fill="none"
stroke="#111827"
stroke-width="5"
></rect>
</svg>viewBoxviewBox визначає внутрішню систему координат SVG у форматі:
viewBox="x y width height"Найчастіше початкові координати дорівнюють нулю:
<svg
width="400"
height="200"
viewBox="0 0 200 100"
aria-label="Масштабована ілюстрація"
>
<rect width="200" height="100" fill="#e0f2fe"></rect>
<circle cx="100" cy="50" r="35" fill="#0284c7"></circle>
</svg>Тут:
width="400" і height="200" задають фактичний розмір SVG на сторінці;
viewBox="0 0 200 100" задає внутрішню область координат;
браузер масштабує вміст із системи 200 × 100 до розміру 400 × 200.
Використання viewBox робить SVG гнучкішим. Якщо задати тільки width і height, зміна розміру може бути менш зручною.
Розмір SVG також можна контролювати CSS:
<style>
.illustration {
width: 100%;
max-width: 400px;
height: auto;
display: block;
}
</style>
<svg
class="illustration"
viewBox="0 0 300 160"
role="img"
aria-label="Будинок"
>
<rect width="300" height="160" fill="#e0f2fe"></rect>
<polygon points="150,20 270,90 30,90" fill="#ef4444"></polygon>
<rect x="70" y="90" width="160" height="50" fill="#f8fafc"></rect>
<rect x="130" y="105" width="40" height="35" fill="#64748b"></rect>
</svg>У цьому прикладі SVG адаптується до ширини батьківського контейнера, але не стає ширшим за 400px.
Фігури SVG відображаються в тому порядку, у якому записані в HTML. Фігура, записана пізніше, буде розташована поверх попередньої.
<svg width="300" height="180" aria-label="Фігури одна поверх іншої">
<rect width="300" height="180" fill="#f1f5f9"></rect>
<circle cx="120" cy="90" r="70" fill="#f97316"></circle>
<circle cx="180" cy="90" r="70" fill="#3b82f6" fill-opacity="0.75"></circle>
</svg>У цьому прикладі синє коло намальоване після помаранчевого, тому воно розташоване поверх нього.
Створимо просту SVG-ілюстрацію пейзажу. Вона міститиме небо, сонце, гори, землю та будинок.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG-пейзаж</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #e2e8f0;
font-family: sans-serif;
}
.landscape {
width: min(90vw, 600px);
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 12px 30px rgb(15 23 42 / 20%);
}
</style>
</head>
<body>
<svg
class="landscape"
viewBox="0 0 600 360"
role="img"
aria-label="Пейзаж із сонцем, горами та будинком"
>
<!-- Небо -->
<rect width="600" height="360" fill="#bae6fd"></rect>
<!-- Сонце -->
<circle cx="480" cy="80" r="45" fill="#facc15"></circle>
<!-- Далекі гори -->
<polygon
points="0,250 130,110 250,250"
fill="#94a3b8"
></polygon>
<polygon
points="170,250 340,80 520,250"
fill="#64748b"
></polygon>
<!-- Снігова вершина -->
<polygon
points="340,80 295,145 340,125 375,145"
fill="#f8fafc"
></polygon>
<!-- Земля -->
<rect y="250" width="600" height="110" fill="#4d7c0f"></rect>
<!-- Будинок -->
<rect x="85" y="205" width="150" height="105" fill="#fef3c7"></rect>
<polygon points="65,210 160,135 255,210" fill="#b91c1c"></polygon>
<!-- Двері та вікно -->
<rect x="140" y="250" width="40" height="60" fill="#78350f"></rect>
<rect x="100" y="230" width="35" height="35" fill="#38bdf8"></rect>
<line x1="117.5" y1="230" x2="117.5" y2="265" stroke="#075985" stroke-width="3"></line>
<line x1="100" y1="247.5" x2="135" y2="247.5" stroke="#075985" stroke-width="3"></line>
</svg>
</body>
</html>Під час створення ілюстрації важливо враховувати:
Спочатку розміщуйте фонові елементи.
Потім додавайте об'єкти, які мають бути поверх фону.
Використовуйте однакову систему координат, визначену в viewBox.
Додавайте aria-label або інший доступний опис, якщо SVG передає зміст, а не є лише декоративним елементом.
Атрибути SVG можна задавати безпосередньо в розмітці або через CSS.
<style>
.card {
fill: #ffffff;
stroke: #334155;
stroke-width: 4;
}
.card:hover {
fill: #dbeafe;
stroke: #2563eb;
}
</style>
<svg width="240" height="140" viewBox="0 0 240 140" aria-label="Картка">
<rect class="card" x="20" y="20" width="200" height="100" rx="12"></rect>
</svg>CSS-клас можна призначати окремим фігурам, як і звичайним HTML-елементам. Псевдоклас :hover дає змогу змінювати вигляд SVG під час наведення курсора.
Якщо фігура не відображається, перевірте, чи потрапляють її координати в область viewBox.
<svg width="200" height="100" viewBox="0 0 200 100">
<circle cx="300" cy="50" r="20" fill="red"></circle>
</svg>Коло має центр у точці x="300", але ширина viewBox дорівнює лише 200, тому коло опинилося за межами видимої області.
width і viewBoxwidth і height задають розмір SVG на сторінці, а viewBox — його внутрішню систему координат. Це різні поняття.
fill="none" для контурних фігурЯкщо потрібен лише контур, явно задайте:
fill="none"Інакше фігура може мати стандартну або успадковану заливку.
Якщо один об'єкт повинен бути позаду іншого, його потрібно записати раніше в SVG.
Для змістовної ілюстрації використовуйте:
<svg role="img" aria-label="Опис зображення">Декоративний SVG, який не передає важливої інформації, можна приховати від допоміжних технологій:
<svg aria-hidden="true">
<!-- Декоративні фігури -->
</svg>SVG — це векторна графіка, яку можна вбудовувати безпосередньо в HTML.
Основні фігури SVG: <rect>, <circle>, <ellipse>, <line>, <polyline> і <polygon>.
Атрибути fill, stroke і stroke-width керують зовнішнім виглядом фігур.
Атрибути x, y, cx, cy, width, height, r, rx і ry визначають розташування та розміри.
viewBox задає внутрішню систему координат і допомагає масштабувати SVG.
Фігури відображаються в порядку їх запису: пізніші елементи знаходяться поверх ранніх.
SVG можна стилізувати через CSS і зробити адаптивним за допомогою width, height та viewBox.