6 redenen om altijd SVG’s te gebruiken op je website

Update: 12 januari 2021

Het is allereerst belangrijk om te vertellen dat SVG’s niet geschikt zijn voor foto’s. Afbeeldingen zijn namelijk opgebouwd uit pixels, waardoor het nooit een schaalbaar vectorbestand kan zijn. Een foto zal altijd een bepaalde kwaliteit hebben, die er bij het groter maken op achteruit zal gaan. Afbeeldingen op je website zullen daarom altijd een JPEG of een PNG zijn. Een PNG kan gebruikt worden voor afbeeldingen met een transparante achtergrond, een JPEG zal daarentegen altijd een achtergrondkleur hebben. Alle bestanden die door een ontwerper in een ontwerpprogramma (bijvoorbeeld Adobe Illustrator) zijn gemaakt, kunnen in principe als SVG worden geëxporteerd en gebruikt. Het eerste bestand dat je als SVG zou kunnen gebruiken is het logo, dat nu nog vaak door bedrijven als JPEG of PNG wordt gebruikt. Andere SVG-bestanden die op een website geplaatst kunnen worden zijn iconen, illustraties en infographics.

Waar een JPEG- of PNG-bestand uit pixels is opgebouwd, is een SVG een zogenaamd vector graphic bestand. Dit betekent dat je een SVG zo groot kan maken als je wil, zonder dat er kwaliteit verloren gaat. Mensen zijn steeds meer gewend dat een website er op alle verschillende schermen even strak uit ziet, en SVG’s kunnen daar door hun hoge kwaliteit aan bijdragen. Bij het gebruik van SVG’s voorkom je dat bijvoorbeeld jouw logo er korrelig uitziet op een retina-scherm (hoge resolutie). Retina (2K of 4K) is steeds meer de standaard, waardoor een standaardafbeelding er al snel op achteruit gaat wat betreft kwaliteit. Hieronder kun je goed het verschil zien tussen een SVG en een pixelbestand.

Een groot voordeel ten opzichte van pixelbestanden is dat SVG’s een stuk minder geheugen vragen. Normale afbeeldingen moeten zo groot worden toegevoegd dat ze er ook op grote schermen goed uitzien. Voor retina-schermen betekent dit dat afbeeldingen @2x of @4x zo groot moeten worden gebruikt om in goede kwaliteit weergegeven te worden, maar dat vraagt nog meer ruimte op jouw website. Browsers als Google Chrome en Safari moeten namelijk grotere bestanden downloaden, wat tot gevolg heeft dat een website minder snel wordt. Zoals je net hopelijk hebt getest, is een SVG altijd schaalbaar, hoe ver je ook inzoomt of hoe groot je deze ook weergeeft. Dit zorgt ervoor dat je altijd kleine bestanden kan uploaden, waardoor jouw website altijd goed en snel blijft presteren.

SVG’s worden door developers toegevoegd aan de code van een website, de HTML. Zij zetten de graphic om in makkelijk aanpasbare code. Behalve HTML kan dit ook met CSS worden gedaan, een andere codetaal die bepaalt hoe jouw website eruit ziet. In het CSS-bestand worden bijvoorbeeld de kleuren en de lettertypes van de website bepaald. Wanneer je een SVG-bestand toevoegt aan de code van een website is deze heel eenvoudig te stylen. Zo kun je op een specifieke pagina onder andere de kleur van de graphic aanpassen. Dat kan bijvoorbeeld handig zijn als je het logo in kleur hebt toegevoegd aan de website, maar je ‘m ergens op een pagina in het wit wil tonen.

Naast het stylen van een SVG kun je ze ook animeren. Door zogenaamde CSS transities toe te voegen, kun je een stilstaande SVG beweging geven. Animaties kunnen bijdragen aan de ervaring van de website gebruiker. Zo kan je visueel (nog) beter dingen uitleggen of kan je ergens de aandacht mee trekken. Een statische website komt in 2021 niet heel vaak meer voor. Heb je ons logo al gezien bovenaan onze website? We hebben met CSS een subtiele animatie toegevoegd om meer gevoel in het logo te krijgen.

Een veel voorkomende vraag bij het gebruik van SVG’s is: maar wordt-ie wel overal goed weergegeven? Ja, bijna altijd, want 99% van de browsers ondersteunt dit bestandstype. Alleen de oudste versies van Internet Explorer ondersteunen een SVG niet, zorg er daarom in ieder geval voor dat je de nieuwste versie van deze browser gebruikt. Bij andere browsers als Chrome, FireFox, Safari en Edge zal een SVG altijd ondersteund worden. Dit zijn dan ook de browsers waarvoor wij alle websites optimaliseren; zo kunnen we ervan uitgaan dat het plaatsen van SVG’s niet voor problemen zullen zorgen, maar dat we de kwaliteit van jouw website er juist mee naar een hoger niveau tillen.