Icon Sprites aus SVG Bild generieren

Icon Sprites sind eine nützliche Lösung um Icons global auf Webseiten in verschiedenen Farben und Grössen implementieren zu können. Damit SVG Icons als Icon-Sprites verwendet werden können, muss man allerdings ein paar Details beachten.

Reto Eller

SVG Grafik in Illustrator optimieren

Nach dem Export aus Adobe XD, Sketch oder einem beliebigen UX Programm öffnen wir die Grafik im Illustrator und müssen folgende Schritte vornehmen:

  • Pfade in Flächen umwandeln
Beispiel eines SVG: Vektor mit Fläche und Pfad
Vector mit Fläche und Pfad

Pfade müssen in Flächen umgewandelt werden, damit später das Icon korrekt skaliert wird. Eine Fläche wird prozentual verkleinert oder vergrössert. Die Pfade (Ränder) haben jedoch einen fixe Pixelgrösse (Breite). Wird ein Element von 500 Pixel auf z.B. 100 Pixel verkleinert, würde der Pfad/Rand im Verhältnis zu breit sein. Zudem müsste man später beim Einfärben der Fläche, jeweils auch immer den Pfad einfärben, was zusätzlichen Code bedeuten würde.

In Illustrator Pfade in Flächen umwandeln
In Illustrator Pfade in Flächen umwandeln
  • Mit dem Pathfinder müssen die verschiedenen Flächen vereint werden. Diese Aktion ist wichtig, damit später ein zusammengesetzter Pfad erstellt werden kann.
In Illustrator Flächen zusammenführen
Flächen zusammenführen
  • Das Element und die Fläche des Dokuments müssen auf eine exakte Pixelgrösse eingestellt werden. Wenn möglich sollten keine Kommastellen verwendet werden.
In Illustrator Elementgrösse einstellen
Elementgrösse einstellen

Zusammengesetzten Pfad erstellen

Damit wir für den HTML Code einen einzigen Pfad für das Icon erhalten, muss ein zusammengesetzter Pfad erstellt werden:

  • Alles markieren
  • Unter dem Menüpunkt "Objekt" -> "zusammengesetzer Pfad" -> "Erstellen" auswählen
In Illustrator zusammengesetzer Pfad
zusammengesetzer Pfad erstellen

Weiterverarbeitung des SVG Codes

Somit wären die Arbeiten im Illustrator abgeschlossen.
Jetzt kann das SVG File in einem Editor geöffnet werden. Hier muss der Code vom <path> -Element in den Zwischenspeicher kopiert werden.

SVG Pfad in einem Editor

Code in Content einbinden

Damit die Icons per HMTL Code global auf der Webseite verwendet werden können, müssen wir die Icon Sprites im HTML Code ablegen.

Der Path wird aus dem Zwischenspeicher eingefügt. Ebenfalls müssen die korrekten Dimensionen in der viewBox eingetragen werden.

Jetzt kann das Icon mit folgendem Code im Content aufgerufen werden:

CSS

Die Icon-Sprites werden ausserhalb des sichtbaren Bereichs platziert.

Die Icons können jetzt z.B. via font-size oder fill nach eigenen Bedürfnissen formatiert werden.

Das funktionierende Beispiel auf CodePen

B/aC51SjQ6LmMiKMK2KRMo5gJZg=

See the Pen SVG Sprites by Pixmill – Büro für Web (@pixmill) on CodePen.

Pixmill Rocket