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 22.06.2023