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

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.

Mit dem Pathfinder müssen die verschiedenen Flächen vereint werden. Diese Aktion ist wichtig, damit später ein zusammengesetzter Pfad erstellt werden kann.

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.

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

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.

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.

<div class="icon-sprites">
    <svg>
        <symbol id="icon-arrow-top" viewBox="0 0 16 11">
            <path d="M8,0L0,9.7L1.5,11L8,3.1l6.5,7.9L16,9.7L8,0z">
        </symbol>
        
        <symbol ... weitere Icons>
    </svg>
</div>

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

<span class="svg-icon">
    <svg class="icon">
        <use xlink:href="#icon-arrow-top"></use>
    </svg>
</span>

CSS

Die Icon-Sprites werden ausserhalb des sichtbaren Bereichs platziert.

.icon-sprites {
  display: none !important;
}

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

.svg-icon {
  font-size: 3rem;
}

.icon {
  fill: red;
}

a:hover svg.icon {
  fill: darken(red,25%);
}

Das funktionierende Beispiel auf CodePen

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