Використання векторної графіки
SVG у веброзробці можна застосовувати по різному. Основні описано далі.
В елементі <img>
SVG можна використовувати в елементі <img> так само, як і будь-який інший формат зображення, наприклад, JPEG або PNG. Для цього потрібно вказати шлях до SVG-файлу в атрибуті src елемента <img>.
<img src="example.svg" alt="SVG image">При такому використанні навіть при збільшенні масштабу не зʼявляється пікселізація зображення і воно лишається якісним.
Як фон елемента
Щоб використовувати SVG як фонове зображення на веб-сайті, треба використовувати CSS властивість background-image. Синтаксис такий само як і при роботі з растровою графікою.
Вбудований SVG
Попередніми двома методами можна верстати SVG-файли, утім за такого застосування не можна додавати динамічні ефекти (наприклад при :hover чи :focus). Головно це ефекти зміни заливки чи обведення.
Є спосіб як це реалізувати. Потрібно повністю SVG описати у HTML-верстці. Це називають вбудованим SVG (inline svg).
Для цього потрібно створити елемент <svg> і описати всередині форми векторного зображення. Для прикладу заливку контурів зробимо чорним кольором, а при ховері пропишемо зміну кольору на інший колір.
Недоліки вбудованого SVG-коду:
Збільшення коду HTML-файлу.
Неможливість повторного використання того самого коду
Складності редагування вбудованого SVG.
Браузер не кешує вбудовані SVG.
SVG-спрайт
Це сучасна технологія, якою користуються у більшості випадків.
SVG-спрайт - це один файл SVG, який містить кілька інших SVG-зображень (іконок чи графіки) у вигляді символів, які можна використовувати в веб-сайтах. Використання SVG-спрайтів дозволяє зменшити кількість HTTP-запитів, що зменшує час завантаження сторінки та покращує продуктивність веб-сайту.
Переваги SVG-спрайту:
Зменшення кількості HTTP-запитів
Швидше завантаження сторінки
Один файл для всіх SVG-іконок веб-сайту
Кешування спрайту браузером
Легке редагування іконок в спрайті
Можливість повторного використання
Не засмічення HTML-коду
Можливість динамічно керувати заливкою і обводкою за допомогою властивостей в CSS
SVG-спрайт швидко створюють за допомогою сервісу icomoon.io. Утім розглянемо як створюється спрайт вручну. Тобто розглянемо структуру SVG-спрайту.
Створення файлу SVG-спрайта
Створіть новий файл SVG (наприклад, icons.svg) та додайте усі ваші SVG-зображення як <symbol> елементи. Кожен <symbol> повинен мати унікальний id, який ідентифікує символ, ну і viewBox, який визначає поля огляду іконки.
Розглянемо приклад спрайту із двох іконок, створеного за допомогою сервісу icomoon.io.
Використання символів в HTML
Для використання символів SVG-спрайта у веб-сайті, потрібно створити елемент <svg>, а всередині використовувати елемент <use> та посилання на id символу. (Замість xlink:href можна просто використовувати атрибут href)
Стилізація (зокрема висота і ширина іконки, а також ефекти при наведенні) описуються у файлі стилів CSS.
Для наочності весь SVG-спрайт вставлено в документ де задано id, але в цілому як зазначено вище вказується абсолютний або відносний шлях до спрайту і після хештегу id нашої іконки.
Отже, всередині SVG-спрайту є елемент <svg> і набір елементів <symbol>, що описують повністю увесь SVG-спрайт і кожну фігуру окремо. У кожного <symbol> є унікальний ідентифікатор. В HTML використовується атрибут href і звернення до SVG-символа відбувається через хеш (#) і його ідентифікатор.
Використання сервісу icomoon.io
icomoon.io - це онлайн сервіс, який дозволяє легко створювати SVG-спрайти. У ньому є безплатні й платні бібліотеки готових іконок. Також можна завантажити свої кастомні іконки у форматі SVG (кнопка Import Icons).
Щоб згенерувати й завантажити архів з SVG-спрайтом із обраних іконок потрібно натиснути кнопку Generate SVG & More і потім обрати іконки і натиснути кнопку Download.
Після розпакування архіву всередині буде міститися SVG-спрайт, який можна переносити у свій проєкт та перейменовувати його.
Припустімо, що нам потрібно у вже існуючий SVG-спрайт додати ще одну іконку. Для цього немає потреби наново генерувати новий SVG-спрайт. Для цього потрібно просто додати його <symbol>. Якщо на сервісі icomoon.io навести курсор на іконку, то зʼявиться кнопка <> Get Code. Натиснувши на цю кнопку ми отримаємо код іконки, який можемо скопіювати і вставити куди захочемо.
Оптимізація SVG-файлів і SVG-спрайтів
Якщо SVG-спрайт дуже великий і має багато іконок, то він напевне має надлишкову інформацію (зокрема пробіли та абзаци тощо). Скоротивши надлишкову інформацію ми зменшуємо розмір SVG-спрайту або векторного зображення і таким чином пришвидшуємо завантаження застосунку.
Для оптимізації векторних зображень використовують онлайн-сервіс: https://jakearchibald.github.io/svgomg/
Потрібно спрайт чи векторне зображення перетягнути у поле застосунку.
Тепер ми можемо побачити на скільки оптимізовано SVG-спрайт чи векторне зображення і завантажити оптимізований файл.
Покликання:
icomoon.io - сервіс для створення SVG-спрайтів
https://jakearchibald.github.io/svgomg/ - оптимізація векторних зображень
Last updated