Практика: Як правильно змінити колір елемента 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-фільтрів, залежить винятково від ваших потреб та підходу до реалізації проєктів.
