Wie ihr das volle Potential von Inline-SVG-Bildern entfaltet
SVG-Bilder sind ein integraler Bestandteil des modernen Webdesigns. SVG, kurz für Scalable Vector Graphics, sind hoch skalierbar und haben eine geringe Dateigröße. Ihr könnt sie sogar mit CSS stylen, wie ich euch zeigen werde.
Ein SVG-Bild kann mit dem <img>-Tag oder der CSS-Eigenschaft background-image in eine Website eingebettet werden. In diesem Fall könnt ihr aber das Styling des Bildes nicht ändern. Ich verwende lieber Inline-SVG-Bilder. Diese können mit CSS angepasst und sogar animiert werden.
Foto: © Andrea Piacquadio / pexels.com
Wie kann man Inline-SVG-Bilder einbetten? Was sind die besten Methoden, um sie mit CSS-Eigenschaften und Variablen anzupassen? Lest weiter, um die Antworten darauf zu erfahren.
Wie ihr ein Inline-SVG einbettet
SVG-Bilder können mit dem <svg>-Tag direkt in ein HTML-Dokument eingebettet werden. Öffnet einfach die Bilddatei in einem Code-Editor, kopiert den Code und fügt ihn in euer HTML-Template ein. Hier ist ein Beispiel:
<svg height="48" width="48" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
<path d="m393-165 279-335H492l36-286-253 366h154l-36 255Zm-73 85 40-280H160l360-520h80l-40 320h240L400-80h-80Zm153-395Z"></path>
</svg>
Websites werden oft mithilfe komponentenbasierter JavaScript-Frameworks wie Angular oder React erstellt. Damit könnt ihr ein Inline-SVG in einer eigenen Komponente verpacken, die ihr dann an verschiedenen Stellen eurer Website wiederverwenden könnt. Ein Beispiel dafür ist die Material UI Icon-Bibliothek.
Die UI-Bibliothek Angular Material geht sogar noch einen Schritt weiter: Damit könnt ihr SVG-Dateien als Assets der Website hinzufügen. Die Anwendung lädt die Bilder später vom Server, sodass der SVG-Code über die <mat-icon>-Komponente in das HTML-Dokument eingebettet werden kann.
Demo: Flexibles Styling von SVG-Icon-Buttons
Ich habe eine Demo mit Anwendungsfällen für Inline-SVGs erstellt. Ihr könnt die Farbe der Icons über ein Farbwahlelement anpassen:
Wie das funktioniert? Indem ihr den fill des SVG-Bildes mit der CSS-Eigenschaft color verknüpft.
SVG-Bilder mit CSS stylen
Als erstes setzt ihr die Eigenschaft fill des SVG-Bildes auf den Wert currentColor. Dieses spezielle Schlüsselwort steht für den Wert der color CSS-Eigenschaft eines Elements. Auf diese Weise werden die Vektoren des SVG-Bildes mit der Schriftfarbe des Elements gefüllt. Ihr könnt die Eigenschaft im SVG-Code setzen:
<svg fill="currentColor" height="48" width="48" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
<path d="..."></path>
</svg>
Oder ihr definiert die Eigenschaft im CSS-Code:
.icon svg {
fill: currentColor;
}
Jetzt könnt ihr das Aussehen des SVG-Bildes über die CSS-Eigenschaft color steuern. Das erleichtert die Verwaltung von Farbthemen und verschiedenen Zuständen von Steuerelementen.
Sagen wir, ihr verwendet eine Schaltfläche mit Icon und Text, wie in meiner Demo oben: Ihr könnt alle Elemente innerhalb der Schaltfläche mit einer einzigen CSS-Regel einfärben. Verschiedene Zustände wie :hover, :focus oder :disabled sind einfach zu gestalten. Ihr könnt sogar den Farbwechsel animieren:
.primary-btn {
color: #f118a6;
transition: color 0.5s ease;
}
.primary-btn:hover, .primary-btn:focus {
color: #920c64;
outline: 2px solid currentColor;
}
CSS-Variablen für mehrfarbige Bilder verwenden
Ihr könnt sogar CSS-Variablen innerhalb von SVG-Code verwenden. Das kann nützlich sein, wenn euer SVG-Bild mehrere Farben enthält. In diesem Fall könnt ihr die Hauptfarbe weiterhin mit der CSS-Eigenschaft color verknüpfen. Für die anderen Farben solltet ihr eigene CSS-Variablen definieren:
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="..." />
<path d="..." />
<path fill="var(--secondary-fill)" d="..." />
</svg>
Im Beispiel oben werden das erste und zweite path-Element durch die definierte Schriftfarbe eingefärbt. Die Füllung des dritten Pfades könnt ihr über die CSS-Variable --secondary-fill steuern:
.icon {
color: darkred;
--secondary-fill: white;
}
Der Artikel „Multi-Colored SVG Symbol Icons with CSS Variables“ gibt euch einen ausführlichen Einblick in das Konzept.
Macht eure Bilder barrierefrei
Und nicht zuletzt: Vergesst nicht auf die Barrierefreiheit! Wenn das SVG-Bild rein dekorativ ist, dann verwendet aria-hidden="true", um das Element vor assistiven Technologien zu verbergen.
Wenn das Bild wichtige Informationen vermittelt, solltet ihr role="img" setzen und mit dem Attribut aria-label einen alternativen Text angeben. Lest den Artikel „Accessible SVGs“ für weitere Informationen und Anwendungsfälle.
Erstellt am