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.
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 ?
Le live drawing en SVG,
Bonjour !
Merci pour cette astuce ! Sinon, que n’étant pas du métier, je ne sais pas quoi faire de tous ces scripts – raphael-min.js, lazyline-min.js et celui généré en ligne que je ne sais pas comment renommer…-
Oserais-je vous demander quelques détails me permettant de finaliser ?
Pour info, je conçois de simples animations dans Edge Animate pour les intégrer dans Adobe Captivate…
Merci beaucoup,
Nicolas
Bonsoir Nicolas,
Pour comprendre que faire des scripts, le mieux reste encore d’analyser le code source de notre page de démo : http://netmacom.fr/wp-content/uploads/exemples/lazy-line-painter/line-drawing.php
Il suffit d’appuyer sur CTRL + U une fois la page affichée, et de regarder où sont ajoutés les scripts.
Si vous avez des problématiques d’ordre technique (ou pas d’ailleurs) dans la création de sites internet, nous pouvons vous accompagner. C’est notre métier