Icon-Fonts aus SVG erstellen

Sonderzeichen werden heute dank der Webfonts zuverlässig angezeigt, selbst exotische Symbole wie Yin Yang und ein Schneemann kommen mit so umfangreichen Fonts wie Droid (sehen wir einmal von IE8 ab) auf den Monitor. Icons lassen sich z.B. mit Photoshop erzeugen, als SVG speichern und in Icon-Fonts umwandeln.

Aber wollen wir für eine Hand voll Sonderzeichen gleich einen umfangreichen Web Font wie Droid zuladen? Zuverlässiger als die Anzeige von Sonderzeichen und Symbolen aus Schriften sind Icon-Fonts. Icon-Fonts funktionieren wie jeder ladbare Font, sie hören auf CSS color genauso wie auf font-size. Sie wirken auf dem großen Desktop-Monitor genauso glatt wie auf den kleinen Monitoren der mobilen Geräte.

Icons mit Photoshop als SVG speichern

Die Photoshop-Zeichenfeder ist für Designer ein zentrales Werkzeug: Mit der Zeichenfeder werden Pfade angelegt. Seit Adobe Photoshop CC speichert Photoshop Grafiken als SVG. SVG mit Adobe Photoshop exportieren: »Datei exportieren«, »Exportieren als« und rechts unter Dateieinstellungen »SVG« wählen.

SVG zu Icon-Font

Die IcoMoon-App wandelt eine Kollektion von Vektorgrafiken Online in einen Web Font um.

Die Klassiker für das Anlegen von SVG sind Adobe Illustrator und Inkscape (Open Source, Windows, Mac, Unix). Wer mit Illustrator, Photoshop oder Inkscape nicht vertraut ist, findet auf openclipart.org einfache SVG-Grafiken in jeder Kategorie. Die Grafiken unter der Creative Commons Lizenz dürfen von jedermann eingesetzt und geändert werden.

Tipp: Illustrationsprogramme können Zeichen aus einem Font auch in Pfade umwandeln. Auch wer mit Bezierkurven und Zeichenfeder nicht auf Du und Du ist, findet vielleicht seine Icons in einem seiner eigenen Fonts (die sich als Webfont nicht einsetzen lassen).

Eigener Icon-Font mit SVG und IcoMoon

Die Icons für einen eigenen Icon-Font werden mit Illustrationsprogrammen wie Adobe Illustrator oder Inkscape als einfache Grafiken angelegt. Für jedes Icon braucht der Font eine eigene Grafik. Damit die Umwandlung in ein Schriftzeichen problemlos funktioniert, werden alle Pfade zu einem einzigen Objekt verschmolzen.

IcoMoon hat nicht nur einen großen Vorrat an Icons, die sich zu einem Font zusammensetzen lassen, sondern die IcoMoon App wandelt importierte Vektorgrafiken in Fonts um und ergänzt den Font auch um ausgewählte Icons aus dem IcoMoon-Packs.

Icon-Front aus SVG-Grafik

Die Option Quick Usage speichert den Font für 24 Stunden – Zeit, um die Vektoren besser aufeinander abzustimmen oder zu ergänzen.

Der Download liefert die ganze Vielfalt der Web Font-Formate (EOT, WOFF, TTF und SVG), eine CSS-Datei und eine Demo-HTML-Datei.

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?xxmhws');
	src:url('fonts/icomoon.eot?#iefixxxmhws') format('embedded-opentype'),
		url('fonts/icomoon.woff?xxmhws') format('woff'),
		url('fonts/icomoon.ttf?xxmhws') format('truetype'),
		url('fonts/icomoon.svg?xxmhws#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

Nicht nur IcoMoon wandelt SVG in Fonts um. Da wären noch

SVG oder Icon-Fonts aus SVG?

Noch schwirren die letzten treuen IE8-Benutzer durch das Web. IE8 war der letzte Browser, der keine angeborene SVG-Unterstützung bietet. In dieser Hinsicht ist der Icon-Font zuverlässiger. Im HTML-Code sind sie nur ein einziger Buchstabe, so dass der Screenreader nicht mit einem Schwall XML überfallen wird. SVG hingegen bietet title- und desc-Tags, die Icons für die Screenreader zugänglicher machen und der Einsatz von SVG-Icons ist weniger aufwändig (keine Umwandlung in einen Font, Einbetten in CSS …).

Icon-Fonts sind monochromatisch, jedes Icon kann nur eine Farbe zeigen. SVG-Icons können mehr als eine Farbe zeigen und natürlich komplexere Grafiken zeigen. SVG lässt sich scripten und animieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.