Blog
Bloghead

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

SVG IN HTML EINBINDEN

Neben einzelnen Grundelementen lassen sich mit SV-Grafiken Filter, wie z. B. Schlagschatten, Weichzeichner oder Überblender umsetzen. Auch animiert bietet SVG viele spannende Möglichkeiten. Einfache Bewegungs- und Form-Tweens lassen sich unkompliziert integrieren. Damit steht der Darstellung von Bewegungen in Charts und Diagrammen nichts im Weg.

Die Integration von SVG erfolgt entweder referenziert – also über einen Verweis auf den Speicherpfad der Datei – oder als Code in der HTML- oder der CSS-Datei. Mit den folgenden Tags lassen sich die SV-Grafiken referenzieren:

  • <img>-Tag

    Die SVG-Datei liegt als Resource auf dem Server und wird über das <img>-Tag aufgerufen.
  • <object>-Tag

    Der Vorteil bei dieser Methode ist die Möglichkeit Fallback-Mechanismen einzubauen. Diese geben Alternativen (in Text oder als PNG) aus, wenn die SVG-Datei einmal nicht geladen oder angezeigt werden kann.

Mit der Weiterentwicklung von HTML 5 kann SVG endlich sein ganzes Potenzial ausspielen. Die bereits 2001 vom W3C standardisierte Technologie lässt sich nun auch nativ in den Quellcode einbetten. Das Aussehen wird dabei grundlegend mit CSS beeinflusst. Hierfür wurde ein neues Tag eingeführt:

  • <svg>-Tag

    Der Code der Datei liegt inline im Body des HTML-Dokuments. Über JavaScript ist so ein komfortabler Zugriff auf das Aussehen der SV-Grafik möglich. So kann man einfach Animationen und Mouse-Over-Effekte umsetzen.

 

SVG IN CSS EINBINDEN

Neben den schon angesprochenen Alternativen, können SVG-Dateien auch als Background-Image inline in CSS eingebunden werden. Um die Dateigröße beim Einsatz von vielen Grafiken zu reduzieren, empfiehlt es sich die SV-Grafik mit einer Base-64-Kodierung in die CSS-Datei zu integrieren. Das sieht im Beispiel unseres „Add-Icons“ folgendermaßen aus.

Die Integration im HTML-Dokument erfolgt dann in einem „div-Kontainer“.

Vor allem für Seiten, in denen viele Grafiken zum Einsatz kommen, ist diese Methode eine tolle Möglichkeit die Performance zu verbessern. Lädt man die Seite neu, werden alle über herkömmliche Wege eingebundene Grafiken, immer wieder geladen. So werden bei jeder Server-Anfrage unzählige Grafiken über das Netz empfangen.

Integriert man alle vorkommenden Grafiken wie beschrieben in die CSS-Datei, wird diese zwar in erster Linie aufgeblasen – einmal geladen, sind die Grafiken dann im Cache und müssen nicht wieder bei jeder weiteren Server-Anfrage erneut geladen werden.

In Revolver 9 werden die Icons über die CSS-Datei integriert werden. Bedenkt man den Einsatz von insgesamt weit über 100 Icons lässt sich ein spürbarer Performance-Zuwachs feststellen. Für unseren Fall ist diese Methode für das Darstellen von scharfen SVG-Grafiken also alternativlos.

 

LINKS

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