Как изменить цвет в SVG-файле?

В SVG цвет задаётся через специальные атрибуты:

• fill — цвет заливки
• stroke — цвет обводки

Изменение цвета в самом SVG-файле

Прямо внутри SVG можно указать цвет:

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

• fill="red" — закрасит круг в красный
• stroke="black" — обведёт фигуру черным

Управление цветом через CSS (если SVG встроен в HTML)

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

<style>
  .icon circle {
    fill: blue;
    stroke: black;
    stroke-width: 3;
  }
</style>

• Работает только если SVG inline (встроен в HTML), а не загружается как внешняя картинка.

Использование currentColor

<svg class="icon" viewBox="0 0 24 24">
  <path fill="currentColor" d="..." />
</svg>

<style>
  .icon {
    color: green;
  }
</style>

Если SVG — внешний файл (например, в <img src="icon.svg">)

Изменить цвет через CSS нельзя Нужно:

• либо встроить SVG inline в HTML
• либо использовать mask-image или filter, но это сложнее и ограниченно

Лучше всего использовать SVG как React компонент или через inline-loader в сборщиках (webpack, Vite).

В React (если SVG как компонент)

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return <Logo style={{ fill: 'blue' }} />;
}

Или используйте fill="currentColor" в SVG и управляйте цветом через color у обертки.