Animeren van SVG

Doordat bijna alle browsers inmiddels SVG ondersteunen is deze techniek razendsnel terrein aan het winnen. SVG is een vector formaat voor het web. Het grote voordeel van SVG is dat zo’n afbeelding op alle resoluties scherp zal zijn. Je hoeft dus bijvoorbeeld geen rekening te houden met retina schermen. Daarnaast biedt SVG nog een groot voordeel. SVG bestanden kan je animeren.

Je kan een SVG op drie manieren animeren, namelijk via HTML, CSS of javascript. In deze blog wil ik deze drie methodes in het kort behandelen.

HTML

Om met HTML een SVG te kunnen animeren kan je gebruik maken van de inline SVG syntax. Dat betekent dat je de XML code direct aan je HTML toevoegt. Vervolgens kan je bepaalde onderdelen van de SVG laten animeren volgens het SMIL principe. SMIL staat voor Synchronized Multimedia Integration Language en biedt functies om animaties toe te passen. Hiervoor kan je de animate tag gebruiken. Dat betekent dat je binnen een path in het SVG bestand de animate tag moet aanroepen. Dat werkt als volgt:

<animate attributeName="fill" dur="500ms" from="blue" to="red">

De attribuateName geeft aan voor welk attribuut de animatie uitgevoerd moet worden. Je kan hier elke attribute uit de path gebruiken. De from en to attributen zijn bedoeld voor de status van het begin en het eind van de animatie. Met dur kan je de lengte van de animatie bepalen. Op de developer site van Mozilla is meer informatie over deze functionaliteit te vinden.

CSS

Het animeren van een SVG via CSS werkt hetzelfde zoals je een ander HTML element zou animeren. Door een onderdeel (path) van de SVG een class of een ID te geven, kan je deze vervolgens aanroepen in CSS.

.element {
animation: move 2s infinite;
}

@keyframes move {
to {
transform: translateX(200px);
}
}

Hiermee kan je een bepaald element binnen je SVG bestand animeren. Je kan hier alle beschikbare CSS animatie selectors voor gebruiken. Zo kan je een element een ander kleur geven, laten draaien, vergroten, verkleinen, etc.

Javascript

De javascript methode is de meeste flexibele en uitgebreide oplossing. Javascript biedt namelijk allerlei extra mogelijkheden en functies die met HTML en CSS niet mogelijk zijn. Er zijn een aantal javascript libraries die het erg eenvoudig maken om met SVG’s te werken. Eén van deze libraries is Snap.svg. Snap biedt allerlei handige functies waarmee je een SVG kunt animeren. Het werkt erg eenvoudig. We plaatsen de SVG in een variable, waar we vervolgens allerlei functies op kunnen uitvoeren. Met onderstaande code geven we een SVG bijvoorbeeld een andere kleur. De animatie duurt in dit geval 2 seconden.

var object = Snap( '#object' );

object.animate( {
fill: 'orange'
}, 2000 );

Op de website van Snap staan een aantal handige voorbeelden om je op weg te helpen.