Een introductie tot SVG

De tijden van Flash liggen lang achter ons. En dat is maar goed ook! Flash, en nog erger: JAVA-applets, vreet geheugen – en batterijen – en liet een browser vroeger steevast vastlopen. Gelukkig gaan steeds meer browsers steeds sneller mee met hun tijd: we kunnen nu animaties realiseren waar we vroeger enkel die lompe tools voor konden inzetten. Met SVG-graphics en -animaties wordt het een stuk eenvoudiger om op zowel desktop als mobiele devices vernieuwende user interfaces op te zetten, die net even dat beetje extra hebben. Met dit artikel wil ik je kennis laten maken met SVG, wat is het en welke voordelen het met zich meebrengt.

Snel laden van webpagina levert geld op

Met een instabiel WiFi-netwerkje of goedkoop 3G-abonnement, moet je er niet aan denken dat je onderweg een restaurant zoekt waarvan de eigenaar dacht dat het wel allemaal wat hipper kon. Flash-websites zijn niet meer van deze tijd. En animatie-bibliotheken gebaseerd op Javascript, zoals jQuery, hebben nu de overhand. Zo ben je al snel enkele MB’s door je databundel heen, om een website te zien die niet eens in je mobiele browser past. Vrijwel alle browsers ondersteunen Javascript, maar nu is er ook de noodzaak om dit snel en efficiënt in te laden. Om te voorkomen dat je niet lang hoeft te wachten tot de pagina laadt. Dat levert zelfs geld op: grote webwinkels doen er alles aan om hun laadtijden zo laag mogelijk te houden.

Afbeeldingen en (Flash-)video’s bepalen deels de laadtijd van een pagina. Er zijn niet voor niets regels voor banners (nog vaak in Flash gemaakt!) die voorschrijven dat ze niet boven de 60kb mogen uitkomen. Reclame op je website mag dan geld opleveren: een trage pagina als gevolg van zo’n banner kan niet de bedoeling zijn. Volgens een onderzoek kan het een webwinkel die dagelijks 100.000 euro omzet draait, zelfs 2.500.000 euro per jaar kosten wanneer de website één seconde trager binnenkomt. Geen wonder dat de nieuwste technieken gericht zijn op een zo laag mogelijke impact voor je browser!

Tijd voor vectoren op het web

Eén van deze technieken is SVG. Het zit hem al in de naam: Scalable Vector Graphics zijn vectoren in plaats van pixels, waardoor de laadtijd direct drastisch wordt verminderd. Vectoren werken met wiskundige berekeningen om te bepalen waar een bepaalde lijn, cirkel of object staat ten opzichte van een vlak (grid). Doordat die berekeningen eigenlijk niets meer dan tekst (code) zijn, zal een browser veel sneller overweg kunnen met een vector-bestand dan met een gewone afbeelding (zoals JPEG, PNG). Een SVG-bestand kan dan ook in elke tekst-editor worden geschreven en is relatief gemakkelijk te begrijpen en aan te passen. SVG wordt al sinds 1999 door het W3C ontwikkeld en vindt de afgelopen jaren zijn weg naar het web, omdat grote browsers het zijn gaan ondersteunen. En daar speelt een aantal web ontwikkelaars weer handig op in, door bijvoorbeeld Javascript plug-ins te bouwen die SVG-bestanden kunnen genereren en manipuleren.

Scalable Vector Graphics zijn vectoren in plaats van pixels, waardoor de laadtijd direct drastisch wordt verminderd.

Daarbij wordt gebruik gemaakt van CSS, wat elke web ontwikkelaar toch al gebruikt. Terwijl een afbeelding gebaseerd op pixels ‘vast’ is en hooguit met CSS in grootte en plaatsing op de pagina is te manipuleren, is SVG volledig aanpasbaar met CSS. Wanneer je een gewone afbeelding groter schaalt, zal deze kwaliteit verliezen (vager worden), maar met vectoren heb je dat probleem niet. Zo zal een afbeelding altijd scherp en helder op het beeld verschijnen, hoe groot of hoe klein je deze ook schaalt. Ideaal voor iconen of elementen in interfaces die een responsive design hebben, waarbij op het ene scherm een andere grootte getoond moet worden dan op het andere (mobiele) scherm. Toch moet er ook meteen bij worden gezegd dat SVG nog zeker geen vervanging kan zijn voor pixel-afbeeldingen. De graphics die je met SVG kunt bereiken zijn vaak eenvoudig en in een ‘tekenstijl’ die niet in de buurt komen van een gedetailleerde foto. In theorie zou je dat overigens wel kunnen bereiken, maar dan definieer je nog steeds elke pixel individueel, waardoor de SVG-afbeelding een enorme hoeveelheid code bevat. Niet erg efficiënt.

De graphics op de website Love Notes van Spotify zijn grotendeels met SVG gerealiseerd.

SVG code is te indexeren door Google

SVG is gebaseerd op de taal XML. Een hiërarchische structuur van leesbare code ‘vertelt’ de browser waar, welk element moet komen te staan ten opzichte van het gedefinieerde grid. Dat grid is schaalbaar en daarmee schalen de vectoren die zijn getekend ook mee. Elke lijn in de graphic kan worden veranderd van positie met CSS. Zo kun je gave animaties creëren. Er zijn al talloze prachtige websites ontwikkeld met SVG-animaties, die we tot tien jaar geleden alleen met Flash of Javascript konden realiseren. Een van de pluspunten van SVG is bovendien dat de code te indexeren is door zoekmachines als Google. Een zoekmachine kan dus ‘uitlezen’ wat er in de afbeelding staat, wanneer je dit met leesbare tekst definieert. Ook niet geheel onbelangrijk: SVG’s kunnen in elke resolutie worden geprint en zijn niet afhankelijk van type beeldscherm, zoals retina-schermen. JPG-afbeeldingen die niet geschikt zijn voor schermen met een hogere ‘pixeldiepte’ kunnen problemen opleveren, maar SVG zal, mits correct ingesloten in de webpagina, meeschalen en er altijd goed uitzien.

Ook niet geheel onbelangrijk: SVG’s kunnen in elke resolutie worden geprint en zijn niet afhankelijk van type beeldscherm.”

Ideaal voor iconen dus, maar je kunt gerust verder gaan dan dat. JavaScript, de meestgebruikte scripttaal voor het web, maakt onbeperkte functionaliteit mogelijk voor een SVG-bestand. Vloeiende animaties worden mogelijk, die resulteren in de meest prachtige websites. SVG’s kunnen zelfs filters en effecten bevatten, zoals slagschaduwen en vervaging. Om de eigenschappen van elementen binnen een SVG (zoals simpele rechthoeken en cirkels, maar ook paden en polygonen) te bewerken zijn er verschillende Javascript-bibliotheken gemaakt. Met SVG.js bijvoorbeeld, waarmee je nieuwe elementen kunt aanmaken en manipuleren in je webpagina. In een volgend artikel vertel ik daar meer over!

SVG in een pagina laden – in elke browser?

SVG-bestanden kun je op verschillende manieren in je pagina laden. Het is goed mogelijk om een SVG als .svg-bestand op je webserver op te slaan en toe te voegen aan het HTML code met een -tag, zoals je gewend bent voor ‘gewone’ pixelafbeeldingen:

<img src="ambrero.svg" alt="Ambrero logo">

Dit werkt niet in Internet Explorer 8 en lager of Android 2.3 en lager. Dat geldt ook voor het implementeren van een .svg-bestand als achtergrond in CSS-code, zoals je hieronder kunt zien. Ben je gewend om met CSS te werken, dan is dit een gemakkelijke implementatie, zoals je met normale achtergrondafbeeldingen zou doen.

.logo { background: url(ambrero.svg); }

Als je een website of applicatie maakt voor een doelgroep die deze verouderde browsers niet meer gebruikt, dan kun je rustig SVG inzetten. In CSS kun je de eigenschappen van een SVG eenvoudig manipuleren. Een andere mogelijkheid is de SVG direct in je HTML-code te zetten:

<svg height="100" width="100"> <circle cx="40" cy="40" r="40" /> </svg>

In het bovenstaande voorbeeld zie je dat er een cirkel getekend wordt door middel van een stuk zeer leesbare code. Als je gewend bent met HTML te werken, is deze code vast helder. In het volgende artikel vertel ik je meer over de verschillende elementen binnen een SVG.

Het hangt vooral af van je eigen voorkeur hoe je SVG’s in de pagina wilt laden. De voor- en nadelen van verschillende implementaties kun je lezen op deze pagina. Je kunt er vanuit gaan dat de moderne browsers allemaal SVG ondersteunen. Dat is fijn, want het resulteert in een mooier web. SVG draagt met de simpele structuur bij aan de trend die een aantal jaar geleden is ingezet om applicaties eenvoudig en helder te houden. Iconen worden scherper, knoppen worden interactiever en pagina’s laden sneller. Onafhankelijk van je scherm of resolutie, door gebruik te maken van vectoren in plaats van pixels, is SVG een goede optie om je website net wat meer stijl te geven!

SVG voor gevorderden

In een volgend artikel ga ik dieper in op het implementeren van SVG-bestanden in je pagina. Je kunt tot die tijd meer lezen over SVG via de volgende links:

De SVG-specificatie van het W3C
Een introductie over SVG op About.com
SVG maken en exporteren vanuit Adobe Illustrator