Computer Handy & Smartphone Tablets Webdesign

Pixelfeste Icons: SVG oder Font?

Das Web wird immer variabler und mobiler. Auf fast jedem Gerät, das einem Computer ähnelt, kann man einen bzw. mehrere Browser nutzen. Aber nicht nur das macht das Erstellen und Anpassen von größen- und auflösungsunabhängigen Webseiten immer schwerer, die vielen verschiedenen Pixeldichten der unterschiedlichsten Geräte – von Retina Display auf dem iPhone, iPad oder MacBook, über 1080p HD-Displays auf Android-, Windows Phone-Geräten, Laptops und Tablets bis hin zu 2K oder bald gar 4K-Auflösungen sollte eine gute Website alle abdecken. Doch eins bleibt dabei manchmal auf der Strecke: passende Icons.

Bilder an unterschiedlich große Geräte und Auflösungen anzupassen, ist schon schwer genug, wenn es aber um Icons geht – von Menüflächen über Social Media bis hin zu animierten Buttons – dann werden oft noch älteste Methoden verwendet, um diese zu verwirklichen: Jpeg, png oder gar gif in mehreren Versionen. Dabei bietet uns das moderne Web viel bessere Alternativen, pixelfeste Alternativen, die skaliert werden können, ohne jeden Qualitätsverlust befürchten zu müssen. Selbst ich verwende diese Techniken noch viel zu selten. Ich spreche von SVG- und Font-Icons.

SVG-Dateien sind vektorbasierte Grafiken, die nicht nur sehr anpassbar sind, weil sie auf Codebasis leicht verändert werden können, sondern auch auf jedem Bildschirm gut aussehen. Heutzutage unterstützen alle gängigen und halbwegs akutellen Browser SVG. Einzig der Internet Explorer 8 und abwärts könnte Probleme machen, wie ich das sehe. Wer sich noch nicht mit SVG auseinandergesetzt hat, der sollte mal kräftig danach googlen. Für alle, die die Vorteile dieser Vektorgrafiken schnell nutzen wollen, möchte ich hier eine tolle Quelle zeigen, die ich selbst gerne gebrauche: Iconmelon. Das Projekt ist Open Source und kostenlos und bietet dem Nutzer jede Menge frischer SVG-Icons, die auf der Webseite ganz einfach ausgewählt und heruntergeladen werden können. Mittlerweile gibt es durch zahlreiche Unterstützung eine Menge toller Icons zu finden. Für euer zukünftiges Webprojekt solltet ihr euch die Seite auf jeden Fall merken.

Die zweite tolle Sache, die ich heute zeigen möchte, sind die Font-Icons. Fonts sind normalerweise Schriftarten, die für gewöhnlichen Text benutzt werden. Doch wer schonmal darauf geachtet hat, der wird wissen, dass sich Fonts auch ganz hübsch zu etwas eigenen, was bei Icons sehr wichtig ist: skalieren. Fonts skalieren wunderbar mit der Bildschirmgröße und -auflösung mit. Sie verpixeln nicht. Deshalb ist es nicht verwunderlich, dass ein paar schlaue Leute darauf gekommen sind, Fonts zu Icons zu machen. So kann man die Pseudo-Schriftarten einfach wie reguläre Schriftarten einbinden und verwenden. Der Vorteil gegenüber SVG scheint mir zu sein, dass Fonts etwas einfacher zu verstehen sind als der doch leicht komplexere Code einer SVG-Datei. Die meisten Webbastler werden wohl an das Einbinden von Fonts gewöhnt sein. Mit Font-Icons braucht man da nichts Neues zu lernen. Eine wunderbare Inspirationsquelle für Font-Icons ist die Seite Fontello. Dort gibt es eine Vielzahl an gängigen und praktischen Icons im Font-Format zum Download. Wer mit SVG weniger anfangen kann, der ist hier genau richtig.

Also SVG oder Font-Icons? Im Grunde ist beides klasse und man sollte ruhig beides ausprobieren. Für welches man sich letztendlich entscheidet, ist egal. Besser als klassische Methoden mit mehreren png-Dateien in unterschiedlichen Auflösungen für die Unmengen an Geräten ist das Nutzen von SVG oder Fonts allemal. Also probiert es aus!