Performance steigern: SVG-Icons als Sprite sparen Requests

Sprites sind eine beliebte Möglichkeit, mehrere Icons innerhalb einer Grafikdatei unterzubringen und immer nur einen Ausschnitt dieser Grafik per CSS auszugeben. Der Vorteil einer solchen Lösung ist, dass mehrere Requests vermieden werden. Statt einzelne Icon-Dateien zu laden, muss nur eine Datei aufgerufen werden. Auch Iconfonts haben den Vorteil, dass nur eine Datei für alle Icons geladen werden muss. Wenn du auf SVG-Icons setzt, kannst du in diesem Format ein Sprite erstellen, dessen Umgang in der Praxis sogar deutlich einfacher ist als klassische Icon-Sprites.

Performance steigern: SVG-Icons als Sprite sparen Requests

Icons per „<symbol>“ zusammenführen

Zunächst einmal müssen natürlich die einzelnen Icons oder Grafiken, die du zu einem Sprite zusammenfügen möchtest, im SVG-Format vorliegen. In Anwendungen wie zum Beispiel Illustrator speicherst du Vektorgrafiken dafür in diesem Format ab. Um mit diesen Grafiken einen Sprite zu erstellen, verwenden wir das „<symbol>“-Element. Dieses Element erlaubt es dir, beliebige SVG-Formen in einer Art Vorlage zu speichern. Den Inhalt eines „<symbol>“-Elementes fügst du dann beliebig oft an anderer Stelle ein.

svg-sprites_illustrator
In Illustrator gezeichneter Stern

1
2
3
4
5
<svg>
  <symbol width="105" height="100" id="stern_gelb">
    <polygon fill="#FAAF32" points="52.5,0 68.7,32.9 105,38.2 78.8,63.8 85,100 52.5,82.9 20.1,100 26.3,63.8 0,38.2 36.3,32.9" />
  </symbol>
</svg>

Im Beispiel enthält ein „<symbol>“-Element ein Polygon in der Form eines Sternes. Du kannst natürlich auch deutlich komplexere Grafiken definieren und mehrere Formelemente innerhalb eines „<symbol>“-Elementes auszeichnen. Die Vergabe einer ID ist wichtig, damit du später auf das jeweilige Symbol zugreifen kannst.

Auf diese Weise erstellst du beliebig viele Symbole innerhalb einer SVG-Datei. Im Gegensatz zu klassischen Sprites müssen die einzelnen Icons oder Grafiken nicht neben- und untereinander platziert werden. Du kannst alle Symbole links oben platzieren. Gerade hier sparst du dir viel Arbeit, da du dir keine Gedanken über die richtige Positionierung der einzelnen Sprite-Elemente machen musst.

„viewBox“ oder feste Breite und Höhe

Wie du im oberen Beispiel siehst, werden über das „<symbol>“-Element die Breite und Höhe definiert. Hier musst du dich entscheiden, ob du feste Werte per „width“ und „height“ definierst, oder ob du das „viewBox“-Attribut einsetzt. Bei festen Werten wird das Symbol später immer in dieser festen Größe dargestellt. Verwendest du das „viewBox“-Attribut, wird sich die Größe des Symbols immer der Größe des Elternelementes anpassen.

1
2
3
4
5
<svg>
  <symbol viewBox="0 0 105 100" id="stern_blau">
    <polygon fill="#32417D" points="52.5,0 68.7,32.9 105,38.2 78.8,63.8 85,100 52.5,82.9 20.1,100 26.3,63.8 0,38.2 36.3,32.9" />
  </symbol>
</svg>

Im zweiten Beispiel wird derselbe Stern per „viewBox“ ausgezeichnet. In diesem Fall ist der Stern in seiner Größe variabel. Willst du, dass sich deine Symbole in der Größe anpassen, solltest du diese Variante verwenden.

Symbole per „<use>“ auswählen

Hast du all deine Symbole angelegt, speicherst du das Sprite ab. Jetzt kannst du es in HTML-Dokumente einbinden und die einzelnen Symbole aufrufen. Dazu muss innerhalb des HTML-Dokumentes ein „<svg>“-Bereich ausgezeichnet werden. Innerhalb dieses Bereiches rufst du deine Sprite-Datei per „<use>“-Element auf und wählst das gewünschte Symbol aus.

1
2
3
<svg width="100%" height="100%">
  <use xlink:href="sprite.svg#stern_gelb" />
</svg>

svg-sprites_symbol1
Stern mit fester Größe

Mit dem Attribut „xlink:href“ referenzierst du die Sprite-SVG-Datei. Die ID des Symbols wird als Sprungmarke übergeben. Aus der Sprite-Datei wird dir anschließend nur das Symbol mit der ID „stern_gelb“ angezeigt. Im Beispiel ist der SVG-Bereich mit einer Breite und Höhe von jeweils 100 Prozent angegeben. Da das Symbol eine feste Breite und Höhe hat, wird der Stern auch immer entsprechend ausgegeben.

1
2
3
<svg width="100%" height="100%">
  <use xlink:href="sprite.svg#stern_blau" />
</svg>

svg-sprites_symbol2
Stern mit variabler Größe – passt sich dem Elternelement an

Beim zweiten definierten Symbol ist die Größe per „viewBox“ definiert. Das heißt, das Symbol wird auf die Breite und Höhe des SVG-Bereichs skaliert.

Browserunterstützung

Alle modernen Browser unterstützen die Elemente „<symbol>“ und „<use>“. Auch Microsofts neuer Browser Edge kommt damit klar. Nur der Internet Explorer hat seine Probleme. Er unterstützt zwar grundsätzlich die beiden Elemente, kann per „<use>“ allerdings keine externe SVG-Datei laden. Das heißt, das SVG-Sprite muss im HTML-Dokument eingebettet sein, damit es funktioniert. Per „<use>“ wird dann nur die ID übergeben.

Beispiel auf Codepen

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Michael
Gast
Michael
6 Monate 17 Tage her

Streng genommen ist das kein Sprite, da die Bilder nicht nebeneinander liegen und ich sie nicht in einem Raster positionieren muss. Durch komplettes weglassen des „fill“ attributes in SVG, kann man auch mit CSS die Farbe festlegen, dadurch kann man wieder ein paar bytes sparen, weil man keinen stern in rot/ grün/ blau/ whatever anlegen muss.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen