15. April 2014 15:09 von Alexander Renner (Kommentare: 0)

vier Icons eines Einkaufswagens in verschiedenen Detailgraden

Wenn Icons und Responsive Design zusammentreffen, entsteht vor allem eines – hohe Komplexität. Icons müssen der Anpassung des Layouts an unterschiedliche Formate, Bildschirmauflösungen und Screengrößen folgen. Das Problem: Der klassische Weg, die Einbindung von Pixelgrafiken (Bilddateien), scheitert an der verlustreichen Skalierung. Gelöst wurde dieses Problems bisher, indem die Pixel-Icons in den verschiedenen Auflösungen zur Verfügung gestellt wurden, was u.U. eine große Menge an Assets zur Folge hat.

Das erste Problem lässt sich schnell durch den Einsatz von Vektorgrafiken lösen. Diese sind verlustfrei skalierbar. In der Vergangenheit haben wir zu diesem Thema bereits in unserem Artikel Sticht Icon-Font Pixel-Icon? berichtet. Neben den vielen begründeten Vorteilen von Icon-Fonts gibt es aber weiterhin Nachteile. Responsive Design zeichnet sich nicht nur durch die visuelle Skalierung von Inhalten aus, sondern vor allem auch durch die inhaltliche Anpassung. Das hört auch nicht bei den Icons auf.

Wieso soll ein Retina-Display mit seiner hohen Pixeldichte und dem damit einhergehenden Detailgrad nicht auch ein dafür entsprechend angepasstes Icon erhalten? Den Ansatz zur Beantwortung dieser Frage gab uns der interessante Artikel "Rethinking Responsive SVG" von Ilya Pukhalski im Smashing Magazine. Die dort besprochenen SVGs, welche nebenbei schon sehr lange existieren und daher eine sehr große Abdeckung durch Browser genießen, bringen einen großen Vorteil mit sich. Anstatt vektorisierte Icons in einen Font zu gießen und so im hohen Maß die Kontrolle über ihre Handhabung zu verlieren, weist das Dateiformat SVG einen syntaktischen Aufbau auf und basiert – anders als viele andere Formate (z.B. JPG, PNG oder auch eine Webfont) – auf der XML-Dateistruktur. Das mag kompliziert klingen, ist im Grunde genommen aber nichts anderes als eine HTML-Datei. Alle Vektoren des Icons sind dort mittels Koordinaten beschrieben.

Screenshot mit Code-Ausschnitt des svg-Icons

SVG-Icon im Editor

Ein kurzer Exkurs zum Thema "Auszeichnungssprachen"

Sowohl Standard-HTML als auch -XML sind sogenannte Auszeichnungssprachen und funktionieren folgendermaßen: Wann immer man etwas beschreiben will, z.B. eine Form oder eben auch ein Icon, legt man bestimmte Auszeichnungssymbole fest und fügt den Inhalt inklusive der Eigenschaften und Identifikatoren dort ein. Eine Auszeichnung wird geöffnet und geschlossen und alle enthaltenen Befehle können nach dem gleichen Schema aufgebaut sein.

Hier ein Beispiel:

<svg>
<einkaufswagen>
<korb>koordinate X, Koordinate Y, Länge X, Länge Y</korb>
<rad1>koordinate X, Koordinate Y, Durchmesser</rad1>
<rad2>koordinate X, Koordinate Y, Durchmesser</rad2>
</einkaufswagen>
</svg>

Vorteile der Responsive .svg-Lösung

Der Vorteil an der XML-Struktur von SVG-Dateien ist, dass jedes Element identifizierbar ist. Somit können wir jetzt bestimmte Elemente nach Lust und Laune ein- bzw. ausblenden.

Man stelle sich vor, das oben beschriebene SVG enthält nicht nur einen Einkaufswagen, sondern mehrere, welche noch dazu in ihrer Komplexität und Gestalt unterschiedlich sind. So könnte man diese ein- und ausblenden, und zwar mittels CSS und Media Queries, mit denen sich auf die Auflösung eines Gerätes reagieren lässt. Das Beste daran ist, dass das durch die Konformität von SVGs mit dem XML-Standard sogar innerhalb der SVG-Datei möglich ist.

Demo

vier Icons eines Einkaufswagens in verschiedenen Ausprägungen

Hier geht's zur Demo

Durch die Möglichkeit des selektiven Einblendens können verschiedene Icons in eine Datei gepackt werden, die je nach Bedarf zur Anzeige kommen. So kann man nicht nur verschiedene Abstraktionen eines Icons nutzen, sondern bspw. auch ein illustratives Icon mit einbetten. Das ist ein großer Vorteil gegenüber Icon-Fonts, die zwar das Einfärben erlauben (was natürlich auch mit SVGs funktioniert), aber nur sehr widerspenstig von mehrfarbigen Icons zu überzeugen sind. Hier besteht nur die komplizierte Möglichkeit der maskierten Layer.

Workflow Development

Der größte Vorteil ergibt sich jedoch im Workflow. Bisher mussten Icons vermaßt, positioniert und in Responsive Designs bei Bedarf komplett und umständlich ausgetauscht werden. Hierfür ist ein großer Abstimmungsaufwand zwischen Design und Entwicklung notwendig. Sind alle diese Details aber bereits in einem SVG gesammelt und eingebettet, muss der Container (bspw. ein DIV) nur noch an die für das Icon vorgesehene Stelle mit der richtigen Größe gesetzt werden. Die Auswahl des für diese Auflösung korrekten Icons übernimmt das CSS innerhalb des SVG.

Im Vergleich zu Icon-Fonts ergeben sich weitere Vorteile. Icon-Motive in Form von SVG-Dateien können (wie Pixelgrafiken) einzeln behandelt werden und sind nicht Teil einer Font-Datei. Änderungen an einem Icon erfordern nur Anpassungen der SVG-Datei. Bei einem Icon-Font müsste hingegen zunächst die Illustrator-Datei angepasst, dann die fünf Icon-Font für alle Browserarten nochmals (auf bisweilen recht umständliche Art) erstellt und distribuiert werden, ohne dass dabei die Kontrolle der Versionierung schon berücksichtigt wird. Die Verwaltung der Icons über SVGs ist somit einfacher und der Bedarf spezieller Font-Software-Lösungen fällt weg. Die Vorteile, die vektorbasierte Icons mit sich bringen, bleiben jedoch erhalten.

Ausblick

Die Verwendung von Responsive SVGs vereinfacht den Einsatz größerer Icon-Sets für Webanwendungen. Auch in der Praxis der App-Entwicklung kann dieses Format eine wichtige Rolle spielen. Wie wichtig, das wird gerade getestet und dann hier veröffentlicht. Bei Iconstorm, wo wir uns täglich mit komplexen Icon-Sets beschäftigen, haben Responsive SVGs für mehr Effizienz gesorgt. Unsere Erfahrungen im Projektalltag teilen wir auf Anfrage gerne.

Gegenüberstellung von Icons als PNG, Font und SVG

++  trifft voll zu
+  trifft zu
o  neutral
-  trifft nicht zu
- -  trifft gar nicht zu

 

 

 

  PNG-Icon (Pixel) Icon-Font (Vektor) SVG-Icon (Vektor)
benötigte Software  Illustrator
 Photoshop
 Illustrator
 Font-Tool
 Font-Konverter
 Illustrator
 Text-Editor
geringer Aufwand für Erstellung Assets + + - - +
einfacher Einsatz auf verschiedenen Plattformen + o o
optimaler Einsatz Web + o +
optimaler Einsatz Web-Apps + - +
optimaler Einsatz Apps + + ?
kurze Ladezeiten - - + + + +
brillante Darstellung auf allen Geräten - - + + +
optimale Darstellung in kleinen Größen + - +
Reaktionsmöglichkeiten auf Retina / Information Density +
(retina.js)
+ + +
gute Stil-Anpassung mit CSS - + + +
einfacher Einsatz von Mehrfarbigkeit + + o + +
gute Kontrolle über Einsatz - o +
Qualitätssicherung / Design Compliance + + + -

 

 

Zurück

Einen Kommentar schreiben