Blog
Bloghead

REVOLVER 9 UX: PIXELGENAU, RESPONSIVE UND SCHARF – SVG-ICONS I

Pixelgenau, responsive und scharf – mit diesen Ansprüchen suchten wir das passende Dateiformat für unsere Revolver-Icons. Retina-Displays und ein hohes Maß an geometrischer Flexibilität bei der Darstellung von Inhalten auf dem Bildschirm. Mit diesen Herausforderungen haben Entwickler und Designer immer wieder zu kämpfen. Welches Dateiformat eignet sich also am besten für Revolver 9? Mit dieser Frage wollen wir uns in unserem letzten Icons-bezogenen Blog-Beitrag beschäftigen, der technisch bedingt in zwei Teilen erfolgt.

 

VEKTOREN VS. PIXEL

Grundlegend muss man für die Darstellung am Bildschirm zwischen Vektor- und Pixel-Grafiken unterscheiden. Während Pixel-Grafiken aus einzelnen Bildpunkten aufgebaut sind, bestehen Vektor-Grafiken aus Pfaden und Flächen, die sich zwischen exakt definierten Koordinaten aufspannen. 

Mit Transparenzen und verlustfreier Komprimierung überzeugen PNG-Dateien in Web-Applikationen. Der Trend zu responsiven Web-Inhalte führen das Pixel-Format jedoch schnell an seine Grenzen. Nicht selten werden für die unterschiedlichen Responsive- und Auflösungs-Stufen eigene Icons auf dem Server abgelegt. Je nach Auflösung und Skalierung des responsiven Seiten-Rasters werden die jeweils richtigen Grafiken geladen. Kommen dann noch Mouse-Over- oder andere Effekte dazu, wird es auf dem Server schnell unübersichtlich.

Icons aus Vektoren bieten neben Transparenz und verlustfreier Komprimierung auch den Vorteil beliebig skalierbar zu sein. Flexibilität und einfache Handhabung machen die auf Vektoren basierten Icon-Fonts und SVG-Grafiken so zu einer zukunftsfähigen Alternative für den flexiblen Einsatz am Bildschirm.

 

ICON-FONTS

Die Idee von Icon-Fonts ist simpel: Anstatt einzelner Buchstaben werden Vektor-Grafiken zu einem Font-Set zusammengefasst. So entsteht ein Font, der nur aus Icons besteht. Das als System-Schrift integrierte Font-Set „Microsoft Wingdings“ ist das wohl prominenteste Beispiel für einen Icon-Font.

Um einen Icon-Font zu erstellen, müssen zunächst alle Icons in Illustrator angelegt und in Flächen umgewandelt werden. Jedes Icon wird dann als SVG-Datei exportiert. Über die Anbieter fontello.com und icomoon.io lassen sich die SVG-Dateien in Font-Dateien zusammenfassen und in den verschiedensten Formaten herunterladen. Diese können dann wie gewohnt in die CSS-Datei eingebunden werden. 

Für den Einsatz eines Icon-Schrift-Sets sprechen Skalierbarkeit ohne Qualitätsverlust, geringe Dateigröße, die Möglichkeit das Aussehen mit CSS zu beeinflussen und die Kompatibilität mit den gängigsten Browsern. Als Nachteil ist die fehlende Flexibilität zu sehen: ist ein Font-Set erstellt, hat man keinen Einfluss mehr auf die einzelnen Vektor-Parameter. Ausserdem wird Mehrfarbigkeit der Grafiken leider nicht von allen Browsern unterstützt.

Hier gehts weiter zum 2. Teil.

Erstellt 4, Apr 2014 in News von bjoern.weiler
Bearbeitet 8, Apr 2014 von bjoern.weiler

...