CSS-Sprites mit SVG-Grafiken & SVG Fragment Identifiers

Bei Verwendung von CSS-Sprites müssen die einzelnen Grafiken innerhalb einer Sprite-Grafik normalerweise für die entsprechenden HTML-Elemente mit background-position positioniert werden. Das gilt für SVG-Sprite- als auch für PNG-/JPEG-Sprite-Grafiken.

Für SVG-Sprites besteht aber auch alternativ die Möglichkeit sogenannte SVG Fragment Identifiers zu verwenden.

Vorteil durch Einsatz von SVG Fragment Identifiers

Der Vorteil besteht darin, dass im CSS nicht die einzelnen Positionen der Grafiken angeben werden müssen. Somit muss man z.B. nach Änderung der Größe einer einzelnen Grafik innerhalb der Sprite-Grafik die entsprechende Positionsangabe im CSS nicht mehr anpassen. Möglich macht das der Einsatz von IDs, die den einzelnen Grafiken innerhalb der SVG-Sprite-Grafik zugewiesen werden. Über diese IDs lassen sich die einzelnen Grafiken im CSS ansprechen.

Anwendungsbeispiel

HTML-Grundgerüst

Im folgenden Beispiel sollen zwei div-Elemente jeweils unterschiedliche Hintergundgrafiken, die Teil einer SVG-Sprite-Grafik sind, erhalten.

<div id="redIcon"></div>
<div id="blueIcon"></div>
HTML

Beiden div-Elementen ist eine ID zugewiesen. Ersteres soll ein rotes Icon und letzteres ein blaues Icon anzeigen.

SVG-Sprite-Grafik

Die Icons, im konkreten Fall einfache Quadrate, werden im SVG-Format und als SVG-Sprite eingebunden. Für unser Beispiel nehmen wir folgende SVG-Datei:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">
    <view id="redIcon" viewBox="0 0 50 50"/>
    <view id="blueIcon" viewBox="0 50 50 50"/>

    <rect fill="red" width="50" height="50"/>
    <rect y="50" fill="blue" width="50" height="50"/>
</svg>
SVG - Datei: svg-sprite.svg

In Zeile 5 & 6 wird durch Einsatz des view-Elements ein anzuzeigender Bereich innerhalb der SVG-Sprite-Grafik mit entsprechender ID definiert. Über diese definierte View-ID kann das jeweilige Icon dann im CSS angesprochen bzw. referenziert werden.

Icons mittels CSS & SVG Fragment Identifiers positionieren

Zuguterletzt finden sich im Folgenden die entsprechenden CSS-Angaben, um den div-Elementen die entsprechenden Icons zuzuweisen:

#redIcon, #blueIcon {
    width: 50px;
    height: 50px;
}

#redIcon {
    background-image: url('svg-sprite.svg#redIcon');
}

#blueIcon {
    background-image: url('svg-sprite.svg#blueIcon');
}
CSS

Anstatt background-position zu verwenden, wird innerhalb der URL der SVG-Datei nach einer # der sogenannte Fragment Identifier, also die entsprechende View-ID, angegeben.

Weiterführende Informationen

SVG-Sprites können so nicht nur im CSS, sondern auch direkt in img-Tags oder als Inline-SVG Verwendung finden.

Für weiterführende Informationen kann ich euch folgende Beiträge empfehlen:

Webbrowser-Unterstützung

Alle gängigen Webbrowser unterstützen SVG Fragment Identifiers (siehe caniuse.com). Hier im Blog setze ich deshalb auch SVG-Sprites für die Anzeige der Icons ein.

Fazit

Ich bevorzuge mittlerweile für die Einbindung von Icons den Einsatz von SVG-Sprites in Verbindung mit Fragment Identifiers. Zum einen skalieren Vektorgrafiken besser und zum anderen muss ich mich im CSS nun nicht mehr mit irgendwelchen Positionsangaben rumärgern. Zudem sind SVG-Grafiken in Sachen Barrierefreiheit (Accessibility) im Vorteil gegenüber Icon-Fonts oder normalen PNG-/JPEG-Sprite-Grafiken.

Feedback

Für Feedback zum Beitrag, seien es Fragen, Korrigierungen und/oder Anregungen, könnt ihr mir gerne eine Nachricht per E-Mail oder Mastodon schreiben (siehe Kontakt).