Icon fonts of SVG-iconen: ready, set, fight!

Icon fonts hebben afbeeldingen vrijwel compleet vervangen als middel om iconen te laten zien op websites. Ze zijn gratis, makkelijk in een website te implementeren en snel aanpasbaar. Maar icon fonts hebben niet meer het monopolie sinds de opkomst van SVG-iconen. Er zijn al veel bedrijven die met deze nieuwe vorm van iconen werken, waaronder wij zelf. Zijn ze ook iets voor jouw website?

Van simpele afbeelding naar wiskundige formule

Iconen zijn tegenwoordig een must op je website en dat is niet zo gek ook. Door lappen tekst samen te vatten in een afbeelding helpen ze bezoekers een pagina sneller te begrijpen. Daarnaast zorgen ze ervoor dat een website er beter uitziet en kunnen ze tekst vervangen als daar geen ruimte voor is. Dit is vooral van belang voor mobiele bezoekers die je website bekijken op een klein scherm. In de mobiele versie van Facebook is bijvoorbeeld het hele tekstmenu vervangen met iconen.

Het is dus erg belangrijk dat iconen er altijd goed uitzien en zichtbaar zijn voor je bezoekers, anders kan het grote impact hebben op de gebruiksvriendelijkheid.

Daarom is men ook afgestapt van afbeeldingen die uit pixels bestaan en daardoor een vast(e) grootte en uiterlijk hebben. Immers, je moet steeds een nieuwe afbeelding maken als je een groter icoon wilt invoegen of de kleur van het icoon wilt veranderen. Dat werkt natuurlijk niet fijn. Bovendien heeft elke internetbrowser de optie om afbeeldingen te verbergen.

De oplossing ligt in icon fonts en SVG-iconen. Deze bestaan niet uit pixels en kunnen daarom met één regel code groter en kleiner gemaakt worden of van kleur worden gewijzigd. Hierdoor zijn ze perfect geschikt als icoon.

Maakt het dan uit welke van de twee je gaat gebruiken voor je website? Zeker, want los van deze overeenkomst zijn er veel verschillen die van invloed kunnen zijn voor je website.

De verschillen tussen deze twee icoonformaten kunnen worden onderverdeeld in 4 groepen:

1. Gebruiksgemak
2. Uiterlijk
3. Toegankelijkheid
4. Prestaties

Onderstaand zal ik elk van deze groepen behandelen.

1. Gebruiksgemak

Icon fonts zijn eigenlijk een lettertype, zoals arial of comic sans. Hierdoor zijn icon fonts makkelijk in gebruik. Je zoekt een lettertype met iconen op en verwijst ernaar op je website. Als je ergens een icoon wilt invoegen, doe je dit met één regel code waarmee je het gewenste icoon oproept. Op de website van Font Awesome (een populair icon font) zie je hoe simpel dit is.

SVG-iconen zijn wiskundige formules die je computer vertellen dat deze een icoon (of iets anders) moet tekenen. Je kunt ze op meerdere manieren in je website implementeren. In dit artikel gaan we ervan uit dat je SVG-iconen direct in de code van de webpagina schrijft, ook wel ‘inline SVG-iconen’ genoemd. Doe je dit niet, dan verlies je veel voordelen die SVG-iconen zo goed maken.

Ook hier is het gebruik ervan een kwestie van code in je webpagina voegen. Maar voor het maken of aanpassen van die code is wel meer kennis vereist dan bij icon fonts.

Winnaar: doordat het makkelijk en snel is om ze op je scherm te toveren, winnen icon fonts het op het gebied van gebruiksgemak.

2. Uiterlijk

Positie

SVG-iconen zullen altijd op de plek staan waar jij ze wilt hebben, bij een icon font kan dit anders zijn. Net als elk ander lettertype heeft een icon font attributen die bepalen hoe een icoon op je scherm verschijnt. Denk hierbij aan line-height, word-spacing en vertical-alignment. Deze attributen kunnen ervoor zorgen dat een icoon net niet op de plek staat waar je hem eigenlijk wilt hebben. Meestal is deze verplaatsing zo nihil dat een bezoeker er vrijwel niets van merkt, tenzij hij heel erg zijn best doet.

Aanpasbaarheid

Een icon font heeft alle aanpasbare mogelijkheden die een normaal lettertype ook heeft. Zo kunnen de grootte en kleur worden aangepast of schaduweffecten worden toegevoegd. Probeer het zelf maar uit. Het enige minpunt is dat het een monochroom icoon blijft. Een andere kleur geven, zorgt ervoor dat het hele icoon die kleur krijgt.

Met SVG-iconen heb je dezelfde mogelijkheden, het verschil is dat je nog verder kunt gaan. Zo kun je onderdelen van een icoon wel makkelijk andere kleuren geven of zelfs animeren. Ook heb je de beschikking tot SVG-filters die een icoon aanzienlijk kunnen veranderen.

Wazig

Sommige internetbrowsers zorgen ervoor dat tekst wat rondere vormen krijgt door de randen iets waziger te maken. Dit gedrag heeft ook invloed op icon fonts. SVG-iconen krijgen deze ‘speciale behandeling’ niet en zullen er daarom altijd scherp uitzien op je scherm.

Winnaar: deze ronde gaat naar SVG-iconen doordat ze meer mogelijkheden bieden om het uiterlijk van een icoon aan te passen en ze er altijd scherp uitzien.

3. Toegankelijkheid

Toegankelijk voor internetbrowsers

Icon fonts en SVG-iconen worden ondersteund door alle desktop-internetbrowsers, behalve Internet Explorer 8. Op mobiel gebied winnen SVG-iconen de strijd voornamelijk omdat ze, in tegenstelling tot icon fonts, wel getoond worden op de populaire mobiele internetbrowser Opera Mini.

De afbeelding hierboven laat zien hoe een icon font verkeerd wordt weergeven in Opera Mini. Al met al is het een klein verschil: SVG-iconen worden ondersteund door 96 procent van de internetbrowsers tegenover 92 procent bij icon fonts.

Toegankelijk voor schermlezers

Een icoon uit een icon font wordt niet overgeslagen door schermlezers. De standaardtekst die bij het icoon hoort, zal daarom worden uitgesproken. Meestal is dit iets onbelangrijks als ‘zwarte ster’, terwijl je eigenlijk favorieten bedoelt.

Met SVG-iconen heb je dit probleem niet, omdat je er zelf een titel en beschrijving aan kunt geven. Een schermlezer zal deze dan oplezen.

Toegankelijk voor mensen met dyslexie

Ook mensen die gebruikmaken van een speciaal lettertype voor dyslexie zullen problemen ondervinden met icon fonts. Een dyslexievriendelijk lettertype vervangt alle andere lettertypen op het scherm, dus ook je icon font. Al je iconen zullen hierdoor veranderen in vierkanten. Aangezien een SVG-icoon geen lettertype is, zal deze wel juist weergeven worden.

Blokkeerextensies

Veel mensen gebruiken tegenwoordig blokkeerextensies in hun internetbrowser om vervelende advertenties te blokkeren. Sommige extensies geven je ook de mogelijkheid om lettertypen te blokkeren, waaronder de iconen in een icon font.

Emoji’s

Elke letter in een lettertype krijgt een speciale code toegewezen, zodat je computer begrijpt wat er op het scherm moet staan. Elk icoon in een iconfont krijgt dit ook. Het kan voorkomen dat het een code toegewezen krijgt die al gebruikt wordt door bijvoorbeeld een emoji, die voorrang kan krijgen. Een grappig voorbeeld is deze beoordeling met 5 sterren. Aangezien SVG-iconen geen lettertype zijn, zal deze situatie nooit voorkomen.

Winnaar: wil je toegankelijk zijn voor zoveel mogelijk internetbrowsers en mensen, dan zijn SVG-iconen de juiste keuze.

4. Prestaties

Bestandgrootte

Het is belangrijk dat de bestandsgrootte van je webpagina klein is zodat deze snel laadt, vooral als je veel mobiele bezoekers hebt. Icon fonts zijn in het algemeen kleiner dan SVG-iconen. Zeker als je met veel iconen werkt, kan het verschil fors zijn.

Caching

Belangrijk is dat een icon font, in tegenstelling tot een ‘inline SVG-icoon’, door een internetbrowser wordt opgeslagen in het geheugen (gecachet). Dit zorgt ervoor dat het icon font op andere pagina’s van je website niet opnieuw gedownload hoeft te worden en de pagina nog sneller laadt.

Externe bestanden

Een derde punt dat van belang kan zijn voor de laadtijd is het aantal bestanden dat je internetbrowser moet downloaden. Bij icon fonts is dit één extern lettertype. Voor SVG-iconen hoeft helemaal niets gedownload worden, omdat alle code die nodig is voor het tekenen van het icoon in de pagina staat. Dit zorgt ervoor dat SVG-iconen altijd direct op je scherm verschijnen, terwijl dit bij icon fonts soms wat vertraging oploopt als je een trage internetverbinding hebt.

Winnaar: het verschil in grootte en de mogelijkheid om opgeslagen te worden door de internetbrowser zorgen ervoor dat icon fonts beter presteren.

Gelijkspel

Zoals je ziet, gaat de strijd gelijk op en zal het afhangen van je voorkeur en technische kennis of je icon fonts of SVG-iconen moet gebruiken voor je website.

Icon fonts zijn makkelijk te implementeren en zijn moeilijk te verslaan als het gaat om prestaties. Op het gebied van uiterlijk en toegankelijkheid scoren ze iets minder goed. Wil je wat meer flexibiliteit en er zeker van zijn dat je iconen er gelikt uitzien op zo veel mogelijk apparaten, dan zijn SVG-iconen de juiste weg om te bewandelen. Hou er wel rekening mee dat er een grotere leercurve nodig is om ze op je scherm te toveren.

Wij zijn in ieder geval erg benieuwd hoe deze tweestrijd zich in de toekomst verder zal ontwikkelen en of SVG-iconen een vervanging van of een alternatief naast icon fonts zullen worden. Wat denk jij?