SVG animeren met CSS en SMIL

De techniek met stroke-dasharray en stroke-dashoffset simuleert het tekenen van een path: stel dasharray gelijk aan de padlengte, stel dashoffset in op de padlengte (onzichtbaar) en animeer dashoffset vervolgens naar 0. De lijn lijkt dan van het begin tot het einde te worden getekend.

path.getTotalLength() geeft de lengte van path terug in SVG-gebruikerseenheden. Gebruik deze waarde voor zowel stroke-dasharray als de aanvankelijke stroke-dashoffset. Zo werkt de animatie correct, ongeacht de complexiteit of lengte van path.

Moderne browsers ondersteunen CSS transform op SVG-elementen. transform-origin staat bij SVG-elementen standaard op de linkerbovenhoek van de SVG, niet op het midden van het element zoals bij HTML. Geef transform-box: fill-box op om transform-origin relatief aan de begrenzende box van het element te maken.

SMIL (Synchronized Multimedia Integration Language) is het ingebouwde animatiesysteem van SVG. Het animate-element wijzigt attribuutwaarden in de loop van de tijd. Voor SMIL zijn JavaScript of CSS niet nodig: animaties zijn volledig declaratief binnen de SVG-opmaak.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> draait een element rond een opgegeven middelpunt met SMIL-syntaxis.

<animateMotion> verplaatst een element langs een SVG-pad. Verwijs naar een path met mpath of voeg path-gegevens inline toe. Het element volgt de kromme van het path automatisch — handig voor complexe bewegingspaden zonder handmatige berekening van coördinaten.

CSS-animaties: worden ondersteund in alle moderne browsers, zijn geïntegreerd in de CSS-cascade en zijn eenvoudiger via JavaScript te besturen (pauzeren, omkeren). SMIL: staat zelfstandig in de SVG-opmaak, werkt in statische SVG-bestanden zonder toegang tot CSS en is declaratief en expressief voor animaties die een pad volgen.

Animeer tussen twee path-vormen: de paths moeten hetzelfde aantal opdrachten en een compatibele structuur hebben. De CSS-animatie animeert de eigenschap d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } voor ingebouwde CSS-vormovergangen van paths.

Voeg de mediaquery prefers-reduced-motion toe om SVG-animaties uit te schakelen of eenvoudiger te maken voor gebruikers die beweging onprettig vinden. Decoratieve animaties moeten volledig worden uitgeschakeld; betekenisvolle animaties, zoals laadstatussen, moeten worden vereenvoudigd in plaats van gestopt.

SVG-animatie gebruikt CSS-overgangen en keyframes voor effecten op basis van eigenschappen, de techniek met stroke-dasharray en stroke-dashoffset voor het tekenen van paths, SMIL animate/animateTransform/animateMotion voor declaratieve animatie in SVG en prefers-reduced-motion voor toegankelijkheid. CSS en SMIL vullen elkaar aan: kies op basis van de vraag of de SVG integratie met de CSS-cascade of zelfstandig gebruik in SVG-bestanden nodig heeft.