Как менять цвет svg в CSS

Цвет SVG-изображения можно менять с помощью CSS, используя свойство fill для закрашивания областей SVG.

Допустим, у вас есть SVG-изображение, например такое:

<svg viewBox="0 0 20 20">
  <path d="M 10 0 L 0 20 L 20 20 Z" />
</svg>

Если вы хотите изменить цвет этого SVG-изображения, то вы можете добавить CSS-правило, которое задает значение свойства fill. Например:

svg {
  fill: red; /* задает красный цвет для всех областей SVG в этом контейнере */
}

Если вы хотите задать разный цвет для разных областей SVG, то можете использовать селекторы для этих областей. Например, если у вас есть SVG-изображение, состоящее из двух треугольников, то можно задать разный цвет для каждого из них вот так:

<svg viewBox="0 0 20 20">
  <path class="triangle1" d="M 10 0 L 0 20 L 20 20 Z" />
  <path class="triangle2" d="M 10 20 L 20 0 L 0 0 Z" />
</svg>

.triangle1 {
  fill: red; /* задает красный цвет для первого треугольника */
}

.triangle2 {
  fill: blue; /* задает синий цвет для второго треугольника */
}

Свойство fill также может иметь значение none, которое указывает на то, что область SVG не должна заполняться цветом.

svg {
  fill: none; /* задает, что все области SVG не закрашиваются цветом */
}

.triangle1 {
  fill: red; /* задает красный цвет только для первого треугольника */
}

Также есть возможность изменять цвет SVG-изображения через JavaScript с помощью метода setAttribute. Например:

const svg = document.querySelector('svg');
const triangle1 = svg.querySelector('.triangle1');
triangle1.setAttribute('fill', 'red');

Этот код находит элемент svg на странице и добавляет красный цвет для первого треугольника внутри этого контейнера.