Як змінити колір SVG у CSS

🗓️ Оновлено: 09.08.2022
💬Коментарів: 0
👁️Переглядів: 4717

У цій статті розглянемо кілька прикладів, як задати колір будь-якому зображенню у форматі svg за допомогою css-стилів.

Є безліч варіантів використання SVG. Від того, як ви використовуєте SVG і залежатиме методи редагування.

Почнемо з бази.

Основи

Що таке SVG?

SVG (Scalable Vector Graphic) – масштабована векторна графіка. Це унікальний формат зображення. На відміну від звичних нам форматів, svg не використовуються пікселі. Тут малюнок будується на векторах. Це означає, що ви можете, наприклад, масштабувати зображення до будь-яких значень і при цьому не втрачати якість.

Зображення svg можна вставити кодом прямо у файл html – це буде інлайновий варіант:

<div class="svg-inline">
  <svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m12 24c6.629 0 12-5.371 12-12s-5.371-12-12-12-12 5.371-12 12 5.371 12 12 12zm-6.509-12.26 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z"/></svg>
</div>

А можна вставити через тег img:

<div class="svg-inline">
  <img src="img/icon.svg" alt="Svg" width="24">
</div>

Якщо заглянути під капот і вивчити код, який відповідає за малювання SVG, то можна виділити дві властивості, які відповідають за колір – fill (заливка) і stroke (обведення). Їх можна редагувати і цим змінювати колір іконки.

Давайте виділимо кілька методів, які дозволяють змінювати колір SVG.

1. Змінюємо колір за допомогою властивості fill

Дивіться, у нас два квадрати – вони ідентичні, за винятком властивості fill. В одному випадку ми залили квадрат червоним кольором, в іншому взагалі не прописали цю властивість.

Властивість fill можна застосовувати до окремого вектора у зображенні.

2. Змінюємо колір у файлі style.css

Або в будь-якому іншому файлі CSS, який підключений до html.

Рекомендуємо прочитати

Все легко та зрозуміло. Ми звертаємось до тега svg і за допомогою властивості fill змінюємо колір на той, який нам потрібний.

svg {
  fill: #5046e5;
}

Можете задати svg потрібний клас і потім в css звернутися до елемента цього класу:

<svg class="arrow-svg" width="24" height="24" viewBox="0 0 24 24">...
.arrow-svg {
  fill: #5046e5;
}

Це теж працюватиме.

ВАЖЛИВО!

Такий метод буде працювати, якщо ви вставите код svg у файл html.
Якщо вставити svg, як картинку в тег img, змінити колір не вийде. У такому випадку підійде варіант №1, який був описаний вище.

3. Змінюємо колір за допомогою інлайнових стилів

Ми можемо прямо у файлі svg прописати стилі за допомогою <style></style>:

<svg 
  width="120" 
  height="120"
  viewBox="0 0 120 120" 
  xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: red;
    }
  </style>
  <rect x="10" y="10" width="100" height="100"/>
</svg>

Всередині тега svg ми вставили звичайні стилі інлайну. Зверніть увагу, тут ми звертаємося до тега rect, але ми легко можемо додати клас до нашого квадрата і звертатися до нього через клас:

<rect x="10" y="10" width="100" height="100" class="someclass" />

Також за допомогою інлайнових стилів можемо змінювати колір svg при наведенні. Це має бути вам знайоме.

<style>
  rect:hover {
    fill: red;
  }
</style>

Це актуально й у методу №2.

Короткий висновок

Якщо ви використовуєте інлайновий варіант вставки SVG у ваш код, ви зможете за допомогою CSS редагувати колір зображення. Але якщо ви вставляєте svg, як файл через img або background-url, то дістатися до властивостей SVG за допомогою CSS у вас не вийде.

На цьому все, якщо залишилися питання, ставте в коментарях. Ми відповідаємо на всі ваші запитання.

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Стаття була корисною?
👍
Так - 11
👎
Ні - 10
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18274
Поява елементів при скролі
Переглядів: 16835
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6944
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6785
Як зробити ефект натискання кнопки на CSS
Переглядів: 6206
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab