You are here

Wegwijs in SVG-land

Development

Als designers & developers streven we ernaar om alles wat op onze websites verschijnt zo mooi en scherp mogelijk aan te bieden op alle schermen en devices, maar we willen ook de filesize binnen de perken houden. Wat iconen, logos en illustraties betreft, is er eigenlijk maar één goeie manier om aan deze verwachtingen te voldoen - SVG.

In deze reeks artikels overlopen we de basics van SVG’s gebruiken op een website.

SVG logo

Over SVG

Scalable Vector Graphics is een XML gebaseerd bestandsformaat voor 2-dimensionale vector afbeeldingen. SVG biedt verschillende mogelijkheden om animaties en interactiviteit toe te voegen aan de afbeelding. Een SVG-afbeelding kan met code (CSS & Javascript) gemanipuleerd worden en dat maakt het een veel krachtiger formaat dan JPG of PNG.

Waar JPG, PNG en GIF zich baseren op een pixel-raster, wordt SVG opgebouwd uit vectoren. Een SVG-bestand ziet er uit als een XML-bestand, waarin de vectortekening wordt beschreven. Omdat vectoren wiskundig berekende lijnen zijn, zal een SVG afbeelding op alle groottes scherp worden getoond.