Iconisch

Door Iain van der Wiel, front-end developer
22 augustus 2014 - 2501 x bekeken - Categorieën: Kennis

Het web en iconen. Onlosmakelijk met elkaar verbonden. Maar met de snelle ontwikkeling die het web ondergaat, ontstaan er steeds meer mogelijkheden voor het tonen van iconen.

Die goede oude tijd

Iconen zijn altijd aanwezig in ons leven. Op verkeersborden, apparatuur die we bedienen en zo ook op het web. Wie herinnert het zich niet, de draaiende apenstaartjes, de openklappende envelopjes of de vele varianten op de ‘under constuction’ bordjes? Dat waren de icoontjes van de goede oude tijd.

Rotating at small      

 

Sprite, maar niet om te drinken

Het toepassen van icons op het web heeft in de afgelopen jaren verschillende vormen aangenomen. Van losse afbeeldingen, naar sprites, naar icon fonts. Nu is er ook een nieuwe techniek die al een tijd ondersteund wordt op het web, maar nog nauwelijks gebruikt wordt. Die techniek heet SVG, oftewel Scalable Vector Graphics.

Met de komst van het artikel ‘Sprites’ op de website ‘A list apart’ werden CSS sprites tot de massa geïntroduceerd. Spriting is al een paar decennia oude techniek welke vooral in de 2D spelletjes van vroeger werd gebruikt. Denk bijvoorbeeld aan Mario. De verschillende loop- en springanimaties bestonden uit een serie losse afbeeldingen die om de beurt werden getoond om de illusie van beweging op te wekken.

Met de komst van CSS op het web konden we deze techniek ook op het web gaan toepassen. We voegen een aantal plaatjes samen in een grid tot 1 afbeelding, waarna we met CSS de gewenste afbeelding eruit konden pikken om te tonen. Dit scheelde een enorm lading verzoeken richting de server. In plaats van 30 verzoeken voor 30 verschillende plaatjes, konden we dit verkleinen naar 1 verzoek voor de sprite, waar alle 30 afbeeldingen al in verwerkt zaten.

Roger, Roger. What's our vector, Victor?

Met de komst van vectorafbeeldingen kunnen we een paar beperkingen van rasterafbeeldingen achter ons laten. Vectoren zijn niets meer dan een aantal lijnen of vormen die dan samen een afbeelding of icoon vormen. Het grote voordeel van deze lijnen is dat ze onbeperkt op te schalen zijn qua grootte, zodat het formaat dat de afbeelding moet zijn geen beperking meer vormt. Een groot voordeel hiervan is dat we ook geen grotere afbeeldingen meer nodig hebben voor bijvoorbeeld de Retina schermen van tegenwoordig.

Icon fonts

Nu komen vectoren in verschillende vormen voor. Zo ook de letters van de teksten op onze websites. Maar ook lettertypes kunnen een vorm van vectorafbeeldingen zijn.

Denk maar aan het Wingdings lettertype, een heel lettertype vol met icoontjes. Wingdings was waarschijnlijk een van de eerste echte icon fonts. Wingdings werd alleen (misschien wel gelukkig) niet tot nauwelijks gebruikt op het web.

Met de komst van @font-face op het web kwam daar redelijk snel verandering in. Ontwikkelaars konden nu hun eigen lettertypes gebruiken in plaats van de gangbare ‘web safe fonts’. Aangezien de inhoud van lettertypes niet beperkt is tot het weergeven van alleen tekst, waren er ontwikkelaars die dus kleine afbeeldingen en icoontjes gingen omzetten naar lettertypes. Zo waren de eerste icon fonts geboren. Hiermee waren in één keer een hoop problemen opgelost, waaronder het kunnen vergroten van de iconen zonder verlies van kwaliteit. Alleen maar voordelen. Toch?

SVG

Helaas. Ook voor icon fonts is het niet allemaal koek en ei. Het grote nadeel van icoontjes als lettertype tonen, is dat lettertypes in verschillende browsers en besturingssystemen anders getoond worden. Problemen als uitlijning, kartelrandjes en andere rare problemen zorgen ervoor dat ook icon fonts geen heilige graal zijn. Maar met de komst van SVG is daar verandering in gekomen. Dit relatief nieuwe bestandsformaat wordt sinds een tijd al ondersteund op het web en is eigenlijk de ideale kandidaat om de oudere technieken te vervangen. Je vraagt waarom? Hier een aantal voordelen:

  • Net als lettertypes zijn ze oneindig te vergroten en verkleinen;
  • Vector iconen kunnen meerdere kleuren bevatten in tegenstelling tot icon fonts, deze kunnen maar uit 1 kleur bestaan;
  • Het tonen van een SVG is niet onder invloed van de weergave van lettertypes van het besturingssysteem;
  • Ook hebben SVG’s geen last van CSS eigenschappen als font-weight, font-style, line-height, etc.;
  • Via CSS kunnen we veel meer stijlen toepassen op de SVG afbeelding dan mogelijk is met een icon font;
  • SVG’s kunnen zelfs geanimeerd worden met CSS en Javascript;
  • En misschien wel het grootste en tevens minst bekende voordeel: ze worden goed ondersteund over de verschillende platforms.

Hieronder vergelijk ik sprites, icon fonts en SVG’s binnen een aantal belangrijke gebieden.

Bestandsgrootte

Qua bestandsgrootte is er niet een gigantisch voordeel te winnen wanneer de iconen maar een paar kleuren bevatten. Maar als er verlopen en schaduwen in de afbeeldingen zijn verwerkt, is er wel snel winst te boeken.

Wanneer er een 64x64 pixels PNG fallback wordt gebruikt, wint SVG het al van een PNG sprite. Met maar een paar iconen wordt het verschil al gauw 18% kleiner voor SVG. Icon fonts zijn over het algemeen iets kleiner, maar daar moeten weer meerdere bestandsformaten van ingeladen worden omdat geen enkel formaat door alle browsers wordt ondersteund.

Zeker wanneer je verschillende kleurvarianten nodig hebt van verschillende iconen, loopt het voordeel voor SVG en icon fonts nog verder op. SVG en icon fonts kun je van kleur veranderen met CSS, voor PNG’s heb je verschillend gekleurde afbeeldingen nodig.

dest

PNG: 18KB



dest

SVG: 13KB



dest

Icon font:
- EOT: 6KB
- SVG font: 15KB
- TTF: 6KB
- WOFF: 4KB

Beeldkwaliteit

Qua beeldkwaliteit is er op de kleinere formaten niet heel veel verschil, al toont bijvoorbeeld Windows Phone 8 een verkleinde PNG een stuk slechter dan een verkleinde SVG. Pas wanneer we formaten groter dan het PNG fallback formaat willen hebben, heeft SVG een duidelijk voordeel ten opzichte van PNG. SVG blijft scherp, terwijl PNG wazig wordt en kartelrandjes begint te vertonen. Icon fonts blijven, net als SVG, scherper op grotere formaten. Voor schermen met hogere resoluties zijn opeens geen grotere iconen meer nodig, 1 SVG voldoet voor alle schermen.

PNG fallback op 128x128

SVG op 128x128

Browser support

PNG wordt al sinds IE7 goed ondersteund, terwijl SVG pas sinds IE9 goed wordt ondersteund. Het browseraandeel van IE8 en lager is tegenwoordig al zo laag dat we SVG veilig kunnen gebruiken en via polyfill een PNG fallback kunnen serveren voor oudere IE versies.

Het enige probleem dat IE nog heeft, is het kunnen gebruiken van externe SVG afbeeldingen. Ook daar kunnen we dezelfde polyfill voor gebruiken. Deze polyfill haalt voor IE8 de PNG variant op door de url naar de SVG te vervangen door een PNG fallback url. Voor IE9+ wordt de externe SVG met AJAX opgehaald en deze in de pagina ingeladen. Hierdoor blijft de SVG nog steeds cachable voor de browser en hebben we ook in IE9+ alle voordelen van SVG.

Icon fonts in de vorm van @font-face worden sinds IE4 al ondersteund in de vorm van het .EOT formaat. Firefox, Chrome, Safari en verschillende mobiele browsers ondersteunen @font-face ook al goed. Het nadeel van @font-face is dat er een aantal verschillende concurrerende formaten zijn, zoals WOFF, TTF en EOT. Er is geen enkel formaat dat door alle browsers even goed ondersteund wordt, dus moet er altijd een combinatie van deze formaten voorgeschoteld worden. Ook hebben verschillende browsers rare quirks in sommige situaties waardoor icon fonts niet altijd betrouwbaar getoond worden.

Toegankelijkheid

Afbeeldingen zijn altijd al aardig toegankelijk geweest voor mensen met een handicap, mits er een correcte beschrijving wordt geplaatst het alt attribuut. Dit alt attribuut wordt kan dan opgelezen worden door een screenreader als NVDA of Apple’s VoiceOver.

Icon fonts daarentegen worden vaak in nietszeggende elementen geplaatst, zoals <i> of <span>, welke wel voorzien kunnen worden van een title tag, maar dit geeft dan ook een tooltip bij een hover met je muis, wat vaak weer niet gewenst is. Ook screenreaders kunnen niet altijd goed overweg met icon fonts waardoor het oplezen van deze iconen niet altijd gebeurt of dat er rare tekens genoemd worden.

Omdat SVG ook een afbeelding formaat is, is deze ook goed accessible. Ik durf zelfs te beweren dat SVG’s beter toegankelijk kunnen zijn dan afbeeldingen, omdat SVG’s onder andere een <title>, <desc> en <metadata> element kunnen bevatten waarin beschreven kan worden wat de afbeelding inhoudt.

Resources

Een lijstje met nuttige SVG resources komt ook altijd wel van pas. Gelukkig heeft Chris Coyier van CSS-Tricks.com al een hoop onderzoek in SVG gestoken en een handige lijst gemaakt.

De testcase die ik heb gemaakt voor dit artikel kan je ook downloaden. Deze is gebaseerd op een aantal Grunt tasks welke SVG icons samenvoegt tot een SVG sprite en van de SVG icons ook PNG fallbacks maakt.

Conclusie

SVG’s zijn klaar voor gebruik. Dit zijn ze al een tijdje, maar ook wij zijn inmiddels overtuigd van de kracht van SVG’s en gaan deze in de toekomst zeker inzetten. SVG afbeeldingen lossen een aantal nadelen van PNG’s en icon fonts op, waardoor dit een ideale kandidaat is om in te zetten als nieuwe techniek.

Constamed in de race voor Accenture Innovation Award!

Door E-sites

Na het winnen van de Health App Award en de nominatie voor een Dutch Interactive Award, is Constamed nu in de race voor een Accenture Innovation… - Lees meer

Lees verder