Retrouvez cet article dans : Linux Pratique 47

L’objectif de cet article est de présenter le langage SVG et, plus particulièrement, les possibilités qu’il offre en termes d’animation et de dynamisme. En effet, à l’heure de l’hégémonie du format propriétaire Flash et des enjeux liés à un Internet graphique ouvert, SVG se positionne-t-il en alternative libre ?

SVG késako ?

SVG signifie Scalable Vector Graphic : c’est un langage XML de description de dessins vectoriels en deux dimensions. C’est un standard ouvert et conforme aux spécifications du W3C dont la version 1.0 date de 2001. La version actuelle est la 1.1 qui date de 2003. Les travaux sur la version SVG 1.2 Full sont en cours.
En matière de formats graphiques, on peut différencier deux grandes familles : les formats matriciels (PNG, JPEG, ...) et les formats vectoriels (SVG, Flash, ...). Un format vectoriel ne contient pas en soi l’image, mais des éléments de description –
ou vecteurs – de cette image, qu’un visualisateur sera capable d’utiliser pour construire l’image décrite. En résumé, une image vectorielle décrira une ligne où une image matricielle décrira un ensemble de points constituant une ligne.

Le S de SVG indique qu’une image vectorielle, puisqu’elle est construite à la volée par le visualisateur, peut donc être agrandie (zoom) sans dégradation de qualité et imprimée à n’importe quelle résolution. Les formats rasters sont eux généralement limités à une seule résolution. La figure 1 illustre la différence entre formats vectoriels et matriciels sur le zoom d’une image.

 Fig. 1 : Images  vectorielle (SVG) et matricielle (PNG)

SVG vs Flash

En outre, SVG ne se réduit pas à cet aspect descriptif, la spécification contient également la définition d’animation des éléments, de scripting basé sur des évènements et de modification d’un document. C’est cet aspect dynamique qui fait de SVG un concurrent potentiel à Flash.
À la différence de Flash, SVG est un format texte, et non binaire, qui est donc hautement compressible, indexable et peut être modifié à partir de n’importe quel éditeur.

SVG bénéficie également de l’avantage d’être compatible avec d’autres spécifications du W3C comme le Document Object Model (DOM) et les feuilles de style CSS. Ajoutez à cela le support par défaut d’ECMAScript et l’on comprend vite que n’importe quel développeur Web sera facilement capable d’appréhender et dynamiser SVG.
Voici un rapide résumé des avantages respectifs des deux solutions.

L’adoption de SVG est bien moindre que celle de Flash, cependant on peut remarquer que les environnements de bureau GNOME et KDE4 le supportent, tout comme Google Maps (pour le tracé des chemins), Google Documents (pour les graphes du tableur), Google Code (pour la génération de graphes statistiques) ou encore Médiawiki (qui accepte les images SVG).

Outils disponibles

 Ce qui fait la force de Flash, c’est aussi l’existence de Flash Player sur la plupart des plateformes et celle d’un éditeur d’animations de qualité professionnelle. Qu’en est-il de SVG ?
En ce qui concerne les visualisateurs, nous pouvons citer :

• Les principaux navigateurs Web (avec plus ou moins de couverture de la spécification) : Opera, Mozilla Firefox 1.5 et supérieur, Konqueror, Amaya du W3C.
• Internet Explorer et Safari nécessitent l’installation du plugin Adobe Flash Player (installable également
• sur Firefox), dont le support sera arrêté par Adobe en janvier 2009...
• Squiggle est un excellent client SVG en Java du projet Apache Batik, complètement compatible avec la norme.

Fig-2

Il existe de nombreux éditeurs de SVG statique ou compatibles avec SVG en import/export. Pour n’en citer que les principaux : Inkscape, Karbon14, Scribus, Skencil, sK1, OpenOffice.org Draw ou Gimp. La lacune la plus grande de SVG se trouve au niveau des éditeurs de SVG dynamique, qui permettraient de créer facilement des animations et ainsi véritablement concurrencer Flash.
Pour être complet, il faut également citer le validateur SVG du W3C, ainsi que les nombreux frameworks disponibles pour générer et gérer du SVG comme Batik (Java), Cairo (C), librsvg (C), Perl SVG, wxSVG (C++) ou CleverSvg (PHP).

SVG statique

 L’objectif de ce chapitre n’est pas de présenter de manière exhaustive le langage déclaratif de SVG, mais plutôt d’en donner un aperçu, sous forme d’exemples.

Structure de base d’un document SVG

La structure de base la plus courante d’un document SVG est la suivante :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- déclarations SVG -->
</svg>

• La première ligne indique, via l’attribut standalone, que le document XML fait référence à un fichier externe, en l’occurrence le fichier DTD de la deuxième ligne.
• La balise <svg> définit la racine du document : notez l’utilisation de l’espace de nom spécifique à SVG : http://www.w3.org/2000/svg.

Fig. 3 : Inkscape un excellent éditeur de SVG statique

Les éléments décrits dans un document SVG peuvent également être regroupés dans de nouvelles balises <svg> ou des balises <g>.
Les coordonnées, qui peuvent être absolues ou relatives, commencent en haut à gauche du système de coordonnées. Tout comme les distances, elles sont exprimables en plusieurs unités de mesure : px (pixels, par défaut), cm/mm, pt (points), %,... Ce sont en fait les mêmes unités que celles de CSS2.
Les regroupements d’objets (tels que <svg>, <g> ou <symbol> et <defs> décrits plus loin) définissent de nouveaux systèmes de coordonnées.

Formes géométriques simples

SVG sait gérer les formes géométriques de base suivantes : rectangles, cercles, ellipses, lignes, polylignes, polygones et chemins. Illustrons leur utilisation via des exemples (par souci de lisibilité, nous omettrons les balises <?xml?>, <!DOCTYPE> et <svg> présentées plus haut).

Tableau 1

Chemins

SVG permet également de déclarer des formes géométriques sous forme de chemins. Pour ce faire, plusieurs commandes peuvent être combinées :

• M : se déplacer à une position donnée ;
• L : tracer une ligne jusqu’à une position donnée ;
• H : tracer une ligne horizontale jusqu’à une abscisse donnée ;
• V : tracer une ligne verticale jusqu’à une ordonnée donnée ;
• C et S : tracer une courbe de Bézier cubique (avec deux points de contrôle) ;
• Q et T : tracer une courbe de Bézier quadratique (avec un point de contrôle) ;
• A : tracer un arc elliptique ;
• Z : finaliser le chemin en traçant une ligne droite entre le dernier point et le premier point.

Ces commandes sont utilisables en position absolue (majuscules M, L, H, V, C, S, Q, T, A et Z) ou en position relative (m, l, h, v, c, s, q, t, a et z).
Exemple :

 <path d=”M100 100 L200 100 C150 50 125 125 100 150 Z” style=”fill:green; stroke-width:2; stroke:blue”/>

Expliquons plus en détail l’attribut d de cette instruction SVG :

 Fig. 4 : Détails d’un chemin

• Instruction 1 : le curseur est positionné au point (100,100).
• Instruction 2 : une ligne est tracée depuis le curseur jusqu’au point (200,100).
• Instruction 3 : une courbe de Bézier est tracée jusqu’au point (100,150) en positionnant les deux points de contrôle en (150,50) et (125,125).
• Instruction 4 : le chemin est finalisé via une ligne tracée entre (100,150) et le point de départ (100,100).

C’est l’utilisation de chemins complexes qui permet de dessiner n’importe quelle forme. Pour vous en persuader, ouvrez l’éditeur XML d’Inkscape (menu Édition -> Éditeur XML) ou votre éditeur texte favori sur un dessin complexe comme celui de Tux...

Liens internes

SVG permet de référencer des objets réutilisables, précédemment définis avec les balises <defs> ou
<symbol>. Ceci est réalisé grâce au support de Xlink dont il faut ajouter l’espace de noms dans la balise <svg>.
Exemple :

 Tableau 2

Liens externes

SVG permet de faire des liens vers des ressources externes identifiées par des URI. Ceci est par exemple utilisé pour créer des liens hypertextes ou référencer des feuilles de styles. Ceci est également réalisé grâce au support de Xlink.
Exemple :

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www. w3.org/1999/xlink">
  <a xlink:href="http://www.svgfr.org">
    <rect x="30" y="30" width="150" height="100" style="fill:blue; stroke-width:1; stroke:black"/>
  </a>
</svg>

Gradients

Les gradients de couleurs peuvent être utilisés pour le remplissage des éléments. SVG gère les gradients linéaires et radiaux.

Exemple :

 Tableau 3

Il existe de nombreux attributs supplémentaires relatifs aux gradients. Ils ne sont pas abordés ici par souci de simplification. D’une manière générale, reportez-vous à la norme du W3C pour une description détaillée et exhaustive des éléments SVG et de leurs attributs.

Tableau 4

Texte

Dans SVG, le texte est un objet graphique comme un autre. Par défaut, il est affiché sur une ligne, mais il est également possible :

• de le séparer en plusieurs tronçons avec la balise <tspan> ;
• de l’attacher au contour d’un élément <path> avec la balise <textPath> et un lien Xlink.

Exemples : voir tableau 4.

Images

Il est possible d’insérer des images dans un document SVG, les formats supportés sont JPEG et PNG pour les formats matriciels et SVG lui-même pour le vectoriel.
Exemple :

 Tableau 5

 Conclusion

Dans le prochain numéro, nous aborderons l’affectation de styles aux divers éléments, les transformations (translation, rotation, etc.), l’imbrication du SVG avec d’autres langages XML. Nous nous intéresserons également au SVG dynamique. En effet, nous verrons que chaque élément d’un document SVG peut être dynamiquement modifié via Javascript.

Retrouvez cet article dans : Linux Pratique 47