In diesem Tutorial soll gezeigt werden, wie in einer Webanwendung Icon-Fonts durch SVG-Sprites abgelöst werden können.
Als SVG-Sprites werden SVG-Dateien bezeichnet, die mehrere nebeneinander angeordnete Symbole enthalten. Diese Symbole können dann einzeln auf Webseiten verwendet werden.
Bislang wurden in unseren Webanwendungen Symbole aus Web-Icon-Fonts, wie Fontawesome oder Bootstrap-Icons verwendet. Demgegenüber bieten SVG-Sprites mehrere Vorteile:
Das XSLT1.0-Stylesheet
svg-sprites.xsl kann für die Erstellung eines SVG-Sprites mit Symbolen aus verschiedenen Web-Icon-Fonts verwendet werden.
Als Eingabe dient eine einfache XML-Datei, in der die benötigten Icons aufgelistet sind. Als Syntax werden <i>-Elemente mit class-Attributen verwendet, wie sie aus dem Einsatz von Web-Fonts bekannt sind (siehe
Beispiel-XML-Datei):
Deutsch
English
<?xml-stylesheet type="text/xsl" href="svg-sprite-icons.xsl"?>
<icons>
<i class="fa-solid fa-bug"></i>
<i class="bi bi-cookie"></i>
...
</icons>
Das class-Attribute enthält immer zwei Werte. Der erste Wert ist ein Kürzel für die Icon-Bibliothek.
Wenn Icons in verschiedenen Varianten vorliegen, wird hier zusätzlich der Stil codiert. Dieser entspricht häufig dem Ordnernamen im GitHub-Repository. Der zweite Wert entspricht der ID des Icons. Die ID kann in
der Regel von der Recherche-Seite kopiert werden oder sie entspricht dem Dateinamen im GitHub-Repository.
Das XSLT-Stylesheet führt mit dieser Datei folgende Transformation durch:
currentColor ersetzt. Dadurch wird es später möglich, das Icon per CSS umzufärben.Das Stylesheet ist XSLT 1.0 konform, so lässt sich die Transformation mit einem gängigen Browser durchführen. Allerdings benötigt man inzwischen einen Webserver (z.B
Apache HTTPD,
Tomcat oder
jwebserver), da aktuelle Browser es lokalen HTML-Dateien nicht mehr gestatten, zusätzliche Daten von externen Quellen nachzuladen.
Man startet beispielsweise jwebserver in dem Ordner, in dem sich die Beispiel-XML-Datei und die XSLT-Datei befinden, öffnet im Firefox-Browser die Seite
http://127.0.0.1:8000/sample_svg-sprite-icons.xml und speichert diese als SVG-Datei ab (z.B. als
sample_svg-sprite-icons.svg). Alternativ lässt sich die Transformation auch an der Kommandozeile mit einem Tool wie
xsltproc durchführen.
Als Ergebnis wird folgende SVG-Datei erzeugt:
Die Verwendung im HTML-Code einer Webseite erfolgt beispielhaft auf folgende Weise:
<button type="button" class="btn btn-outline-danger">
<svg class="icon">
<use xlink:href="sprite-icons.svg#fa-solid_fa-bug" />
</svg> Käfer</button>
Zusätzlich muss per CSS die Größe des Symbols an die Umgebung angepasst werden:
.icon {
width: 1em; height:1em; vertical:align:-0.125em;
}
Es können auch noch weitere Eigenschaften, wie z.B. die Farbe, verändert werden.
Symbole aus folgenden Web-Icon-Fonts werden mit dem XSLT-Stylesheet geladen und in einer SVG-Datei gespeichert:
“Free, high quality, open source icon library” (über 2.000 Symbole)
<i class="bi bi-cookie"></i>“The internet’s favorite icon library just expanded the menu. New designs. New packs. Millions of possible icons.” (ca. 2.000 freie Symbole)
<i class="fa-brands fa-linux"></i>“Designed on a 15x15 grid, Teenyicons easily fit in very small spaces and maintain a crisp look” (ca. 1.200 Symbole)
“Material Design Icons is the official icon set from Google. The icons are designed under the material design guidelines.” (ca. 11.000 Symbole)
<i class="ic ic-twotone-assignment-ind"></i>“A scalable set of icons handcrafted by GitHub.” (ca. 600 Symbole)
<i class="oct oct-people-24"></i>“Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects…” (über 1.000 Symbole)
“Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Available as basic SVG icons and via first-party React and Vue libraries.” (über 300 Symbole)
“A set of over 5800 free MIT-licensed high-quality SVG icons for you to use in your web projects.”
“Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. - 1,248 icons and counting - 6 weights: Thin, Light, Regular, Bold, Fill, and Duotone Designed at 16 x 16px to read well small and scale up big”
<i class="phosphor-duotone phosphor-bathtub"></i>“A crisp set of 15×15 icons designed by the WorkOS team.” (über 300 Symbole)
Clarity icons provides pixel-perfect, scalable SVG-based icons. The icon system gives you complete control over icon color, orientation, and size. Additionally, you can access and customize any SVG graphic elements inside the icon through standard CSS.
<i class="clr-essential clr-objects-solid"></i>“Over 3300 SVG icons for popular brands.”
“An open source icons library with 1600+ icons, supporting React, React Native, Flutter, Vue, Figma, and Framer.”
“A curated collection of all country flags in SVG” (ca. 270 Symbole)
“Academicons is a specialist icon font for academics. It contains icons for websites and organisations related to academia that are often missing from mainstream font packages. It can be used by itself, but its primary purpose is to be used as a supplementary package alongside a larger icon set.” (ca. 150 Symbole)
<i class="ai ai-springer-square"></i>Gerade wenn in einer Webanwendung nur wenige Icons verwendet werden, die gegebenenfalls auch noch aus verschiedenen Web-Icon-Fonts stammen, bietet eine einzelne SVG-Sprite-Datei Vorteile. Mit dem hier vorgestellten XSLT-Stylesheet kann diese unter Verwendung mehrere bekannter Icon-Bibliotheken hergestellt werden. Bei Bedarf lässt sich das Stylesheet für weitere Icon-Bibliotheken anpassen.
Viel Spaß beim Ausprobieren!