Практика: Як правильно змінити колір елемента SVG?

2 перевірених способи

SVG — це масштабована векторна графіка (англ. Scalable Vector Graphics). Розробники вебсайтів найчастіше використовують цей формат для іконок та логотипів, а також для створення інтерактивних та анімованих графічних елементів сайту. Свою популярність він здобув завдяки малому розміру файлів і можливості масштабувати зображення без втрати якості. Крім того, SVG — це текстовий формат, який індексується пошуковими системами та може допомогти із SEO-просуванням сайту.

Завдяки своїм перевагам SVG-зображення стали невіддільною частиною сучасного вебдизайну. В цьому матеріалі ми розглянемо декілька методів для зміни кольору SVG-елементів, оскільки така потреба виникає доволі часто.

Зміна кольору SVG-зображення на сайті може знадобитися з декількох причин:

1. Адаптація до дизайну сайту. Зміна кольору SVG-елементів підлаштовує їх під палітру сайту.

2. Підтримка темної/світлої теми. Параметри SVG-елементів можна легко змінювати відповідно до обраної теми на пристрої.

3. Покращення користувацького досвіду (UX). SVG-зображення може змінювати колір під час взаємодії з користувачем. Наприклад, за наведення курсора іконка змінює відтінок. Або ж колір SVG-елемента сповіщає про успіх (зелений) виконаної операції або помилку (червоний).

4. Оптимізація коду й підвищення продуктивності сайту. Можна динамічно змінювати властивості одного SVG-елемента замість дублювання графіки.

Як змінити колір SVG-елемента

1. За допомогою `fill` і `stroke`

Кожен SVG-елемент має атрибути fill і stroke. Атрибут fill визначає колір внутрішньої частини елемента, а stroke — його контуру. Змінити значення цих атрибутів можна у два способи: статично в текстовому редакторі або динамічно за допомогою CSS.

Зміна в текстовому редакторі

Оскільки SVG — це текстовий формат на основі XML, змінити його параметри можна в текстовому редакторі. Для цього:

Відкрийте SVG-файл у текстовому редакторі, наприклад, Notepad або Visual Studio Code.

1. Знайдіть потрібний код у файлі.

2. Наприклад, маємо червоне коло з чорним контуром:

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

3. Змініть значення атрибутів fill і stroke. Наприклад, зробіть коло зеленим, а колір контуру залишіть без змін:

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />

4. Збережіть файл у тому самому форматі .svg.

Задавати колір можна як його назвою (red, green, white), так і відповідним шістнадцятковим значенням. Наприклад, #FFFFFF для білого або #FF0000 для червоного. В інтернеті ви знайдете безліч таблиць з відтінками кольорів та їхніми відповідними HEX-кодами.

Цей спосіб зміни кольору доволі простий і не потребує коригування зображення в графічному редакторі. Проте таким чином ви не зможете динамічно змінювати властивості SVG-елемента. Тому пропонуємо розглянути наступний метод.

Зміна за допомогою CSS

Щоб змінити колір SVG-елемента за допомогою CSS, зображення потрібно вставляти як вбудований (inline) елемент. Тобто внести код SVG безпосередньо до HTML-документа.

Щоб отримати код SVG-зображення, відкрийте його в текстовому редакторі. Також переглянути код можна під час збереження SVG-файлу, якщо ви працюєте з Adobe Illustrator. Для цього натисніть SVG Code….

Наприклад, у нас є червоне коло, код якого потрібно додати в HTML-файл.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle  stroke="black" stroke-width="3" fill="red" />
</svg>

Для зміни кольору використайте ті самі атрибути, що й у минулому методі: fill або stroke.

circle {
  fill: green;
}

У цьому прикладі колір кола змінюється на зелений.

<style>
 circle {
   fill: green;
 }
</style>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle  stroke="black" stroke-width="3" fill="red" />
</svg>

Також можна змінювати колір контуру, його ширину та інші властивості SVG-елемента. Якщо хочете використовувати зовнішні таблиці стилів, зберігайте CSS-код окремим файлом і підставляйте його в HTML тегом link.

/*збережено як style.css*/

circle {
  fill: green;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle  stroke="black" stroke-width="3" fill="red" />
    </svg>
 </body>
</html>

2. За допомогою `filter`

Іноді виникає потреба підставити SVG-елемент як файл замість вбудованого коду. В такому разі fill або stroke не працюють. На допомогу прийде CSS-властивість filter. Вона застосовує до зображення такі графічні ефекти:

blur() — розмиття;
brightness() — зміна яскравості;
contrast() — зміна контрасту;
drop-shadow() — додавання тіні;
grayscale() — зміна зображення у відтінки сірого;
hue-rotate() — зміна загального відтінку;
invert() — інвертування кольорів;
opacity() — зміна прозорості;
saturate() — зміна насиченості кольорів;
sepia() — зміна кольорів у тон сепія.

Щоб змінити колір зображення:

1. Підставте SVG-елемент через тег <img> та задайте йому клас.

<img src="circle.svg" class="circle"/>

2. Перетворіть HEX-код бажаного кольору на CSS-фільтр. Зробити це можна тут. Зверніть увагу, що наведений приклад працює для зображень чорного кольору з прозорим фоном.

Приклад фільтра для кольору #FF0000 (червоний):

filter: invert(13%) sepia(100%) saturate(5260%) hue-rotate(1deg) brightness(97%) contrast(117%);

3. Додайте CSS-фільтр у клас.

.circle {
  filter: invert(13%) sepia(100%) saturate(5260%) hue-rotate(1deg) brightness(97%) contrast(117%);
}

Порядок написання аргументів фільтра (invert, sepia, saturate тощо) має значення. Кожен з них почергово застосовується до зображення, змінюючи його властивості. Поекспериментуйте з ними, щоб краще зрозуміти принцип роботи CSS-фільтра.

Отже, якщо вам потрібно динамічно змінювати колір SVG-зображень, додавати інтерактивні графічні елементи та розробляти сучасні вебсторінки, без CSS не обійтись. А от чи змінювати параметри через атрибути fill і stroke або ж за допомогою CSS-фільтрів, залежить винятково від ваших потреб та підходу до реалізації проєктів.

Автор: Анастасія Ластовець

Поділитися: