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