SVG, misschien nog een vrij onbekende term voor u, toch is het een term die we naar mijn inziens steeds vaker zullen horen. SVG staat voor Scalable Vector Graphics. Grafische formaten als jpg en gif werken met pixels, deze afbeeldingen bestaan dus uit punten. Als u deze plaatjes vergroot begint u deze pixels erg duidelijk te zien. Het plaatje wordt korrelig. SVG afbeeldingen worden op een hele andere manier samengesteld. De plaatjes worden niet als puntjes in het geheugen opgeslagen maar er wordt gekeken naar de lijnen waaruit de tekening is opgebouwd. Als zo’n afbeelding wordt vergroot komen deze punten verder uit elkaar te liggen, maar dit maakt voor de opbouw van de tekening niet uit. Er wordt gewoon een nieuwe lijn tussen de punten getrokken en het vlak wordt weer met de juiste kleur opgevuld. U krijgt een nieuwe haarscherpe afbeelding. Vector afbeeldingen zijn alleen geschikt voor niet al te gedetailleerde tekeningen zoals logo’s en grafische ontwerpen. In dure programma’s als Flash en Illustrator kunnen vector afbeeldingen gemaakt worden.
SVG en je browser
Het is tegenwoordig mogelijk om SVG realtime op uw website te gebruiken. Tot op heden werd er weinig gebruik van gemaakt maar hier lijkt verandering in te komen. Op moment van schrijven heeft zo’n 12,2 procent de SVG-plugin geïnstalleerd. Met komst van Inline-SVG hoeven mensen echter niet meer deze plugin te installeren omdat deze direct in de browser geïntegreerd zit.
Hoe werkt SVG en wat kunt u ermee?
In het eerste stuk van dit artikel heb ik al enigszins beschreven wat SVG inhoudt, hier heb ik echter alleen gezegd dat SVG met vectorafbeeldingen werkt en daarmee is niet alles gezegd. SVG is een XML-opmaaktaal die gebruikt wordt om tweedimensionale vectorafbeeldingen te beschrijven. Dit betekent dat zo’n bestand alleen maar uit tekst bestand. De afbeelding wordt aan de hand van tekstuele gegevens opgebouwd, er komt geen pixel bij kijken. Dit soort afbeeldingen maakt gebruik van geometrische primitieven zoals punten, lijnen, curven en polygonen. Een SVG afbeelding kunt u vervolgens in een (X)HTML document zetten. Vroeger was het niet mogelijk om dit volgens de W3C standaarden te doen maar met behulp van de browsers met geïntegreerde ondersteuning wel. Interactieve grafieken of de uitslagen van een poll kunnen op een grafische manier worden weergegeven door middel van SVG.