Wat is een SVG?
SVG staat voor Scalable Vector Graphic. Dit is een XML document waarin staat beschreven waar welke vormen getoond moeten worden. Bijvoorbeeld:
<circle cx="0" cy="20" r="70" fill="#D1495B" />
Deze code zorgt ervoor dat er een rode cirkel op het beeldscherm getekend wordt. Door meerdere vormen en lijnen te combineren kun je complexe 2D afbeeldingen maken.
Hoe maak je een SVG?
Dit kun je op meerdere manieren doen. Als je avontuurlijk bent kun je het in je favoriete code editor beginnen met het typen van een XML document. Ben je wat visueler ingesteld dan kun je pakketten zoals Adobe Illustrator, het open source en gratis Inkscape, Figma of het open source alternatief Penpot gebruiken. Hiermee kun je met een grafische interface een illustratie maken en exporteren als SVG.
SVG optimaliseren
De SVG bestanden die programma's zoals Illustrator, Inktpen en Figma generen zijn niet altijd even netjes. Daarom is het verstandig de SVG te optimaliseren. Dit doe je door gebruik te maken van een van de vele online tools. Chris Coyier maakte hier al eens een mooi overzicht van op CSS tricks. Zelf gebruik ik SVGOMG.
Waar kun je SVG voor gebruiken?
Een SVG is geschikt voor 'simpele' 2D afbeeldingen. Denk aan illustraties of logo's die voornamelijk uit lijnen en vlakken bestaan.
Doordat je SVG's oneindig kan inzoomen zonder kwaliteitsverlies kun je gedetailleerde en complexe afbeeldingen maken die nog steeds goed te bekijken zijn. Daarom zijn SVG's uitermate geschikt voor infographics
Daarnaast lenen SVG's zich ook goed voor interactie. De vlakken en lijnen binnen een SVG afbeelding kun je beinvloeden met CSS en Javascript. Hierdoor kun je ze aanklikbaar maken of bepaalde informatie tonen wanneer een bezoeker met de muis over een vlak heen gaat.
Voorbeelden van interactieve infographics met SVG:
Andere voordelen van SVG's
Zoals ik al heb aangegeven zijn SVG geschikt om te animeren. Hierdoor kunnen SVG's sommige video's vervangen. Het voordeel daarvan is dat SVG kleinere bestanden zijn dan video's. Dit kan soms tientallen megabytes schelen. Dat zorgt voor een snellere en duurzamere website omdat de bezoeker minder data hoeft te downloaden.
Hieronder voorbeelden van geanimeerde SVG's:
- Geanimeerde Credit Cards van Tim Miller op Codepen
- Grote lijst met SVG animaties op Onextrapixel
- SVGator (een tool om SVG's mee te animeren) deelt ook 40+ gave geanimeerde SVG's
Ook gaf ik hierboven aan dat een SVG oneindig ver te vergroten is zonder kwaliteitsverlies. Dit betekent dat je slechts één afbeeldingsbestand hoeft te gebruiken als je wil dat deze op alle schermbreedtes (en dus apparaten) goed zichtbaar is. Wanneer je met raster afbeeldingen (zoals PNG, JPEG of WEBP) werkt, moet je meerdere bestanden en technieken hanteren om de bezoeker op elke schermbreedte een correcte afbeelding te tonen.
Waar kun je SVG beter niet voor gebruiken?
Zodra het gaat om gedetailleerde afbeeldingen zoals foto's van mensen, landschappen, etc. is het beter om een ander bestandsformaat (bijvoorbeeld WEBP) te gebruiken. Een vuistregel die je kan aanhouden is dat alles wat 2D is, gedaan kan worden met een SVG en alles wat 3D is, het beste getoond kan worden met een rasterafbeelding (PNG, JPEG of WEBP).
Overigens zijn er ook uitzonderingen zoals een zeer complexe 2D afbeelding, bijvoorbeeld een topografische kaart, met veel lagen. Hier kunnen de vele vlakken en lijnen ervoor zorgen dat de bestandsgrootte snel oploopt. In dit soort gevallen is het beter om de afbeelding 'plat te slaan' in een rasterafbeelding.
Aan de slag met SVG's?
Hieronder deel ik wat SVG resources die je direct kan gebruiken in je huidige of volgende project:
- SVG Mix: Een verzameling van SVG iconen en logo's
- SVG Hub: SVG kronkels, krabbels, vormen en... andere dingen
- Flowbite: Gratis en Open Source SVG iconen
Heb je vragen over bovenstaande of heb je zelf nog een goede SVG resources tip? Laat het mij weten door hieronder een reactie achter te laten.