SVG-документ
Векторна графіка зберігається у файлах з розширенням .svg. Це текстові файли в яких за допомогою XML-синтаксису описується зображення. На верхньому рівні цього файлу іде тег <svg> зі своїми атрибутами. Обовʼязково присутній атрибут xmlns, а решти може і не бути.
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M5 12H19"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>Цей код можна зберегти, наприклад як окремий файл plus-ico.svg. і заверстати на сторінці за допомогою тегу <img>.
<img src="./plus-ico.svg" alt="plus-ico" />Якщо явно не вказати розмір для такого елемента, то браузер за замовчуванням встановить його 300x150 пікселів. Контент, який вийде за межі цього контейнера буде обрізаний.
SVG-viewport
Видима область (viewport) визначає область екрану, на якій відображається зображення SVG.
Видиму область налаштовують використовуючи атрибути width та height у елементі <svg>. Розміри видимої області вказують у пікселях. Верхній лівий кут видимої області - це початок координат, де x = 0 і y = 0. Якщо розміри видимої області менше за розміри всього зображення, то SVG буде масштабувати зображення таким чином, щоб воно вмістилося в видиму область.
Ось приклад використання атрибутів width та height для встановлення розмірів видимої області:
SVG-viewBox
Атрибут viewBox визначає координати та розміри внутрішньої координатної системи, яку користувач бачить у видимій області (viewport).
viewBox складається з чотирьох значень: min-x min-y width height.
Розгляньмо кожен параметр окремо:
min-x: Мінімальна горизонтальна координата у внутрішній системі координат.
min-y: Мінімальна вертикальна координата у внутрішній системі координат.
width: Ширина внутрішньої системи координат.
height: Висота внутрішньої системи координат.
Атрибут viewBox дозволяє масштабувати та переміщати зображення всередині видимої області (viewport) без зміни самого зображення.
Створимо <svg> з viewport 400х300 і по центру розмістимо коло радіусом 150.
Тобто значення min-x та min-y - це зміщення нашого векторного зображення по осі x та y. А значення width і height управляють масштабуванням.
Приклади масштабування
Для прикладу створимо SVG розміром 200х100. (Дуже скромно нехай це буде моє прізвище описане у векторі)
Якщо співвідношення значень атрибутів width і height збігаються з їх аналогами у viewBox, то виходить масштаб дорівнює 1:1. Зображення буде мати оригінальний розмір.
Якщо значення у viewBox будуть вдвічі менші значень у width і height, то це співвідношення 2:1. Тобто розмір елемента залишається як є (в цьому випадку 200х100). Але оригінальне зображення буде збільшене рівно у два рази. Частина зображення, яка вийде за межі розмірів width і height не буде відображатися. Який саме шматок ми захочемо показати - керуємо першими двома параметрами зміщення по горизонталі та вертикалі у viewBox.
Якщо значення у viewBox будуть вдвічі більші значень у width і height, то це співвідношення 1:2. Тобто розмір елемента залишається як є (в цьому випадку 200х100). Але оригінальне зображення буде зменшено рівно у два рази. Розташування так само можемо змінювати за допомогою зміщень у viewBox.
Масштабування на практиці
Покликання:
Last updated