12. März 2023

Farbe eines SVGs mit CSS anpassen

Für Logos auf Websites sind SVGs die beste Wahl. Ein SVG ist eine Vektorgrafik, daher wird das Logo auf der Website in jeder Größe gestochen scharf angezeigt. Bei einfarbigen Logos bietet SVG einen weiteren Vorteil: Die Farbe des SVGs kann mithilfe von CSS angepasst werden. Dies ist besonders nützlich, wenn das Logo auf verschiedenen Hintergründen dargestellt werden soll, zum Beispiel auf der Startseite mit dunklem Hintergrund und auf den Unterseiten mit hellem Hintergrund.

Vorraussetzung hierfür ist, das du das SVG nicht als Datei sondern als Code in die Seite einbaust. Der SVG-Code kann einfach eingesehen werdem, indem du das SVG in einem Text-Editor öffnest.

Die Farbe eines SVGs kann dann ganz einfach mit folgendem CSS angepasst werden.

.logo_white path{ fill:#fff !important; }Code-Sprache: CSS (css)