SVG Sprites & Icon-Systeme

SVG-Sprites sind eine komfortable Möglichkeit um viele SVG-Grafiken in einer großen Datei zu speichern. Jede einzelne Grafik wird mit <symbol> und einer ID als unabhängiges Objekt ausgezeichnet. Im HTML- oder CSS-Code können die gewünschten Elemente dann mit Hilfe dieser ID angezeigt werden.

Die Vorteile sind neben der komfortablen Verwaltung auch Aspekte wie kürzere Ladezeit und die Möglichkeit Icons bzw. Grafiken umzufärben. SVG Sprites haben somit klassische CSS Sprites abgelöst. Wir zeigen verschiedene Möglichkeiten der Umsetzung.

Inline Icon-Sprite

Mit Hilfe von SVG-Definitionsbereichen und Symbolen können sog. SVG-Sprites erstellt werden:

  1. Innerhalb des Definitionsbereichs (<defs>) werden verschiedene Grafiken innerhalb von <symbol> angelegt und mit einer ID versehen. Wichtig ist, dass innerhalb des <symbol> die viewBox korrekt angegeben wird.
  2. An anderer Stelle im Dokument werden die Objekte dann mit <use> über ihre ID angesprochen und geladen.

Der Grundaufbau sieht so aus:

<!-- wird direkt nach dem öffnenden <body> geladen -->
<svg height="0" width="0">
  <defs>
    
    <symbol id="meine-id" viewBox="0 0 100 100">
      <title> … </title>
      <path d="…"> <!-- hier wird die Grafik gezeichnet --> </path>
    </symbol>

    <!-- weitere symbole -->
    
  </defs>
</svg>

<!-- später im Dokument wird die Grafik geladen -->
<svg class="icon icon-red"><use xlink:href="#meine-id"></use></svg>

Da alles inline mit SVG umgesetzt ist, kann mit CSS das Icon umgefärbt werden. Das funktioniert auch dann, wenn auf eine externe URL referenziert wird. Da nicht alle Browser externe Referenzen in <use> erlauben, kann das Polyfill SVG4Everybody eingesetzt werden.

<use xlink:href="/pfad/zu/icons.svg#meine-id"></use>

Es ist allerdings nicht möglich innerhalb eines mittels <use> geladenen Symbols Unterpfade mit CSS umzugestalten, da <use> das Symbol im Shadow DOM lädt.

Beispiel SVG Sprite anschauen

Sprite-Datei einbinden

Die Sprite-Datei kann sehr groß werden, soll aber dennoch inline eingebaut sein, um die Umfärbung etc. zu ermöglichen. In den meisten Fällen wird die Sprite daher in eine externe Datei geschrieben und inkludiert. Wenn PHP genutzt wird, ist folgendes Snippet hilfreich, um die Sprite oben im Dokument einzubinden.

<?php echo file_get_contents("sprite.svg"); ?>

Externe SVG-Sprite mit <img>

Alternativ zum Inline-Ansatz ist auch möglich, externe SVGs als Sprite zu laden. Mittels sog. »Fragment Identifier« werden anschließend Teile davon innerhalb eines <img>-Elements angezeigt. Es gibt zahlreiche Methoden der Implementierung. Das folgende Beispiel zeigt die Herangehensweise mittels <view>-Element.

Da die Icons über <view> angesprochen werden, müssen sie im Vektor-Grafikprogramm (z.B. Illustrator) innerhalb einer Datei untereinander gezeichnet werden.  Anschließend kann die gespeicherte SVG manuell im Code-Editor angepasst werden:

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 120" style="enable-background:new 0 0 40 120;" xml:space="preserve">
  
  <view id="viereck" viewBox="0 0 40 40" />
  <view id="kreis" viewBox="0 80 40 40" />
  <view id="stern" viewBox="0 40 40 40" />
  
  <circle cx="20" cy="100" r="16"/>
  <rect x="8" y="8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2843 20)" width="24" height="24"/>
  <polygon points="20,43 25.3,54.2 37,56 28.5,64.7 30.5,77 20,71.2 9.5,77 11.5,64.7 3,56 14.7,54.2 "/>
  
</svg>

Die viewBox jedes <view>-Elements wird mit Hilfe von Koordinaten angegeben. Die ersten beiden Werte stellen X und Y-Koordinate der oberen linken Ecke dar, die letzten beiden beziehen sich auf Höhe und Breite der viewBox. Eine Angabe wie viewBox="0 80 40 40" bedeutet also, dass die Box bei X0 und Y80 beginnt und eine Höhe und Breite von 40 besitzt.

Im HTML-Code wird das Icon dann innerhalb von <img> über die ID der viewBox angesprochen und entsprechend angezeigt.

<head>
  <style>
  .icon {
    width: 2em;
    height: 2em;
  }
  </style>
</head>

<body>
  <img class="icon" src="sprite.svg#viereck" alt="" />
  <img class="icon" src="sprite.svg#kreis" alt="" />
  <img class="icon" src="sprite.svg#stern" alt="" />
</body>

Beispiel SVG-Sprite mit <img>-Tag anzeigen

Externe SVG-Sprite mit CSS background

Wenn anstelle eines HTML-Bildes ein CSS background verwendet werden soll, dann reicht folgender CSS-Code.

span {
  width: 40px;
  height: 40px;
  display: inline-block;
}

.viereck {
  background: url(sprite.svg#viereck) no-repeat;
}

.stern {
  background: url(sprite.svg#stern) no-repeat;
}

.kreis {
  background: url(sprite.svg#kreis) no-repeat;
}

Die Datei der SVG-Sprite ist unverändert zum zuvor gezeigten Beispiel.

Beispiel SVG-Sprite als CSS background anzeigen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the svg-fragment feature across the major browsers from caniuse.com

Tools zum Erzeugen von SVG Sprites

Bei größeren Sprites macht es Sinn auf Tools zu setzen, die eine Sprite-Datei mit entsprechender Struktur und den IDs automatisch erzeugen. Gut geeignet sind dafür das kostenlose Browser-Tool Icomoon oder ein Build-Prozess, z.B. auf Basis von Gulp. Wir selbst nutzen Gulp ähnlich wie iodigital es hier beschreibt.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →