En voulant développer le portail de www.informatique-oise.com j’ai voulu m’essayer à l’animation HTML5 et compagnie. Mon premier essai s’est porté sur un logiciel tout fait, Sencha Animator. Design agréable, simple à utiliser, aucun problème particulier… Jusqu’à la mise en prod et les premiers essais sur IE9… Une catastrophe. Tous les éléments se sont retrouvés inertes, superposés, en haut à gauche de l’écran. Pour un portail qui se veut dédié aux métiers de l’informatique, ça la fout plutôt mal

Je me suis donc tourné vers mes anciens amours, du bon vieux Javascript à l’ancienne et la lib RaphaelJS que j’ai eu l’occasion d’éprouver plusieurs fois, sur des projets aussi bien perso que pro. Je commence donc à importer mes SVG d’Illustrator pour les retravailler directement en javascript. Tout se passe bien, jusqu’à un bug irrémédiable : le remplissage par dégradé radial (<radialGradient> pour les intimes) qui ne peut s’appliquer avec Raphael qu’aux ellipses et aux cercles – alors qu’on peut l’appliquer à n’importe quoi en SVG pur, y compris aux chemins (<path>) de mes hexagones arrondis.

Quelques recherches plus tard, je suis tombé sur une autre lib, « SVG.JS », en version 0.20 de 8ko en version minifiée… Alors voila, une lib peu connue, en version « même pas 1.0″, j’ai été plutôt circonspect, mais bon, un ptit test unitaire ne faisait pas de mal, je tenais à mes dégradés radiaux, et pas forcément envie de m’attaquer au hacking de RaphaelJS juste pour ca (les deuxième et troisième vertus du développeur Perl, l’impatience et la paresse m’ont beaucoup aidé à faire mon choix, la première, l’orgueil, ayant été jetée aux orties pour l’occasion).

Et, il faut le dire, j’ai été très très agréablement surpris. Facilité à prendre en main, utilisation très intuitive, doc plutôt complète – quelques imperfections liées à du vieux code obsolète mais passons…
La syntaxe elle même de la lib est tout ce qu’il y a de plus moderne, à la jQuery, avec système de décoration – on empile les appels de méthode les unes sur les autres – et en callbacks/fermetures.
Bref j’ai mes dégradés radiaux. Le developpeur de l’appli a l’air plutot actif, y compris sur Twitter et sur le fofo Github de son application ou il répond aux questions.

Tout n’est pas encore implémenté, mais il est sur la bonne voie. Bonne chance à lui en espérant que sa lib connaisse la même popularité que Raphael et qu’on arrive à une lib opensource SVG digne de ce nom, histoire d’avoir une alternative en code crédible aux éditeurs flash-like qui se profilent à l’horizon.

Un exemple de code avec SVG.JS :

<!--Début du html qui va bien-->
<div id="canvas"></div> <!-- Conteneur de mon futur SVG -->

<script type="text/javascript" src="js/svg.js"></script>
<script type="text/javascript">// <![CDATA[
      // Données SVG brutes récupérées du <path> de mon hexagone arrondi
      var m_sHexDataPath = 'M50.676,140.67c-5.504,0-12.26-3.9-15.012-8.668 l-30.601-53c-2.752-4.768-2.752-12.567,0-17.334L35.665,8.667C38.417,3.9,45.171,0,50.676,0h61.201c5.504,0,12.26,3.9,15.012,8.667 l30.6,53.001c2.753,4.767,2.753,12.566,0,17.334l-30.602,53c-2.752,4.768-9.506,8.668-15.012,8.668H50.676L50.676,140.67z';
      if (SVG.supported) {
         // On déclare une jolie zone d'affichage pour le SVG de 900x600
         var draw = SVG('canvas').size(900,600);

         // On genère le dégradé
         var grad = draw
                        .gradient('radial',function (stop) {
                           stop.at({offset: 0, color: '#bbb328', opacity: 1 })   // Couleur de début du dégradé, offset 0
                           stop.at({offset: 1, color: '#a79c25', opacity: 1 })   // Couleur de fin du dégradé, offset 1
                        }
         );

         var hex = draw
                      .path(m_sHexDataPath) // On genère le chemin de l'hexagone
                      .attr({fill: grad, stroke: '#baac49' })  // On définit le dégradé du dessus comme couleur de remplissage
                                                               // Et la couleur de contour
                      .move (100,100)                          // On déplace aux coordonnées 100, 100 de notre zone SVG
                      .click (
                         function (e) {alert('Hello world')}   // Clique moi dessus et t'auras une alerte très moche
                      );
      }
      else {
         alert('SVG pas supporté !');
      }
</script>
<!--fin du html qui va bien-->

Le lien Github : https://github.com/wout/svg.js

Vous trouvez celà utile ? Partagez le !