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

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

Є безліч варіантів використання SVG. Від того, як ви використовуєте 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;
}

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

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.

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