Blog

Wat zijn SVG-animaties en wat kun je ermee?

BEELDKRACHT
2 min

Van JPG-bestanden heb je vast wel eens gehoord, maar de kans is groot dat SVG-bestanden nieuw voor je zijn. Voor ons een goede reden om daar meer over te vertellen, want SVG kent voordelen voor iedere ondernemer met een website.

Brochure aanvragen

SVG is de afkorting van ‘scalable vector graphics’. SVG’s zijn op afbeeldingen en animaties die je kunt aanpassen aan elke beeldschermgrootte zonder dat de grafische kwaliteit ervan verloren gaat. Dit kan gaan om een bedrijfslogo, maar ook om een animatie.


Dit zijn de voordelen van SVG-bestanden ten opzichte van reguliere JPEG-bestanden

  • je kunt ze schalen zonder dat dit van invloed is op de kwaliteit;
  • ze nemen vaak minder ruimte in beslag, wat voorkomt dat je website traag wordt;
  • ze zijn aan te passen met programmeertalen zoals JavaScript en CSS.


Wat een SVG-bestand bovenal uniek maakt, is dat je de grootte ervan kunt aanpassen zonder dat dit ten koste gaat van de kwaliteit. Dit is mogelijk omdat een SVG niet zomaar een tekening is, maar een bestand dat is opgebouwd uit cijfers en tekst.

Hoe wordt een SVG-bestand gemaakt?

SVG’s worden gemaakt met zogenaamde vector graphics editors. Denk hierbij programma’s zoals Adobe Illustrator en Inkscape. Bij BEELDKRACHT maken we echter gebruik van Adobe After Effects. Met de plugin Bodymovin is het namelijk mogelijk om creaties uit After Effects te exporteren als .SVG-bestand. 

Mocht je willen weten hoe een geprogrammeerd SVG-bestand eruitziet, dan kun je hier een klein, interessant voorbeeld vinden.

Benieuwd naar hoe een SVG-animatie er in het wild uitziet? Je kunt er helemaal onderaan deze pagina eentje vinden (hint: klik erop voordat ‘ie wegrijdt!). Binnenkort volgt er een blog waarin ik dieper zal ingaan op hoe deze unieke SVG-animatie is gemaakt.


SVG-bestanden op jouw website?

SVG heeft enkele significante voordelen. Toch is dit bestandsformaat niet in alle gevallen de beste keus. Wij raden aan om SVG hoofdzakelijk te gebruiken voor het maken van iconen, eenvoudige grafieken, animaties en logo’s. 


Wil je meer weten over de mogelijkheden van SVG voor jouw website? En over hoe en waarom wij dit bestandsformaat toepassen voor onze klanten? Neem dan vrijblijvend contact met ons op en wij beantwoorden al je vragen.

Neem contact op

Wat kunnen wij creëren voor jouw budget?

Maak kennis
Elke maand;
content die er toe doet!

Schrijf je in!