Ces dix dernières années auront apporté un challenge supplémentaire aux sites et applications web : les multiples résolutions d'écrans. entre les PC fixes, les PC portables, les tablettes et les smartphones, les web design doivent souvent être capable de faire le grand écart. En matière de structure, les nombreux frameworks front end comme Foundation permettent de faire des web designs responsifs avec une relative facilité. Mais qu'en est-il des médias ?
Pour ce qui est des images, le W3C est encore en phase de validation pour son standard, et bien qu'il existe différents outils permettant déjà de charger des images de taille et résolution différente en fonction de la taille de l'écran, il reste toujours un problème de taille : il faut créer toutes ces images de tailles différentes à la main.
La solution serait une image vectorielle, qu'on puisse agrandir et rétrécir à volonté, sans perte de qualité, si possible dans un format très léger, et animable simplement. Bonne nouvelle, ce format existe déjà depuis 2003, et est déjà compatible avec les navigateurs actuels, c'est le SVG.
Snap.svg est une library javascript qui vas vous permettre de travailler simplement avec du SVG dans vos pages web : le créer l'importer (depuis illustrator ou inkskape par exemple), l'insérer et l'animer.
Mieux encore, il est capable de n'importer que certaines portions du SVG, permettant de transformer ce dernier en une sorte de feuille de style graphique contennat plusieurs styles.
Enfin, et c'est de loin la fonctionnalité la plus excitante, Snap.svg permet de créer des animations de manière très simple, pour obtenir rapidement et simplement des résultats comme ceux du site Playground.
Si vous voulez vous faire une idée du fonctionnement de Snap.svg, je vous conseille de faire un petit tour sur leur tutoriel et leur documentation, agréable et bien fournie.