Як змінити колір у файлі svg?

У SVG колір задається через спеціальні атрибути:

Зміна кольору в самому SVG файлі

Колір можна вказати безпосередньо всередині SVG:

html

<svg>
  <circle fill="red" stroke="blue" />
</svg>

Якщо SVG є вбудованим (всередині HTML), ви можете стилізувати його за допомогою CSS:

css

svg circle {
  fill: green;
  stroke: black;
}

currentColor успадковує колір тексту від батьківського елемента:

html

<div style="color: blue;">
  <svg>
    <path fill="currentColor" />
  </svg>
</div>

Якщо SVG завантажується через <img>, колір не може бути змінений за допомогою CSS.

Рішення:

Порада:

Використовуйте currentColor для систем іконок — іконки автоматично успадковуватимуть колір тексту.

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?