Le live drawing en SVG

La créativité des webdesigners en termes de graphisme et d’expérience utilisateur est quasiment infinie. De ce fait, les tendances webdesign vont et viennent à une vitesse incroyable, et ce n’est pas pour nous déplaire.

En 2012, l’effet de Parallaxe a été l’effet graphique, le concept de navigation originale, que tout webdesigner digne de ce nom se devait de mettre en place sur son portfolio.

A la rentrée 2013, c’est le Flat Design qui a été à l’honneur avec la sortie d’iOS 7.

Et maintenant en cette fin d’année 2013, une nouvelle tendance se dessine, au propre comme au figuré : le traçage dynamique d’objets SVG.

Voir la Démo

Le SVG : Scalable Vector Graphics

Basé sur le standard XML, le SVG est un format de données permettant de décrire des ensembles de graphiques vectoriels. Concrètement, un fichier SVG contient l’ensemble des coordonnées et vecteurs représentant un graphique. L’intérêt de ce format est qu’à la différence d’une image classique, le redimensionnement d’une image SVG ne génère pas de perte de qualité liée à l’extrapolation puisque toutes les coordonnées des points sont recalculées sur la base des vecteurs stockés.

Le redimensionnement sans perte de qualité, là est tout l’intérêt du SVG. Les webdesigners l’ont bien compris et ce format se répand de plus en plus, notamment grâce à la montée en puissance du responsive design.

Bien que très répandu, le SVG n’est pas compatible avec tous les navigateurs. Pour en savoir plus, je vous propose de vérifier la compatibilité du SVG par navigateur selon son mode d’utilisation sur CanIUse.com.

Le traçage dynamique de SVG

Alors qu’une insertion classique d’un objet SVG dans une page permet d’afficher le graphique tel une image, le traçage dynamique (SVG Path Animation en Anglais) permet lui de tracer point par point le graphique, afin de donner un effet de “live drawing”. C’est un peu le même principe que dans les vidéos de speed painting mais en version XML + jQuery.

Si une image vaut 1 000 mots, je pense qu’une page web de démonstration avec du SVG animé en vaut bien 10 000. Je vous invite donc à regarder les effets appliqués sur les pages de présentation de la PlayStation 4 et de la XBOX One créées par Polygon.com, un célèbre site américain qui traite de l’actualité des jeux vidéo. Vous allez le voir, on reste dans les tendances du moment même au niveau du sujet avec cette démo.

Lazy Line Painter

Lazy Line Painter est un plugin jQuery qui permet de faire du traçage dynamique de fichiers SVG de façon très simple. Seules quelques étapes suffisent pour obtenir un rendu plutôt cool.

Pour le télécharger, rendez-vous ici : lazylinepainter.info

Intégration des scripts

Une fois le package téléchargé, dézippez-le et récupérez les 2 fichiers JavaScript qui nous intéressent, à savoir raphael-min.js et jquery.lazylinepainter-1.4.1.min.js (le plugin en est à la version 1.4.1 à l’heure où j’écris cet article).

Il ne vous reste plus qu’à les intégrer dans votre page pour passer à l’étape suivante.

Génération du SVG

Le plus simple pour générer un SVG basique est d’utiliser Adobe Illustrator. Si vous ne l’avez pas, vous pouvez télécharger un fichier vectoriel libre de droit sur le net (ici par exemple). Attention toutefois à respecter les différents points suivants :

• Le graphique créé ne doit pas contenir de zones de remplissage.
• Les lignes doivent avoir un début et une fin, pas de boucle.
• Le fichier SVG généré ne doit pas dépasser les 40Ko pour une dimension maximale de 1000 x 1000 px.

Conversion du SVG

Pour pouvoir être tracé dynamiquement par un navigateur, le fichier SVG utilisé doit préalablement être converti à l’aide de l’outil “SVG to Lazy Line Converter” fourni par le plugin. Pour ce faire, il suffit de glisser/déposer le fichier SVG dans l’interface située directement sur le site, là où vous avez téléchargé le plugin quelques étapes plus haut.

Une fois le fichier converti, une démonstration se lance et vous avez la possibilité de copier le code source JS généré.

Intégration finale

On y est, c’est la dernière étape. Vous n’avez plus qu’à coller le code source copié à l’étape précédente dans une page web fonctionnelle intégrant jQuery et le tour est joué.

Vous pouvez consulter notre exemple sur la page de démonstration de Lazy Line Painter.

Plutôt facile non ?