Wie kann man die Farbe einer SVG-Grafik in CSS ändern?

Um die Farbe einer SVG-Grafik in CSS zu ändern, gibt es mehrere Methoden, abhängig davon, wie die SVG eingebunden ist. Hier sind die gängigsten Ansätze:

1. **Inline-SVG**: Wenn die SVG direkt im HTML-Dokument eingebettet ist, kannst du die Farbe mit CSS anpassen, indem du die `fill`-Eigenschaft verwendest.

```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="my-circle" />
</svg>

<style>
.my-circle {
fill: red; /* Ändert die Farbe des Kreises auf rot */
}
</style>
```

2. **SVG als Hintergrundbild**: Wenn die SVG als Hintergrundbild verwendet wird, kannst du die Farbe nicht direkt mit CSS ändern. Du müsstest die SVG-Datei selbst bearbeiten oder eine Filtertechnik verwenden.

```css
.my-element {
background-image: url('image.svg');
filter: hue-rotate(90deg); /* Ändert die Farbe durch einen Filter */
}
```

3. **Externe SVG-Datei**: Wenn die SVG-Datei extern eingebunden ist (z.B. mit `<img>` oder als CSS-Hintergrund), kannst du die Farbe nicht direkt mit CSS ändern. In diesem Fall müsstest du die SVG-Datei selbst bearbeiten oder sie als Inline-SVG einfügen.

4. **CSS-Variablen**: Wenn die SVG-Datei CSS-Variablen verwendet, kannst du diese Variablen in deinem CSS anpassen.

```css
:root {
--main-color: blue;
}

.my-svg {
fill: var(--main-color);
}
```

Diese Methoden ermöglichen es dir, die Farbe von SVG-Grafiken in deinen Webprojekten anzupassen.