Met je website écht de aandacht trekken? Gebruik nieuwe technieken voor impact en optimale gebruikerservaring. Eén van de mogelijkheden is SVG en SVG-animaties. In deze blog geef ik je alle ins en outs over deze technologie en wat je er voor je website mee kunt bereiken.
SVG … nooit van gehoord ?
De begrippen JPG en PNG zijn bij vrijwel iedereen bekend als afbeeldingsbestanden. Grote kans dat je nog nooit eerder gehoord hebt van SVG’s, scalable vector graphics. Ook SVG is een afbeeldingsbestand, maar dan wel een bijzonder bestandsformaat. Afbeeldingen in JPG en PNG worden in pixels opgebouwd. Voor een foto kan dit ook niet anders. Een groot nadeel van foto’s is dat het vaak om grote bestanden gaat. Daarnaast gaat bij verkleining voor gebruik op het web de kwaliteit achteruit. Een vergroting ziet er al helemaal niet uit: lekker pixelig! Voor bedrijfslogo’s of andere illustraties geldt dit niet als ze zijn opgebouwd als vectorbestand, een EPS. Een vectorbestand bestaat uit punten, lijnen en vormen. Dit betekent dat de afbeelding geschaald kan worden zonder aan kwaliteit in te boeten.
Vormgeving en techniek bij elkaar: SVG op web
Nu vormgeving en techniek steeds dichter bij elkaar komen, kunnen we EPS-bestanden omzetten naar SVG-bestanden. Een SVG is in die zin een gecodeerd EPS-bestand, dat je makkelijk op je website kunt toevoegen. En dat heeft voordelen voor je website en de gebruikerservaring ervan!
Het gemak van SVG-bestanden:
- Bij verkleinen of vergroten wordt de kwaliteit van de afbeelding behouden
- De bestanden zijn flink kleiner dan JPG’s en PNG’s
- Het is zowel aan te passen in een grafisch programma als Illustrator, maar ook in een tekstbewerker; het bestand bestaat uit code
- En omdat het bestand uit code bestaat, is het makkelijk aan te passen, bijvoorbeeld met een kleuraanpassing
Een schaalbare SVG is net dat beetje extra dat een responsive website nodig heeft. Je weet zeker dat je logo of illustratie er op elk (mobiel) apparaat goed en helder uit ziet.
SVG-animaties
Naast het voordeel van kwaliteit en compact formaat, levert SVG nog een voordeel op. Omdat het uit code bestaat, kunnen we het met verschillende programmeertalen, zoals CSS en Javascript, animeren. Denk bijvoorbeeld aan het meegeven van effecten aan je logo of andere illustraties op je website. SVG-animaties geven je bezoekers een geheel nieuwe kijk op je website en voegen waarde toe aan de gebruikerservaring van je website.
Toffe SVG-animaties (vinden wij ?)
Meer weten over SVG-animaties voor de gebruikerservaring van je website? De koffie staat altijd klaar! Neem contact op.
