Використання векторної графіки
SVG у веброзробці можна застосовувати по різному. Основні описано далі.
В елементі <img>
SVG можна використовувати в елементі <img> так само, як і будь-який інший формат зображення, наприклад, JPEG або PNG. Для цього потрібно вказати шлях до SVG-файлу в атрибуті src елемента <img>.
<img src="example.svg" alt="SVG image">При такому використанні навіть при збільшенні масштабу не зʼявляється пікселізація зображення і воно лишається якісним.
Як фон елемента
Щоб використовувати SVG як фонове зображення на веб-сайті, треба використовувати CSS властивість background-image. Синтаксис такий само як і при роботі з растровою графікою.
.background-svg {
background-image: url('example.svg');
width: 100px; /* задайте ширину, якщо потрібно */
height: 100px; /* задайте висоту, якщо потрібно */
}Вбудований 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, який визначає поля огляду іконки.
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon1" viewBox="0 0 24 24">
<!-- Ваш SVG-код для першого символу -->
</symbol>
<symbol id="icon2" viewBox="0 0 24 24">
<!-- Ваш SVG-код для другого символу -->
</symbol>
<!-- Додайте інші символи, які потрібно включити у спрайт -->
</svg>Розглянемо приклад спрайту із двох іконок, створеного за допомогою сервісу icomoon.io.
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home3" viewBox="0 0 32 32">
<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path>
</symbol>
<symbol id="icon-music" viewBox="0 0 32 32">
<path d="M30 0h2v23c0 2.761-3.134 5-7 5s-7-2.239-7-5c0-2.761 3.134-5 7-5 1.959 0 3.729 0.575 5 1.501v-11.501l-16 3.556v15.444c0 2.761-3.134 5-7 5s-7-2.239-7-5c0-2.761 3.134-5 7-5 1.959 0 3.729 0.575 5 1.501v-19.501l18-4z"></path>
</symbol>
</defs>
</svg> Використання символів в HTML
Для використання символів SVG-спрайта у веб-сайті, потрібно створити елемент <svg>, а всередині використовувати елемент <use> та посилання на id символу. (Замість xlink:href можна просто використовувати атрибут href)
<svg class="icon">
<use xlink:href="icons.svg#icon1"></use>
</svg>Стилізація (зокрема висота і ширина іконки, а також ефекти при наведенні) описуються у файлі стилів CSS.
<svg class="icon">
<use href="icons.svg#icon-home3"></use>
</svg>.icon {
width: 24px;
height: 24px;
fill: #007bff; /* колір символу */
}
.icon:hover {
fill: red; /* колір символу при hover */
}Для наочності весь 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