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

С помощью CSS можно изменять свойства элементов SVG изображений, которые были вставлены на страницу.

Например, допустим, у вас есть SVG изображение, содержащее круг:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Если вы хотите изменить цвет заполнения (fill) круга на красный с помощью CSS, то вы можете сделать это следующим образом:

circle {
  fill: red;
}

Обратите внимание, что CSS-селектор соответствует имени элемента SVG (в данном случае это circle). Для изменения других свойств, таких как цвет обводки (stroke) или ширина обводки (stroke-width), вы можете использовать соответствующие CSS свойства:

circle {
  fill: red;
  stroke: green;
  stroke-width: 2;
}

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

circle {
  fill: red;
  stroke: green;
  stroke-width: 2;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

Здесь применен фильтр drop-shadow(), который создает тень с указанными параметрами.

Использование CSS для стилизации элементов SVG/Images даёт возможность гибко управлять и изменять внешний вид SVG-графики на странице.