Використання
Існує кілька способів використання векторної графіки, кожен має свої плюси і мінуси.
В елементі <img>
Такий підхід нічим не відрізняється від використання растрових зображень, достатньо вказати шлях до зображення.
Створимо три елементи <img> різних розмірів і використаємо одну й ту саму
SVG-іконку. Пікселізація відсутня, навіть, якщо максимально масштабувати
веб-сторінку, тому що в елементі <img> вектор також малюється браузером
відповідно до заданих формул всередині SVG-файлу.
Як фон елемента
Векторне зображення може використовуватися як фон елемента у властивості
background-image. Можна робити будь-які маніпуляції з векторним фоном, так
само як і з растровою графікою.
Вбудований SVG
Попередні два методи підходять для статичної графіки, наприклад абстрактного фону або іконок, для яких не потрібно додавати ефект ховеру або фокусу. Але у них є один суттєвий недолік - відсутня можливість динамічно змінити колір або інші характеристики векторного зображення з CSS.
SVG-зображення можна додати повністю в HTML - це називається вбудований SVG (inline svg). Тобто відкрити SVG-файл у текстовому редакторі, скопіювати вміст і вставити його в HTML-документ. Таким чином можна звернутися до його внутрішньої структури.
У прикладі ми додаємо елементу <svg> клас .icon, встановлюємо базовий чорний
колір заливання (властивість fill), і змінюємо його при ховері на
помаранчевий.
У такого підходу є ряд суттєвих мінусів.
- Вбудований SVG-код збільшує розмір HTML-файлу.
- Неможливо повторно використовувати однакове зображення без дублювання коду.
- Підтримка і редагування вбудованого SVG - трудомісткі.
- Браузер не може кешувати вбудовані фігури, на відміну від зовнішніх SVG-файлів.
SVG-спрайт
SVG-спрайт - це сучасна техніка, яку застосовують у більшості випадків.
- Один файл для всіх SVG-іконок веб-сайту.
- Файл спрайту кешується браузером і не буде завантажений під час повторних візитів.
- Іконкам в спрайті можна змінювати колір та інші характеристики через CSS.
Створення SVG-спрайту, використовуючи сервіс icomoon.io, розглядається у відео-лекції.
SVG-документ - це просто текстовий файл, у якому, на відміну від растрової
графіки, описані фігури, які малює браузер. Всередині одного файлу можна описати
безліч різних груп фігур, використовуючи елемент <symbol>, після чого,
вказавши кожному символу унікальний id, звернутися до будь-якого з них з
HTML-документа.
<svg>
<use href="./путь-к-свг-спрайту/имя-спрайта.svg#ідентифікатор-символа"></use>
</svg>
Для використання іконки зі спрайту в HTML-документі, необхідно додати розмітку
елемента <svg> і вкладеного в нього елемента <use> з атрибутом href, в
якому вказаний шлях до іконки. Шлях задається як до звичайного файлу, але
наприкінці додається якір з ідентифікатором символу у спрайті.
Розберемо приклад. Для наочності ми вставили весь SVG-спрайт в документ (і задавши йому id, сховали), щоб заощадити вам час переходу пошуку SVG-коду (адже цікаво, як він там всередині влаштований).
Отже, всередині SVG-спрайту є набір елементів <svg> і <symbol>, що описують
повністю увесь SVG-спрайт і кожну фігуру окремо. Кожному <symbol> заданий
унікальний ідентифікатор. В HTML використовуємо атрибут href і звертаємося до
SVG-символа через хеш (#) і його ідентифікатор.
У прикладі увесь SVG-спрайт знаходиться в HTML-розмітці, тому відсутнє ім'я
SVG-файлу перед хешем. Якби SVG-спрайт лежав окремим файлом, було б звернення за
ім'ям, а потім # і id символа.