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 (необов'язково): Товщина лінії обведення.
Елемент <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>.
Last updated