CSS как покрасить svg

Для покраски SVG существует несколько способов:

1. Использование атрибута fill внутри SVG-элемента:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

2. Использование CSS-свойства fill для SVG-элемента:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" style="fill: red;" />
</svg>

3. Использование CSS-селектора для SVG-элемента:

svg rect {
  fill: red;
}

4. Использование внешнего файла CSS:

<svg width="100" height="100">
 rect x="10" y="10" width="80" height="80" class="red" />
</svg>

<style>
  .red {
    fill: red;
  }
</style>

Важно учитывать, что для покраски SVG-элементов необходимо использовать свойство fill, а не background-color.