SVG permet de réaliser des images animées… en temps réel (par exemple, en fonction de l’évolution du personnage votre jeu web)! Voici quelques exemples de ces animations.

Système stellaire

Vue de haut

Vue de côté

Ces deux exemples précédents reposent sur des astuces visuelles (un “hack de l’interface”). Elles peuvent donc générer des artefacts. Je vous les déconseille donc dans un jeu web réel (non-expérimental). Tournez-vous faire quelque chose de plus simple (pas d’ombrage, voire pas de rotation des objets célestes sur eux-même par exemple).

Brouillard de guerre

Les tags clipPath et mask (cf MDN en anglais) vous permettront respectivement de masquer tout ce qui est hors d’une zone (la zone de visibilité de la carte par exemple) et de rajouter un effet de transition entre la zone visible et la zone à l’intérieur du brouillard de guerre. N’oubliez pas que ce ne sont que des artifices esthétiques: l’essentiel est surtout de n’envoyer au joueur que les cases qu’il peut voir, et les unités qu’il peut y détecter.
Chaque ville du joueur crée une 'bulle' de visibilité
Chaque ville bleue est un “ilot” de visibilité, centre d’un clipPath et d’un mask

Une carte de jeu interactive

Une carte au zoom animé (issue de Dracca): cliquez sur une île pour “zoomer” dessus et sur l’eau pour dézoomer

Afficher une progression le long d’un chemin

Un chemin de randonnée, ou l’avancement d’une troupe le long d’une route, ou la progression d’un poison dans un vaisseau sanguin, etc

Inner glow

Un ombrage intérieur animé en SVG
Un ombrage intérieur avec transparence

Clip-path

Clip-path animé, pour un effet de révélateur

Zoomer sur un élément

Zoomer sur un élément ou un groupe d’éléments SVG

Filtres SVG

Changez la teinte, la saturation et la coloration en général grâce aux filtres SVG

Matrix → RTS

Pour une transform matrix donnée, il existe plusieurs rotate-translate-scale équivalents

Marqueurs le long d’un chemin

Pour placer des marqueurs (réguliers ou non) le long d’une chemin SVG

Play/Replay button

Une animation SVG peut être stoppée et relancée grâce aux attributs de animate

Animation key times/points

KeyTimes et keyPoints permettent de modifier la vitesse d’une animation au fil de son déroulement

Markers personnalisés

Placez des marqueurs personnalisés le long d’un chemin

Eoliennes

Eoliennes animées mais attention, le navigateur ramera si vous en mettez trop

Displacement map

Les pixels d’une “texture” dans un SVG peuvent être altérés, comme si on utilisant un FragmentShader 2D