Icon Fonts leicht als Inline SVG einbinden

CSS-Sprites sind out. Wer als Webdesigner etwas auf sich hält, verwendet Icon Fonts oder SVG. Bei vielen schrillen beim Begriff SVG die Alarmglocken. Das ist doch total kompliziert und ich hab davon eh keine Ahnung. Also bleib ich doch lieber bei so einer Icon Font, die muss ich nur einbinden. Es stimmt, SVG ist eine Kunst und möchte verstanden werden. Allerdings ist es ein Klacks die Symbole einer Icon Font in SVG umzuwandeln. SVGs bringen im Gegensatz zu Icon Fonts zahlreiche Vorteile mit. Chris Coyier hat einen sehr guten Vergleich auf seinem Blog CSS-Tricks dazu parat. Der Browser-Support ist mittlerweile hervorragend.

Symbole einer Icon Font in SVG konvertieren

Um die Schrift umzuwandeln, brauchst du nur das SVG File deiner Symbolschrift und die Webapp von IcoMoon. In der Regel liegt die SVG-Version den meisten Icon Fonts bei. Rufe die IcoMoon App auf und erstelle ein neues Projekt. Lade nun die SVG Datei über “Import Icons”. Du brauchst also keine neuen Symbole suchen oder erstellen.

Symbol einer Icon Font als SVG mittels IcoMoon exportieren
Symbol einer Icon Font als SVG mittels IcoMoon exportieren

Wähle alle Symbole aus und klicke links auf “Generate SVG & More”. Unten links siehst du einen Download-Button. Daneben oder im oberen Bereich findest du die Einstellungen. Darüber konfigurierst du den Klassen-Prefix, Größe, Farbe, Hintergrundfarbe usw. Lade das Archiv herunter und entpacke es. Du hast soeben erfolgreich deine Icon Font in SVG konvertiert. Jetzt bindest du die Symbole in dein Webprojekt ein.

SVG Dateien als Inline SVG einbetten

Ich erläutere dir die Einbindung anhand eines Beispiels. Im Ordner SVG liegen alle Symbole als einzelne SVG Dateien. Öffne eine von ihnen mit einem Texteditor, wie etwa Sublime Text 3. Der Inhalt des SVGs sollte ähnlich dem nachfolgenden Beispiel aussehen.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path fill="#444" d="M26.547 2.906q0 0.547-0.672 1.219l-9.875 9.875v12h5q0.406 0 0.703 0.297t0.297 0.703-0.297 0.703-0.703 0.297h-14q-0.406 0-0.703-0.297t-0.297-0.703 0.297-0.703 0.703-0.297h5v-12l-9.875-9.875q-0.672-0.672-0.672-1.219 0-0.359 0.281-0.57t0.594-0.273 0.672-0.063h22q0.359 0 0.672 0.063t0.594 0.273 0.281 0.57z"></path>
</svg>

So kannst du das Icon allerdings noch nicht in dein Webprojekt einfügen. Entferne die fill Anweisung, die XML-Version und den Doctype. Füge dem SVG Element anschließend die Klassen icon und icon-ICONNAME hinzu. Öffne die beiliegende style.css und kopiere den Inhalt in dein Stylesheet. Bei mir schaut das dann beispielsweise so aus:

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	font-size: 180px; /* optionale Angabe */
}
.icon-glass {
	width: 1.0000000298023224em;
}

Füge den zuvor angepassten Quellcode der SVG Datei in dein HTML-Dokument ein. In meinem Fall schaut dies folgendermaßen aus:

<svg class="icon icon-glass" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path d="M26.547 2.906q0 0.547-0.672 1.219l-9.875 9.875v12h5q0.406 0 0.703 0.297t0.297 0.703-0.297 0.703-0.703 0.297h-14q-0.406 0-0.703-0.297t-0.297-0.703 0.297-0.703 0.703-0.297h5v-12l-9.875-9.875q-0.672-0.672-0.672-1.219 0-0.359 0.281-0.57t0.594-0.273 0.672-0.063h22q0.359 0 0.672 0.063t0.594 0.273 0.281 0.57z"></path>
</svg>

Das Ergebnis

Ich habe zur besseren Visualisierung noch eine kleine Demo bei jsFiddle erstellt.


Embed inline SVG Icon

Mit der oben beschriebenen Methode kannst du nach und nach alle deine Symbole einfügen. Das macht zwar erst mal ein bisschen Arbeit, dafür kann sich das Endergebnis aber sehen lassen. Es ist also ein Leichtes, eine Icon Font in Inline SVG zu wandeln und einzubinden.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare – Schreib mir deine Meinung!

Fülle bitte die nachstehenden Felder aus. Angaben mit einem Sternchen sind Pflichtangaben. Deine E-Mail-Adresse wird nicht veröffentlicht.