SVG animés : mieux que les GIFS animés

Vous connaissez bien sûr les GIF animés.
Et bien sachez que format SVG permet non seulement de créer des images statiques mais aussi des animations.

Mais dans cette page je voudrais simplement vous montrer qu'un SVG animé c'est mieux qu'un GIF animé !

Ci-dessous deux images gif animées et agrandies

Les fichiers correspondants pèsent respectivement 4 KO et 11 KO ...

La netteté des images s'est fortement dégradée !

Ci-dessous deux images SVG animées et agrandies

Les fichiers correspondants ne pèsent chacun que 2 KO ...
En effet un fichier SVG ce n'est que du texte parfaitement lisible : des formules mathématiques pour dessiner les formes.

images SVG animés images SVG animés

Les images sont restées parfaitement nettes.
Pour insérer ces deux SVG animés dans la page j'ai utilisé la balise img (comme pour un gif animé).

Conclusion

Une image SVG animée garde toute sa netteté lorsqu'elle est agrandie ; ce qui n'est guère le cas d'un GIF animé ...

La production d'un SVG animé est facile mais surtout logique. Vous le découvrirez en visitant (dans le même site) le tuto "Animer les objets SVG".

Mais hélas il y a pour l'instant un gros gros bémol ...
En effet SVG n'est que partiellement implémenté par le navigateur Internet Explorer (et son successeur : Edge) donc si vous exécutez cette page avec IE vous perdez l'animation ...
Par contre aucun problème avec les autres grands navigateurs : Chrome, Firefox, Opera et Safari.

Donc pour conclure nous dirons que l'image SVG animée ce sera mieux que le GIF animé lorsque tous les navigateurs auront intégré complètement le SVG.
Retour menu