Coin web de Frédéric Péters

fpeters@0d.be

SVG, XSL, make, joie dans les chaumières

5 février 2005, 22:27

L'idée date de dimanche passé, l'implémentation aussi, le commentaire arrive ce soir. Ce pourrait être une ode au XML, mais ce serait ignorer le « Unix spirit » de petits outils pour de grandes choses; cocktail time.

L'élément de travail est une image, plus précisément un schéma, au format SVG, tracé dans Inkscape; en voici un petit exemple, quatre étapes, quatre flèches, un petit processus simple:

Fichier de base, toutes les étapes

L'idée est de partir de ce fichier SVG et d'en tirer quatre images, qui seront ensuite mises à la suite l'une de l'autre pour expliquer les étapes du processus, dans des transparents, dans une animation sur le web, peu importe.

La première étape est de regrouper les éléments constituant une étape; dans le cas présent, cela donne par exemple quatre groupes reprenant chacun une flèche et le numéro associé. Inkscape permet d'attribuer un id particulier à un groupe, s'il ne le faisait pas, un simple éditeur de texte ferait l'affaire. <svg:gid="step1">, <svg:gid="step2">... sont ainsi identifiés.

Pour transformer les fichiers XML, un fichier XSL est un moyen évident, on pourrait en imaginer quatre, qui chacun correspondrait à une étape, on peut aussi faire un peu plus compliqué et profiter qu'on ait identifié les groupes avec des noms précis. Un peu long, inévitable pour les XSL, j'y ai mis quelques commentaires par faciliter sa lecture:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:svg="http://www.w3.org/2000/svg">
 <xsl:output method="xml" encoding="UTF-8" indent="yes"/>

 <!-- on va avoir un paramètre stepno -->
 <xsl:param name="stepno"/>

 <!-- cela concerne les groupes dont l'id commence par step -->
 <xsl:template match="svg:g[starts-with(@id, 'step')]">

  <!-- une variable n pour contenir le numéro de l'élément-->
  <xsl:variable name="n">
   <xsl:value-of select="substring-after(@id, 'step')"/>
  </xsl:variable>

  <xsl:choose>

   <!-- si l'élément est inférieur à l'étape choisie -->
   <xsl:when test="number($n) &gt; number($stepno)">
    <!-- on lui met l'opacité à 0 pour le rendre invisible -->
    <xsl:copy> <xsl:attribute name="style">opacity:0;</xsl:attribute>
      <xsl:apply-templates select="node()|@*"/>
    </xsl:copy>
   </xsl:when>

   <!-- si l'élément est supérieur à l'étape choisie -->
   <xsl:when test="number($n) &lt; number($stepno)">
    <!-- on lui met l'opacité à 0.5 pour le rendre translucide -->
    <xsl:copy> <xsl:attribute name="style">opacity:0.5;</xsl:attribute>
      <xsl:apply-templates select="node()|@*"/>
    </xsl:copy>
   </xsl:when>

   <!-- sinon, c'est l'élément de l'étape, on n'y touche pas -->
   <xsl:otherwise>
    <xsl:copy> <xsl:apply-templates select="node()|@*"/> </xsl:copy>
   </xsl:otherwise>
  </xsl:choose>
 </xsl:template>

 <!-- tout le reste, on le prend tel quel -->
 <xsl:template match="node()|@*">
  <xsl:copy>
   <xsl:apply-templates select="node()|@*"/>
  </xsl:copy>
 </xsl:template>

</xsl:stylesheet>

Reste à appliquer ce fichier quatre fois, pour chacune des étapes, et à en tirer quatre SVG ou, plus pratique pour l'insertion sur cette page, quatre PNG. Outil standard, make, que du bonheur:

all: svg-make-step-1.png svg-make-step-2.png svg-make-step-3.png svg-make-step-4.png

%.svg:
      xsltproc --stringparam stepno `echo $@ | sed -e 's/[^0-9]//g'` step.xsl \
              $< > $@

%.png: %.svg
      inkscape -d 40 --export-png=$@ $<

svg-make-step-1.svg: svg-make-step.svg step.xsl
svg-make-step-2.svg: svg-make-step.svg step.xsl
svg-make-step-3.svg: svg-make-step.svg step.xsl
svg-make-step-4.svg: svg-make-step.svg step.xsl

Ne reste plus qu'à taper make et hop, création des fichiers SVG correspondant aux quatres étapes grâce à xsltproc puis conversion en PNG grâce à Inkscape qui peut fonctionner en mode batch.

Étape 1 Étape 2
Étape 4 Étape 3

J'utilise évidemment maintenant une technique similaire pour la documentation de Lasso (eh, un lien vers Lasso, Liberty Alliance GPL Open Source tout ça, puisque la raison d'être secrète de ce carnet a été percée, son seul rôle, l'augmentation de la notoriété de Lasso peut désormais être affiché au grand jour). (spéciale dédicace :) ).