Marier SVG & Javascript

De ses origines à maintenant …

SVG (Scalable Vector Graphics / Graphiques vectoriels redimensionnables) est une spécification du W3C qui date déjà de 2001. Le format, un séduisant combo de flexibilité et de liberté (c’est un standard ouvert) capte mon attention depuis plus d’une décennie déjà. Mes premiers projets l’utilisant requérait l’usage de plugins externes et de manipulations ésotériques pour fonctionner correctement dans plusieurs navigateurs. Internet Explorer 5.5 était toujours d’actualité et Google Chrome n’était pas encore une réalité. La compatibilité HTML et CSS entre les navigateurs était déjà une tâche très ardue pour le jeune développeur que j’étais et il va sans dire que le support du format SVG, lorsqu’il était présent, était vraiment très primitif. Tout de même, j’avais bon espoir que le format pourrait un jour prendre son essor, devenir une norme et être le fer de lance du Web… Allant même jusqu’à remplacer complètement la technologie Flash et même le HTML!

Faites une avance rapide d’environ une douzaine d’années… Le Web s’est métamorphosé et s’est standardisé. On pourrait même dire qu’il a mûrit(un peu). La compatibilité entre les navigateurs n’est toujours pas parfaite, mais elle a définitivement cessée de me faire m’arracher les cheveux! Flash est une relique d’un passé révolu, Mozilla s’est débarrassé de la balise <blink>, Microsoft a finalement créé un navigateur compétent et le plus beau de tout : SVG est finalement une norme supportée par tous les navigateurs!

Avec du recul et après plusieurs années d’usage, je me dois de faire la concession suivante : SVG ne remplacera certainement jamais HTML. La syntaxe est trop abstraite et mathématique pour être aisément appréciée et comprise à la lecture par n’importe quel individu. Cependant, la base XML du format et le besoin grandissant de l’industrie pour des images haute-résolution sur nos appareils mobiles en fait un compagnon idéal pour le format HTML.

Notes

Cet article ne visera pas à vous expliquer la syntaxe du format SVG. Nous explorerons simplement la possibilité de coupler Javascript avec SVG afin d’obtenir des interactions intéressantes. Notez cependant que le format SVG supporte l’usage des CSS et peut être intégré à du HTML.

Pour les exemples à suivre, nous utiliserons une carte vectorielle du Canada, offerte gracieusement par amcharts.com et adaptée par mes soins.

Vous pouvez télécharger toutes les sources détaillées dans cet article, ici.

Exploration sommaire du format

Si vous ouvrez le document suivant dans un éditeur de texte compétent ou un IDE de développement de votre choix, vous trouverez un fichier source bien structuré et documenté. Ceux qui s’y connaissent en XML se retrouveront en terrain connu: la structure est logique, mais la syntaxe parlera au moins en partie à ceux qui connaissent bien le HTML.

Cependant, si vous ouvrez le document avec Inkscape ou Illustrator, vous serez accueillis par un image simple et familière représentant le Canada.

Intégration Javascript de base

De manière similaire au HTML, il est possible d’inclure du code Javascript dans un fichier SVG. Par exemple, en ajoutant le code suivant dans notre code SVG avant la balise de fermeture </svg>, le document émet une alerte une fois qu’il est chargé dans le navigateur.

<script type='text/javascript'>rn    alert('Ceci est une alerte!');rn</script>

Télécharger le document SVG incluant le script, ici.

Intégration Javascript avancée

Afin de pousser l’intégration Javascript un peu plus loin, nous allons tout d’abord permettre le référencement de fichier externes via la balise <script>. Ceci sera fait de manière un peu différente de l’usuel en HTML; nous devons tout d’abord ajouter le namespace à la balise <svg>, dans le haut du document :

xmlns:xlink="http://www.w3.org/1999/xlink

Suite à cette définition, les fichiers externes peuvent être référés de cette façon :

<script xlink_href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Par la suite, nous sommes libres de composer du code Javascript compatible SVG en utilisant jQuery, à notre guise! Dans l’exemple qui suit, nous allons utiliser 3 types de déclencheurs jQuery sur les balises <path> ayant la classe « land » qui déterminent chacun individuellement les Provinces du Canada.

Lors d’un clic sur ces zones, nous allons afficher le contenu de l’attribut « title » de la zone cliqué…

$('path.land').click(function(){rn    alert('Vous avez cliqué sur "'+$(this).attr('title')+'"');rn});

Lors de l’arrivée du curseur de la souris sur l’une de ces zones, nous allons changer sa couleur de fond pour une couleur au hasard. Cette transition sera animée la durée d’une demie seconde, simplement pour donner un impact visuel plus propre…

$('path.land').mouseenter(function(){rn    var random_hex_color = '#' + Math.random().toString(16).slice(2, 8).toUpperCase();rn    $(this).css({fill: random_hex_color, transition: "0.5s"});rn});

Finalement, lorsque la souris quittera l’une de ces zones, la couleur sera restaurée à l’originale(noir) via la même transition précédemment utilisée…

$('path.land').mouseleave(function(){rn    $(this).css({fill: "#000000", transition: "0.5s"});rn});rn

Voyez le résultat ci-dessous.

Télécharger le document SVG incluant le script, ici.

Conclusion

Cet article n’était qu’une brève incursion dans les nombreuses possibilités offerte par le format SVG. La spécification est mûre à l’usage à grande échelle dans les applications Web, les jeux sur tablettes/cellulaire et plus. La flexibilité du format et sa capacité de redimensionnement en fait un candidat léger et idéal lorsqu’il s’agit d’afficher des images avec un niveau de détails élevé sur des supports de taille variées(écrans de basse résolution, Retina, 4K et plus), sans faire de compromis sur la taille des fichiers. Évidemment, cette technologie n’est pas encore supportée à 100% par l’ensemble des navigateurs, mais elle l’est suffisamment pour amplement d’usages et d’expérimentation. Donc, expérimentez!