SVGround : cours SVG

XSLT pour SVG

XSLT n’étant pas l’objet de ce site, cette partie du cours sera assez succinte. En fait, on transforme du SVG avec XSLT de la même façon qu’on transforme n’importe quel contenu XML.

Il y a deux manière d’agir pour servir du contenu transformé : soit on laisse la transformation se faire côté client, soit on la fait côté serveur et on sert le SVG comme d’habitude.

Transformation côté client

Pour effectuer la transformation côté client, on doit utiliser la processing-instruction xml-stylesheet, dont je décris les "attributs" ici, à la différence que notre type mime sera ici application/xml.

Une petite mise au point s’impose pour Internet Explorer et XSLT en général. Ce navigateur ne reconnait que le type mime text/xsl qui est incorrect. Même s’il est reconnu par les autres navigateurs, utiliser ce type mime est un danger pour la pérennité de votre application. C’est pourquoi je conseille de ne pas faire de XSLT avec Internet Explorer, et que je dis qu’il ne connaît pas XSLT (ce qui est vrai dans l’absolu et de toute façon le support de ce langage est buggé et incomplet puisque fait à partir d’un working draft).

Prenons pour exemple ce fichier XHTML que nous voulons transformer en barres :

< Transformation XHTML vers SVG avec XSLT

Tableau récapitulatif des scores

NomScore
Paul45
Marc123
Luc89
Eugène98
Léopold87
Bernard Henri3
Sylvestre141
]]>

Il faut commencer par attacher la feuille de style XSLT à ce document, avec la processing-instruction xml-stylesheet comme ceci (seconde ligne) :

<]]> < Transformation XHTML vers SVG avec XSLT

Tableau récapitulatif des scores

NomScore
Paul45
Marc123
Luc89
Eugène98
Léopold87
Bernard Henri3
Sylvestre141
]]>

La seule difficulté résulte dans le fait qu’il faut bien renseigner les attributs de l’élément output du langage XSLT :

< ]]>

Il ne reste plus qu’à écrire le programme XSLT, en choisissant bien sûr l’encodage qui vous convient. XSLT n’est pas le sujet de ce cours, mais voici un exemple de transformation d’un tableau XHTML en graphique SVG.

<

Et voici le résultat (en pleine page) :

Transformation XHTML vers SVG avec XSLT

Notez les effets d’animation utilisés ici et surtout le fait que la page XHTML d’origine a été conservés. Seul l’élément table et ses fils ont été transformés.

Ce type de transformation est assez mal supporté sur le client (mais ça s’améliore), et c’est pourquoi il est parfois nécessaire d’utiliser les transformations côtés serveur, là où on a (en principe) le contrôle de la configuration.

Transformation côté serveur

Il existe une multitude de solutions pour réaliser une transformations XSLT côté serveur, mais nous n’en étudierons qu’une : celle réalisée avec PHP5 et l’extension XSL.

Pourquoi PHP5 et pas PHP4 ? Simplement parceque PHP5 est fait pour XML : les fonctions DOM y sont incluses dans son cœur, alors qu’avec PHP4, il y avait DOMXML pas performant et buggé et pour XSLT, Sablotron qui était lent et buggé aussi. Il vous faudra avec PHP5 que l’extension XSL soit activée, mais c’est le cas chez la majorité des hébergeurs. En résumé, travaillez avec PHP5, PHP4 est trop brouillon.

Voici un exemple commenté avec PHP5 :

<load('datas.xhtml'); // on charge la feuille de style XSLT, document XML, de la même manière $xstlStylesheet = new DOMDocument(); $xsltStylesheet->load('stylesheet.xsl'); // ensuite on doit créer le processeur XSLT // c’est cet objet qui va effectuer la transformation $xsltProc = new XSLTProcessor(); // puis on rattache notre feuille de style à ce processeur XSLT, si bien que toute les transformations faites par ce processeur seront faites avec cette feuille de style $xsltProc->importStylesheet($xsltStylesheet); // on peut ensuite faire passer des paramêtres à notre feuille de style $xsltProc->setParameter('', 'param', 'valeur'); // on doit ensuite envoyer, avant toute chose, le type mime pour que les navigateurs comprennent bien qu’il s’agit de SVG header('Content-type:image/svg+xml'); // on peut enfin envoyer le tout : la méthode transformToXml prend en paramêtre le fichier à transformer et effectuer la transformation selon les règles de la feuille de style qui lui est rattaché // le résultat est une chaîne de caractère qu’on envoie au navigateur tout de suite grâce à echo echo $xsltProc->transformToXML($datas); ?>]]>

Vous trouverez ici la documentation sur l’extension XSL.

L’extensibilité
Le DOM avec Javascript