Використання векторної графіки

PreviousSVG-документ NextЗміна властивостей в SVG

Last updated 1 year ago

Використання векторної графіки

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-спрайта

Створіть новий файл 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>

Інколи всі <symbol> також огортають в елемент <defs>. Використовується він для визначення визначених користувачем елементів, які можна використовувати в різних частинах SVG-зображення або в інших елементах <defs>.

Розглянемо приклад спрайту із двох іконок, створеного за допомогою сервісу 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-спрайт розміщений в HTML-розмітці, тому і відсутнє ім'я SVG-файлу перед хешем. Якби SVG-спрайт лежав окремим файлом, було б звернення за ім'ям, а потім # і 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-спрайту або векторного зображення і таким чином пришвидшуємо завантаження застосунку.

Потрібно спрайт чи векторне зображення перетягнути у поле застосунку.

Тепер ми можемо побачити на скільки оптимізовано SVG-спрайт чи векторне зображення і завантажити оптимізований файл.

Покликання:

PreviousSVG-документ NextЗміна властивостей в SVG

Last updated 1 year ago