La version 1.5 de la bibliothèque
JavaScript libre
Raphaël vient de sortir. Elle permet de produire en ligne des dessins et animations vectorielles, en produisant des documents
SVG. Pour Internet Explorer qui ne gère pas encore ce format, Raphaël génère des documents
VML, ce qui lui permet d’être compatible avec tous les navigateurs récents, ainsi qu’avec Internet Explorer depuis sa version 6. Son code source est disponible sous
licence MIT.
Un peu d’histoire
En 1998, le
W3C (l’organisme qui définit les normes du web), a voulu établir un nouveau langage, basé sur le
XML, permettant de créer des images
vectorielles. Une image vectorielle, en opposition aux images matricielles ou bitmap (
PNG,
BMP,
GIF,
JPEG…) qui elles enregistrent chaque pixel, sauvegarde chaque composant géométrique du dessin (ligne, polygone, carré, ellipse, texte, courbes…). Cela permet la plupart du temps un poids réduit, mais aussi la possibilité d’agrandir à l’infini l’image sans perte de qualité : en effet, si une image matricielle ne fait qu’agrandir des carrés, ce qui pixelise l’image, une image vectorielle agrandit des formes géométriques. Voici ce qui se passe par exemple si on agrandit une image vectorielle, et ce qui se passe si on agrandit une image bitmap :
→
→
Image vectorielle
→
→
Image matricielle
Le W3C voulait donc créer un nouveau langage de création d’images vectorielles avec, comme le
HTML, des balises. Deux propositions lui sont parvenues :
- Le VML, proposé par Autodesk (l’auteur de Maya), HP, Macromedia (l’auteur de Flash à l’époque), Microsoft et Visio
- Le PGML, proposé par Adobe (qui n'avait pas encore racheté Macromedia) et Sun
Le W3C a choisi de fusionner les deux, pour créer le SVG. Retour en 2010, le SVG a beaucoup d’atouts pour remplacer le Flash. Comme lui, il se base sur des graphismes vectoriels, et peut exécuter du code JavaScript, sur lequel l’
ActionScript du Flash est basé, afin de rendre les applications interactives. Par rapport au Flash, il a des avantages :
- Il est libre
- Pas de plug-in à installer, il est reconnu nativement par le navigateur
- Pas besoin de payer pour créer des applications basées dessus
Mais aussi des inconvénients :
- L’interface de programmation DOM, utilisée pour parcourir en JavaScript les éléments d’une page HTML, aussi utilisée par le SVG, n’est pas des plus adaptées
- Si le navigateur ne reconnaît pas le SVG, il faut un plug-in
Microsoft a implémenté le VML dans toutes les versions d’Internet Explorer depuis la sixième, tandis que tous les autres navigateurs récents ont implémentés le SVG et que ce dernier sera présent dans Interner Explorer 9, qui sortira bientôt.
Voici à quoi ressemble un code SVG :
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 | <?xml version="1.0" encoding="utf-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="300"
height="200">
<title>Exemple simple de figure SVG</title>
<!-- ceci est un commentaire-->
<rect
width="100" height="80"
x="0" y="70"
fill="green" />
<line
x1="5" y1="5"
x2="250" y2="95"
stroke="red" />
<circle
cx="90" cy="80"
r="50"
fill="blue" />
<text x="180" y="60">
Un texte
</text>
</svg>
|
Ce qui donne :
Bien sûr, le créateur de l’image n’est pas obligé de la créer comme ça, avec un simple éditeur de texte, il peut aussi la dessiner avec un logiciel de dessin, comme
Inkscape 
. Il a la possibilité ensuite, à l’aide de la balise
<script>
, d'ajouter du JavaScript. Avec un éditeur, il est également possible de créer des images beaucoup plus riches que l'exemple ci-dessus.
Et vint Raphaël
Mais un jour fut créée Raphaël, une bibliothèque JavaScript, destinée spécialement à créer facilement des applications en SVG, ce qui règle le premier problème. En ce qui concerne la compatibilité, Raphaël s’en occupe aussi : si l’utilisateur navigue avec Internet Explorer 6, 7 ou 8, le navigateur génère du VML à la place du SVG, ce qui rend la bibliothèque compatible avec la quasi-totalité des navigateurs actuels (Firefox 3.0 ou plus et les navigateurs basés dessus, les navigateurs récents basés sur WebKit, le moteur de Chrome / Naveo / Epiphany / Midori / Safari / OpenTiger / Konqueror / zNavigo / Safari iPhone / etc., Opera 9.5 ou plus, Internet Explorer 6.0 ou plus et les navigateurs basés sur ce dernier) !
Raphaël s’intègre directement dans une page web, comme jQuery par exemple, pas besoin de toucher à du code SVG. Un document SVG peut cependant être converti en code Raphaël. Voici un exemple de code :
Code : JavaScript | // Créer une zone de dessin dans le <div> ayant pour paramètre id « zone »
var zone = Raphael("zone", 320, 200);
// Dessiner un cercle dans la zone de dessin aux coordonnées 50, 40 au rayon de 10 pixels
var circle = zone.circle(50, 40, 10);
circle.attr("fill", "#f00"); // Couleur de remplissage : #f00
circle.attr("stroke", "#fff"); // Couleur de la bordure : #fff
|
Mais Raphaël ne se limite pas à ça, et dispose de nombreuses fonctionnalités, permettant par exemple de manipuler ou d'animer des objets, ou d'interagir avec l'utilisateur. Vous pouvez voir les fonctionnalités de Raphaël à travers les
exemples, ou en lisant la
documentation (malheureusement plutôt pauvre).
Il existe enfin une surcouche de Raphaël, nommée
gRaphaël, qui est spécialisée dans le rendu de diagrammes en tous genres.
Les nouveautés
Les attributs personnalisés
Raphaël permet de modifier les attributs des objets du document SVG : changer la taille d'un segment, le déplacer, changer sa couleur... C'est sur cela que se basent les animations : on spécifie la valeur de l'attribut à laquelle on veut arriver, et le moteur de rendu se charge de faire une transition douce entre l'état actuel et cette valeur. Par exemple, si on demande de changer la couleur, il fera un dégradé progressif dans le temps.
Les attributs personnalisés permettent de créer de nouveaux attributs qui "regroupent" plusieurs attributs SVG existants. Par exemple, si on veut faire évoluer en même temps la taille d'un quartier de cercle et sa couleur, on peut maintenant combiner ces deux attributs dans un nouvel attribut "personnalisé", qui fait les calculs pour choisir la taille et la couleur à donner au cours de l'animation.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13 | r.customAttributes.segment = function (x, y, r, a1, a2) {
var flag = (a2 - a1) > 180,
clr = (a2 - a1) / 360;
a1 = (a1 % 360) * Math.PI / 180;
a2 = (a2 % 360) * Math.PI / 180;
return {
path: [["M", x, y],
["l", r * Math.cos(a1), r * Math.sin(a1)],
["A", r, r, 0, +flag, 1, x + r * Math.cos(a2),
y + r * Math.sin(a2)], ["z"]],
fill: "hsb(" + clr + ", .75, .8)"
};
};
|
Dans cet exemple, on a créé un attribut personnalisé
segment, qui règle à la fois la forme (attribut SVG
path) et la couleur (attribut SVG
fill) d'un objet.
Ensuite, on n'a plus qu'à combiner ça avec un peu de code qui repère les clics de souris et anime une augmentation de cet attribut "segment", et on obtient ce magnifique exemple, que vous pouvez tester si votre navigateur le supporte.
N'hésitez pas à regarder le code de la page, il contient le code Javascript complet. Si votre navigateur le permet, vous pouvez même observer l'évolution du document SVG en direct pendant que vous jouez avec l'exemple.
Sous Chrome par exemple, clic droit sur la tarte > "Procéder à l'inspection de cet élément".
Illustration : une image SVG plus riche, créée avec Inkscape.
licence CC-BY-SA : 
(
SVG), par Noémie Scherer.
Les images-clés (keyframes)
La formule de base pour les animations est donc de donner l'état auquel on veut arriver, et le moteur de rendu du navigateur web calcule tout seul les états transitoires à utiliser (trajectoire d'un point, dégradé des couleurs, etc.). On peut spécifier un peu la façon dont il choisit ses transitions (vitesse constante, départ plus en douceur, etc.) mais ça reste assez rigide : si on veut lui demander d'aller de A à B en passant par un point C bien précis qui n'est pas du tout entre les deux, il faut faire deux animations à la suite, de A à B puis de B à C.
Les
keyframes permettent une certaine flexibilité, en permettant de découper une seule animation en différentes "tranches" qui se comportent différemment.
Par exemple, dans l'exemple ci-dessous (encore une fois tiré d'une vraie animation), on découpe l'animation en cinq étapes (de 0% à 20%, de 20% à 40%..) en spécifiant à chaque fois l'état à atteindre. À chaque étape, la position verticale de l'objet à animer change de direction (attribut
cy), et un point différent de l'animation subit un dégradé (par la fonction utilisateur
fade).
Code : JavaScript | c.stop().animate({
"20%": {cy: 200, easing: ey, callback: fade(0)},
"40%": {cy: 100, easing: ey, callback: fade(1)},
"60%": {cy: 200, easing: ey, callback: fade(2)},
"80%": {cy: 300, easing: ey, callback: fade(3)},
"100%": {cy: 200, easing: ey, callback: fade(4)}
}, 5000)
|
Les deux listes permettent de choisir la méthode de transition (vitesse constante, etc..) indépendamment pour la position verticale et horizontale de l'objet.
Liens externes
En savoir plus avec le Site du Zéro :
Le site du zéro contient une section de tutoriels
Dessin vectoriel, qui n'attend qu'à être plus remplie. Elle contient un tutoriel sur
la vectorisation noir et blanc (transformation d'image matricielle en image vectorielle), et un
tutoriel inachevé sur SVG qui présente les bases du format, pour pouvoir comprendre le code source des documents produits par Raphaël, Inkscape ou un éditeur de texte.
Plusieurs news ont aussi traité de l'actualité du dessin vectoriel :
Site officiel de Raphaël
Raphaël sur Wikipédia
Trouvez une formation
Précédente
Suggestions
Flux RSS News
Twitter
Facebook
Google+
64 Participations
Connectez-vous !
Connectez-vous !
Revenir à la liste des news