Besoin de ressources pour créer et animer du SVG ? Bonne nouvelle, C'est exactement ce que vous propose le BlogDuWebdesign aujourd'hui !
Comme je le disais dans un article précédent, le SVG est trop peu présent sur le Web, malgré de nombreux avantages. Légers, animation-friendly et simple à créer en Javascript ou avec des programmes comme Adobe Illustrator, il a tout pour plaire, et pourtant, il est souvent réduit à l'affichage de charts et autres visualisations de données, seul domaine ou il sait réellement imposer en maitre, alors qu'il pourrait faire tellement plus.
Pour vous permettre de creuser un peu plus le sujet, je vous popose de decouvrire cette serie de ressources qui vous permettront de commencer du bon pied et faire autre chose que de la visualisation avec d3.js. Si en revanche vous avez envie de voir plus d'exemples de ce que peut faire cette technologie, je vous propose la lecture de l'article Inspiration pour les intégrateurs #80 : Le SVG et les animations
Snap.svg est une ressource vraiment très intéressante permettant de créer et d'animer des illustrations vectorielles, mais aussi d'en importer depuis des formats courants. De plus, il possède un tutoriel interactif vraiment très intéressant.
Son seul défaut est d'être un projet très peu actif depuis deux ans (je pense qu'il a été officieusement abandonné), mais c'est à mon avis suffisant pour que je vous conseille tout de même de faire attention avant de l'utiliser en production.
SVG.js est assez proche de Snap, avec une API très clair et simple à utiliser, mais quelques manques au niveau de la simplicité d'import de fichiers SVG externes.
Contrairement à Snap, il est très actif, et rattrapera vite son retard.
Vivus est une ressource plus spécialisée que les deux précédentes. Son rôle n'est pas de créer des fichiers vectoriels, mais de faire se dessiner sous les yeux de vos visiteurs des illustrations vectorielles que vous aurez créé au préalable. Vous pouvez l'essayer et jouer avec depuis votre navigateur sur vivus-instant.
Walkway est une ressource semblable à Vivus.
SVGOMG est une application graphique qui vous permettra d'optimiser vos SVG en rationalisant les tracés, supprimant les traits et formes invisibles, les métadonnées, et toute autre information dont vous n'avez pas besoin.
Animateplus est une library qui vous permettra d'animer des éléments HTML et SVC avec une même syntaxe claire.