Le SVG au quotidien

Il y a quelque temps, Damien et moi étions à la première édition de Sud Web. Parmi toutes les conférences, une a particulièrement retenu mon attention, celle de Jérémie Patonnier (@JeremiePat) : « SVG pour les designers et les développeurs ». Toutes les facettes de l’application, au format web, de ce format d’image vectorielle nous ont été présentées.

Je reviendrai certainement, dans un autre post, sur les aspects plus techniques de son application. Ce qui m’intéresse ici, c’est avant tout de voir comment ce format d’image peut apporter une véritable valeur ajoutée à un site, en terme de design et d’animation.

Même s’il est possible de faire des sites de démo, très graphiques, avec des animations en plein écran, etc., ce n’est pas pour autant notre quotidien. De fait, en quoi ce format d’image peut-il être un vrai plus dans son interaction avec l’utilisateur ?

Il y a peu, j’ai découvert le site de vente de casque audio de la marque Sony. L’utilisation du SVG est assez discrète, mais correspond assez bien à ce qui est possible d’en faire « tous les jours », sans avoir recours à flash – ce qui aurait certainement été le cas auparavant.

Le sélecteur de couleur animées permet d’afficher le casque aux couleurs sélectionnées (c’est bien fait !), les roll-overs des différentes vues sont également animés et plus originaux que ce qui aurait pu être fait avec de simples images.

C’est là, à mon avis, le véritable plus de ce format d’image, car on peut interagir dessus via javaScript… L’expérience utilisateur s’en retrouve accrue, la fluidité des animations améliore l’ergonomie, et une plus grande place est faite au graphisme.

Pour les amateurs, si je regarde le code, il semblerait que les illustrations, aux formats SVG, aient été générées avec raphael.js.