SVG-елементи

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

Елемент <svg>

<svg> - Основний контейнер для SVG-графіки. Всі інші SVG-елементи повинні бути вкладені всередині <svg>.

<svg width="400" height="300">
  <!-- Інші SVG-елементи тут -->
</svg>

Щоб побачити межі SVG-контейнера задамо йому якийсь клас і додамо обрамлення.

  outline: 2px dotted #555555;

Елемент <rect>

Елемент <rect> використовується для створення прямокутників. Він визначає прямокутник за його координатами, шириною та висотою.

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="80" fill="blue" stroke="#FF0000" stroke-width="3" rx="10" ry="20"/>
</svg>

Основні атрибути та їх значення, які можуть бути використані в елементі <rect>:

x: Горизонтальна координата верхнього лівого кута прямокутника.

y: Вертикальна координата верхнього лівого кута прямокутника.

width: Ширина прямокутника.

height: Висота прямокутника.

rx (необов'язково): Радіус заокруглення для верхніх кутів прямокутника по горизонталі.

ry (необов'язково): Радіус заокруглення для верхніх кутів прямокутника по вертикалі.

fill (необов'язково): Колір заливки прямокутника.

stroke (необов'язково): Колір обведення прямокутника.

stroke-width (необов'язково): Товщина лінії обведення.

Якщо у SVG-контейнері вказати кілька елементів, то вище буде той, яки вказаний пізніше.

Якщо необхідно не налавати жодного кольору заливці то цю вдастивість надають значення none: fill="none"

Елемент <circle>

Елемент <circle> використовується для створення кола. Він визначає коло за його центром та радіусом.

<svg width="200" height="200">
  <circle cx="200" cy="100" r="50" fill="green" stroke="red" stroke-width="2" />
</svg>

Основні атрибути та їх значення, які можна використовувати в елементі <circle>:

cx: Горизонтальна координата центру кола.

cy: Вертикальна координата центру кола.

r: Радіус кола.

fill (необов'язково): Колір заливки кола.

stroke (необов'язково): Колір обведення кола.

stroke-width (необов'язково): Товщина лінії обведення.

Елемент <ellipse>

Елемент <ellipse> використовується для створення еліпсів. Він визначає еліпс за його центром, радіусами по горизонталі та вертикалі.

<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="80" ry="40" fill="yellow" stroke="blue" stroke-width="2" />
</svg>

Основні атрибути та їх значення, які можна використовувати в елементі <ellipse>:

cx: Горизонтальна координата центру еліпса.

cy: Вертикальна координата центру еліпса.

rx: Радіус еліпса по горизонталі.

ry: Радіус еліпса по вертикалі.

fill (необов'язково): Колір заливки еліпса.

stroke (необов'язково): Колір обведення еліпса.

stroke-width (необов'язково): Товщина лінії обведення.

Елемент <line>

Елемент <line> використовується для створення ліній. Він визначає лінію за її початковими та кінцевими координатами.

<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="blue" stroke-width="2" />
</svg>

Основні атрибути та їх значення, які можна використовувати в елементі <line>:

x1: Горизонтальна координата початку лінії.

y1: Вертикальна координата початку лінії.

x2: Горизонтальна координата кінця лінії.

y2: Вертикальна координата кінця лінії.

stroke (необов'язково): Колір лінії.

stroke-width (необов'язково): Товщина лінії.

Елемент <polygon>

Елемент <polygon> використовується для створення полігонів, які можуть мати будь-яку кількість вершин. Він визначає полігон за списком його вершин.

<svg width="200" height="200">
  <polygon points="100,50 150,150 50,150" fill="orange" stroke="violet" stroke-width="3" />
</svg>

Основні атрибути та їх значення, які можна використовувати в елементі <polygon>:

points: Список координат вершин полігону. Координати вказуються через кому, наприклад, "x1,y1 x2,y2 x3,y3", де x1, y1, x2, y2 і так далі - це координати вершин полігону.

fill (необов'язково): Колір заливки полігону.

stroke (необов'язково): Колір обведення полігону.

stroke-width (необов'язково): Товщина лінії обведення.

Важливо вказати вершини полігону у правильному порядку, щоб визначити правильну форму. Якщо треба замкнути полігон, можна додати першу вершину на кінець списку, яка буде збігатися з останньою вершиною. Утім полігон - це замкнута фігура, тому остання лінія, яка замикає, додається автоматично, з'єднуючи кінець останньої лінії з початком першої лінії фігури.

Елемент <path>

Елемент <path> використовується для створення складних шляхів та форм, таких як криві Без'є та лінії. Він визначається за допомогою атрибута d, який містить команди для переміщення, ліній, кривих та інших операцій.

Елемент <path> - універсальний елемент для представлення фігур будь-якої складності. Вручну редагувати path не потрібно, векторні зображення такого типу формують в дизайнерських програмах і під час експорту заповнюють цей елемент.

Утім для охочих розібратися трохи більше у налаштуваннях елементу <path> ось деякі основні команди, які можна використовувати у атрибуті d:

M x y: Перемістити до точки (x, y).

L x y: Провести лінію до точки (x, y).

H x: Провести горизонтальну лінію до x.

V y: Провести вертикальну лінію до y.

C x1 y1, x2 y2, x y: Провести кубічну Без'є криву до (x, y) з контрольними точками (x1, y1) та (x2, y2).

S x2 y2, x y: Короткий запис кубічної кривої Без'є з однією контрольною точкою (x2, y2).

Q x1 y1, x y: Провести квадратичну криву до (x, y) з контрольною точкою (x1, y1).

T x y: Короткий запис квадратичної кривої з однією контрольною точкою (x, y).

A rx ry x-axis-rotation large-arc-flag sweep-flag x y: Провести дугу до (x, y) за допомогою еліптичної арки з радіусами rx та ry.

У елементі <path> так само використовуються атрибути:

fill (необов'язково): Колір заливки.

stroke (необов'язково): Колір обведення.

stroke-width (необов'язково): Товщина лінії обведення.

Розглянемо трохи складніший приклад застосування елементу <path>.