smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

CSS Sprites mit SVG-Grafiken & SVG Fragment Identifiers

14. Januar 2013
Stephan
CSS Sprites mit SVG-Grafiken & SVG Fragment Identifiers

Nutzt man CSS-Sprites müssen die einzelnen Grafiken innerhalb einer Sprite-Grafik für die jeweiligen HTML-Elemente mit background-position richtig positioniert werden. Das gilt für eine SVG-Sprite-Grafik genauso wie z.B. für eine PNG-Sprite-Grafik.

Mit der Einführung von SVG 1.1 gibt es für SVG-Sprites aber auch die Möglichkeit SVG Fragment Identifiers zu verwenden.

Das hat den Vorteil, dass man nicht die einzelnen Positionen angeben muss. Viel mehr nutzt man hier IDs, die den einzelnen Grafiken innerhalb der SVG-Sprite-Grafik zugewiesen werden. Über diese IDs lassen sich die einzelnen Grafiken im CSS ansprechen.

In diesem Artikel zeige ich euch wie die Verwendung von SVG Fragent-Identifiers funktioniert.

HTML – 2 Icons anzeigen

In dem folgenden Beispiel haben wir nichts weiter als zwei div-Elemente:

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

Beiden div-Elementen haben eine ID zugewiesen. Wir ihr euch vielleicht denken könnt, soll ersters ein rotes Icon und letzteres ein blaues Icon darstellen.

SVG-Sprite-Grafik

Die Icons wollen wir im SVG-Format und als SVG-Sprite einbinden. Dazu erzeugen wir uns 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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px"
	 height="100px" viewBox="0 0 50 100" enable-background="new 0 0 50 100" xml:space="preserve">
<view id="redIcon" viewBox="0 0 50 100"/>
<view id="blueIcon" viewBox="0 50 50 100"/>
<g>
	<rect fill="#DB0707" width="50" height="50"/>
</g>
<g>
	<rect y="50" fill="#0B28D6" width="50" height="50"/>
</g>
</svg>

Unsere Icons sind in diesem Fall nichts weiter als Quadrate.

Das entscheidene für uns ist aber der Inhalt der hervorgehobenen Zeilen 5 & 6. Hier definieren wir für unsere Icons je einen View-Bereich. Über die View-ID können wir anschließend im CSS einen einzelnen Bereich unsere SVG-Sprite-Grafik ansprechen.

SVG mittels CSS & SVG Fragment Identifiers positionieren

Kommen wir nun zum dazugehörigen CSS:

#redIcon, #blueIcon {
	width: 50px;
	height: 50px;
}
#redIcon {
	background-image: url('svg-sprite.svg#redIcon');
}
#blueIcon {
	background-image: url('svg-sprite.svg#blueIcon');
}

Die div-Elemente habn in diesem Fall eine Größe von 50×50 und entsprechen somit der Größe der Icons. Anstatt nun aber über background-position die Icons zu positionieren, nutzen wir die View-IDs. Dazu hängen wir an die URL, die den Pfad zu unserer Sprite-Grafik angibt, einfach die jeweilige ID.

Problem an der ganzen Sache ist, dass SVG Fragment Identifiers zum jetzigen Zeitpunkt nur von Firefox vollständig unterstützt wird (siehe caniuse.com).

Fazit

Sobald SVG Fragment Identifiers in den meisten Bowsern unterstützt werden, kann man SVG-Sprites auf einfache Art positionieren. Somit spart man sich unnötige background-position-Angaben.

Nutzt ihr eigentlich SVG-Grafiken bei der Erstellung eurer Websites?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!