Accueil
 chercher             Plan du site             Info (English version) 
L'histoire de XML s'écrit en ce moment même. XMLfr vous aide à la suivre et à en dégager les tendances.Les listes de discussions XMLfr sont à votre disposition pour réagir sur nos articles ou simplement poser une question.Si vous ètes passionnée(e) par XML, pourquoi ne pas en faire votre métier ?XMLfr n'est heureusement pas le seul site où l'on parle de XML. Découvrez les autres grâce à XMLfr et à l'ODP.Les partenaires grâce auxquels XMLfr peut se développer.Pour tout savoir sur XMLfr.XMLfr sans fil, c'est possible !Pour ceux qui veulent vraiment en savoir plus sur XML.L'index du site.
 Si vous vous posez une question, vous n'êtes peut-être pas le premier...Les traductions en français des bibles XML.Ces articles sont des références dans leur domaine.Tout ce qu'il faut savoir pour démarrer sur un sujet XML...


Représentation graphique de données XML : un cas concret de camembert en SVG (partie 1).

XML et les langages dérivés se prêtent tout particulièrement à la mise en place de chaînes de traitement des données. SVG à l'aide de traitement XSLT, permet de représenter graphiquement des données brutes. Une bonne occasion de découvrir le langage SVG à travers un exemple.

Alexandre Arcouteil, (lex@free.fr).
vendredi 12 décembre 2003 (mis à jour le mardi 13 janvier 2004)

L'exemple présenté est très classique : représenter sous forme de camembert des statistiques de connexions à un site internet par jour de la semaine. Les données de bases sont issues de logs de connexions stockées dans un fichiers XML. Cette partie s'attarde sur une présentation du langage SVG à travers l'exemple d'un camembert. Une deuxième partie montrera comment une feuille XSLT permet de traiter des données XML pour en obtenir cette représentation SVG. Ce graphique SVG peut être visualisé avec les visualiseurs d'Adobe, Corel ou Batik d'Apache.

Le document SVG, camembert.svg qui sert d'exemple, utilise les composants de base de SVG. C'est un langage XML dont la recommandation, abondamment illustrée d'exemples, fait figure en elle même de tutoriel. Une traduction française est disponible. Chaque partie de code SVG est commentée avec un renvoi à la section correspondante de la traduction de cette recommandation (voir La spécification sur les Graphiques Vectoriels Adaptables (SVG), version 1.0).

Un camembert en SVG

Le noeud racine 'svg' contient des attributs qui servent à spécifier les dimensions du document (attributs 'width' et 'height') ainsi que l'échelle du repère de coordonnées par l'attribut 'viewBox' qui en spécifie les couples de valeurs (largeur puis hauteur) minimales et maximales. C'est par rapport à ce repère que seront définis et positionnés les éléments SVG du document (voir 7 Les systèmes de coordonnées, les transformations et les unités) :

<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="10cm" height="6cm" viewBox="0 0 2000 1200"
      onload="init(evt)">

Dans la tradition d'HTML, un document SVG peut être doté d'un titre :

<title>Les jours de la semaine</title>

Contrairement à HTML, la structure générale d'un document SVG ne fait pas de distinction entre en-tête et corps du document. Par contre, des zones spéciales de description et définition, correspondant respectivement aux éléments 'desc' et 'defs' contiennent des informations ou des éléments qui ne seront pas directement affichés par le visualiseur (voir 5 La structure du document).

L'intérêt de 'defs' est de définir des formes dont l'affichage pourra être provoqué autant de fois que nécessaire en les appelant par leur identifiant (l'attribut 'id'), comme cela sera montré par la suite. Dans cet exemple, l'élément 'defs' contient deux éléments 'path' et 'rect' :

<defs>
 <path d="M0,0 l-3,-400 l7,0 z" id="trait"/>
 <rect x="0" y="0" width="60" height="60"
       stroke="black" stroke-width="4"
       id="pastille"/>
</defs>

Tracés et formes de base

Ces éléments sont représentatifs des deux méthodes principales qui permettent de définir une forme en SVG : les tracés et les formes de bases.

L'élément 'path' permet de définir un tracé. L'attribut 'd' contient ainsi une suite de séquences caractère-clef / valeurs qui définissent des tracés types : lignes, courbes. Le principe de fonctionnement d'un tracé est simple. Le caractère-clef indique le type de tracé. Un tracé est réalisé entre un point de départ et un point d'arrivée. Les valeurs qui suivent le caractère-clef fournissent les coordonnées du point d'arrivée, et éventuellement d'autres coordonnées et paramètres permettant le calcul du tracé. Quand plusieurs couples caractère-clef / valeurs s'enchaînent, le point d'arrivée d'un tracé devient le point de départ du tracé suivant.

Dans l'exemple, l'attribut 'd' contient le caractère-clef 'M' qui permet de définir une position qui sera le point de départ du tracé suivant. Le caractère-clef 'l' permet de définir une ligne droite qui s'étend jusqu'aux coordonnées définies à sa suite. Pour chaque caractère-clef, la casse indique comment interpréter les coordonnées qui le suivent. Une majuscule indique des coordonnées absolues qui se réfèrent au repère du document SVG. Une minuscule indique des coordonnées relatives qui déterminent des coordonnées par rapport à la dernière position intermédiaire du tracé. Le caractère-clef 'z', qui suit les valeurs, stipule que le tracé est fermé, c'est à dire qu'il finit au point de coordonnées dont il est parti (voir 8 Les tracés).

L'élément 'rect' fait partie des éléments SVG qui définissent des formes de bases : lignes, rectangles, cercles, ellipses, polygones. Chaque élément contient des attributs spécifiques permettant d'exprimer les caractéristiques essentielles d'une forme donnée. Un élément 'rect' permet ainsi de définir un rectangle. Ses caractéristiques essentielles sont les coordonnées du coin supérieur gauche (attributs 'x' et 'y') ainsi que sa longueur et hauteur (respectivement 'width' et 'height') (voir 9 Les formes de base).

L'élément 'rect' contient deux autres attributs 'stroke' et 'stroke-width'. Ils permettent de définir des propriétés de trait concernant le liseré du rectangle : sa couleur et son épaisseur. Un ensemble de propriétés de peintures permettent ainsi de définir l'aspect d'une forme de base mais peuvent aussi s'appliquer au tracé d'un élément 'path' (voir 11 La peinture : le remplissage, le liseré et les symboles marqueurs).

Insertion de texte

Un élément spécifique permet de provoquer l'affichage de texte. Dans l'exemple, un libellé de titre est ainsi inséré au moyen de l'élément 'text' :

<g transform="translate(1000,100)">
 <text x="0" y="0" text-anchor="middle"
      text-decoration="underline"
      font-size="100px">Statistiques par jour de la
      semaine</text> 
</g>

Les attributs 'x' et 'y' de l'élément texte servent de référence dans le calcul du positionnement du texte, qui dépend aussi de sa directionnalité et de son orientation. Dans le cas d'un texte en alphabet latin cela correspond par défaut à la base d'alignement des caractères. Dans le même ordre d'idée l'attribut "text-anchor" permet d'accrocher le début, le milieu ou la fin d'un texte aux coordonnées précédentes (voir 10 Le texte). Il est aussi possible d'appliquer des propriétés de style aux caractères du texte en lui même comme la taille par l'attribut 'font-size'. SVG reprend ainsi beaucoup de propriétés définies par les CSS (voir 6 Le style).

Groupement de formes

L'élément 'text' est emboîté à l'intérieur d'un élément 'g'. Cet élément fonctionne comme un lasso. Il permet de créer une forme constituée de tous les éléments qu'il contient. Un élément 'g' peut contenir n'importes quels attributs SVG (sauf mention explicite). Les éléments qu'il contient héritent alors ses propriétés (voir 5.2 Le regroupement : l'élément 'g').

Dans l'extrait de code montré plus haut, l'élément 'g' contient un attribut 'transform'. Cet attribut peut contenir un ensemble de fonctions vectorielles qui permettent d'appliquer des transformations aux formes auxquelles il s'applique : des translations, rotations, mises à l'échelle (voir 7.6 L'attribut transform). Ici une translation de 1000 sur l'axe des x et 100 sur l'axe des y est appliquée à l'élément 'text' emboîté.

Insertion de formes prédéfinies

Le dessin du camembert, et de ses différents quartiers est assuré en utilisant le motif de l'élément 'path' contenu dans les définitions. La forme de cet élément correspond à une part de camembert de 1° d'angle. Pour chaque part du camembert, elle est dupliquée (et correctement positionnée par des rotations et translations) autant de fois que nécessaire pour reconstituer l'angle total d'une part donnée. Pour cela, on utilise l'élément 'use' qui permet d'afficher une forme préalablement définie. L'attribut 'xlink:href' permet de désigner par son identifiant l'élément des définitions dont il provoque l'affichage (voir 5.6 L'élément 'use') :

<use xlink:href="#trait" transform="rotate(0)"/>

Superposition et affichage de formes

Du fait que SVG ne gère pas de 'z-index' comme dans CSS, les formes définies par des éléments SVG sont affichées en s'empilant les unes par dessus le autres selon leur ordre d'apparition (ou d'appel pour des formes prédéfinies) dans le code en lui-même (voir 3.3 L'ordre de rendu). Dans l'exemple, La zone d'affichage des légendes correspond à un empilement de plusieurs formes : une pour la légende générale et une pour chaque légende spécifique à un jour de la semaine. Bien qu'étant au bas de cet empilement, c'est la forme contenant la légende générale qui s'affiche. Cela est du à l'attribut 'visibility' qui permet de rendre une forme visible ou invisible (voir 11.5 Le contrôle de la visibilité). Dans l'exemple, l'attribut de chaque légende détaillée a la valeur "hidden" (invisible). Celles ci ne cachent donc pas la légende générale dont la valeur de 'visibility' est fixée à "visible" (via un élément 'g' englobant) :

<g visibility="visible" id="legendes">
      [...]
</g>

Interactivité

Les éléments d'un document SVG sont capables de réagir à des évènements provoqués par l'utilisateur, par exemple une action de clic à la souris sur une forme. D'une manière analogue à HTML, un document SVG peut ainsi être rendu interactif à l'aide de scripts déclenchés par des évènements (voir 16 L'interactivité). Un élément 'script' contient le code que l'on veut insérer dans un document SVG. Le langage de script par défaut est ECMAScript (voir 18 Les scripts).

Dans l'exemple, chaque part de camembert peut ainsi réagir à un clic à la souris qui déclenche le décalage de la part, en modifiant les paramètres de translation de la forme, et l'affichage de la légende correspondante, en modifiant la valeur de la propriété 'visibility' de l'élément cible.

Conclusion

Cet exemple ne couvre pas tous les aspects de la recommandation SVG. De plus, il s'appuie sur la traduction de la version 1.0 alors qu'une version 1.2 est à venir. Le champ d'application de SVG est assez vaste. Dans le cas de l'exemple présenté, une grande partie de l'intérêt de ce type de graphique est qu'il peut être généré systématiquement à partir de données brutes XML par traitement XSLT. Cela sera l'objet de la deuxième partie de cet article.

Autres articles :

Copyright 2003, Alexandre Arcouteil.


 

Mots clés.



L'histoire de XML s'écrit en ce moment même. XMLfr vous aide à la suivre et à en dégager les tendances.


Les documents publiés sur ce site le sont sous licence "Open Content"
Conception graphique
  l.henriot  

Conception, réalisation et hébergement
Questions ou commentaires
  redacteurs@xmlfr.org