Generar SVG desde XML mediante una XSLT
Por Eduard Puigdemunt el en Artículos

1 . Introduci髇
2 . Documento XML con los datos.
3 . Generando la informaci髇 en formato HTML
4 . Generando la informaci髇 en formato SVG
5 . Conclusiones
6 . Direcciones

Introduci髇

Como ya vimos en el art韈ulo "Presente y futuro de los gr醘icos vectoriales para la web" el SVG es un vocabulario XML para la definici髇 de gr醘icos vectoriales. Esto significa por tanto que para la edici髇, manipulaci髇 y generaci髇 de gr醘icos vectoriales con este vocabulario podemos utilizar las herramientas que normalmente utilizamos para trabajar con cualquier documento XML.

En este art韈ulo desarrollaremos un ejemplo en el cual a partir de un documento XML podemos obtener utilizando una XSLT (lenguaje de transformaci髇) un documento SVG que nos muestre de forma gr醘ica la informaci髇 del documento XML original.

NOTA: Para visualizar los gr醘icos necesitas el SVG Viewer que Adobe ofrece gratuitamente.

Documento XML con los datos.

Este es el fichero XML que utilizaremos como ejemplo a lo largo del art韈ulo:

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<resultados intervalo="10" valormaximo="100">
  <item nombre="enero">30</item>
  <item nombre="febrero">50</item>
  <item nombre="marzo">70</item>
  <item nombre="abril">10</item>
  <item nombre="mayo">100</item>
  <item nombre="junio">80</item>
  <item nombre="julio">25</item>
  <item nombre="agosto">60</item>
  <item nombre="septiembre">10</item>
  <item nombre="octubre">100</item>
  <item nombre="noviembre">90</item>
  <item nombre="diciembre">30</item>  
</resultados>

Suponemos que son los resultados mensuales de alg鷑 indicador de una empresa.

Generando la informaci髇 en formato HTML

Ya sabemos mostrar el anterior documento XML en formato HTML. Esto ya lo vimos en el art韈ulo "Generar HTML desde un XML mediante una XSLT", en el cual explicabamos como mediante el lenguaje de transformaci髇 XSLT y un procesador XSLT (utilizamos el XT de James Clark) pod韆mos convertir facilmente cualquier documento XML a HTML.

En nuestro ejemplo mediante la siguiente XSLT:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  version="1.0">

<xsl:output indent="yes"/>

<xsl:template match="resultados">
  <html>
    <head>
      <title>Generando HTML desde un XML</title>
    </head>
    <body>
      <table  border="1" cellpadding="2" cellspacing="3">
        <tr bgcolor="#F5F4EB">
          <td><b>Concepto</b></td>
          <td><b>Valor</b></td>
        </tr>
        <xsl:apply-templates select="item"/>
      </table>
    </body>
  </html>
</xsl:template>

<xsl:template match="item">
  <tr>
    <td><xsl:value-of select="@nombre"/></td>
    <td><xsl:value-of select="."/></td>
  </tr>
</xsl:template>

</xsl:stylesheet>

Obtendremos un fichero HTML que nos muestra la informaci髇 con el siguiente aspecto:

Resultado HTML de la conversi髇

Generando la informaci髇 en formato SVG

En este apartado vamos a mostrar el documento XML anterior en formato SVG de manera que podamos visualizar la informaci髇 que proporciona de forma gr醘ica.

Al ser el SVG un vocabulario XML podemos realizar esta conversi髇 utilizando el lenguaje de transformaci髇 XSLT y cualquier procesador XSLT est醤dar (yo he utilizado el XT de James Clark).

Proceso de transformaci髇

Nuestra intenci髇 es obtener un gr醘ico como el que se puede visualizar en la imagen inferior.

Gr醘ico que vamos a obtener.

[Formato SVG]

Los conocimientos que debemos tener para generar este gr醘ico no tienen porque ser en absoluto muy avanzados.

Del lenguaje SVG s髄o utilizamos principalmente los elementos:

  • rect, para pintar un rectangulo.
  • line, para pintar lineas.
  • text, para pintar texto.

Y el fichero XSLT es sencillo. Lo 鷑ico que lo complica un poco son las operaciones que debemos realizar para posicionar los elementos anteriores en las coordenadas adecuadas. Ademas estas tampoco tendr韆n que haber sido excesivamente complicadas pero, he desarrollado el ejemplo de manera que:

  • El gr醘ico se adapte al tama駉 de la ventana.
  • Esta parametrizado de manera que calcula el tama駉 de las columnas en funci髇 del n鷐ero de estas y el interlineado en las lineas horizontales en funci髇 del valor m醲imo y del n鷐ero de lineas que tenga.

La XSLT empieza con la definici髇 y el calculo de una serie de variables:

<xsl:variable name="yMargenTop">50</xsl:variable>
<xsl:variable name="yMargenBottom">100</xsl:variable>
<xsl:variable name="xMarginLeft">50</xsl:variable>
<xsl:variable name="xMarginRight">50</xsl:variable> 
<xsl:variable name="yGrafica">
  <xsl:value-of select="$yVentana - $yMargenTop - $yMargenBottom"/>
</xsl:variable>
...
...

en las que definimos y calculamos aspectos como:

  • Tama駉 de la ventana.
  • Margenes horizontales y verticales.
  • El n鷐ero de columnas que deberemos pintar y el espacio que ocuparan.
  • etc.

En la regla de construccion resultados empezamos a pintar el fichero SVG.

<xsl:template match="resultados">
  
  <svg width="{$xVentana}" height="{$yVentana}">

    <!-- Pintamos el rectangulo que contendra la gr醘ica -->

    <rect x="{$xMarginLeft}" 
          y="{$yMargenTop - 20}" 
          width="{$xGrafica}" 
          height="{$yGrafica + 20}" 
          style="fill:#E3DFCC;"/>

    <!-- Pintamos las lineas verticales -->

    <xsl:call-template name="plvertical"/>

    <!-- Pintamos las lineas horizontales y el texto que las acompa馻 -->

    <xsl:call-template name="plhorizontales"/> 

    <!-- Procesamos el elemento item para pintar las columnas -->
    
    <xsl:apply-templates select="item"/>
    
  </svg>
</xsl:template>

En primer lugar pintamos un rectangulo de color gris que sera el fondo sobre el que pintaremos la gr醘ica.

<rect x="{$xMarginLeft}" 
    y="{$yMargenTop - 20}" 
    width="{$xGrafica}" 
    height="{$yGrafica + 20}" 
    style="fill:#E3DFCC;"/>

Posteriormente pintamos la linea del eje de las Y mediante la regla de construcci髇 plvertical:

<xsl:template name="plvertical">
 <line x1="{$xMarginLeft}" 
       y1="{$yMargenTop - 20}" 
       x2="{$xMarginLeft}" 
       y2="{$posyGrafica}" 
       style="stroke:#000000; stroke-width:0.1" />
</xsl:template>

A continuaci髇 y mediante las reglas de construcci髇:

  • plhorizontales
  • plhorizontales1
  • plhorizontales2
  • ptextoy

pintamos el eje de las X y el resto de lineas horizontales con la numeraci髇 que le corresponde.

Posteriormente procesamos el elemento item para pintar los rectangulos y colocar el texto correspondiente. Esto lo hacemos mediante las reglas de construcci髇:

  • pintarRectangulo
  • ptextox

Obteniendo finalmente la imagen que mostrabamos en un principio.

Como pod閕s observar la l骻ica de la XSLT es muy sencilla y el 鷑ico punto que la hace un poco m醩 complicada es la necesidad de hacer calculos para posicionar las cosas y adaptarlas a las dimensiones de la ventana. Fijaros como por ejemplo cambiando los valores de las variables de la XSLT de la siguiente manera:

  • xVentana=300
  • yVentana=200

Y del XML:

  • intervalo=25

Obtenemos el siguiente gr醘ico:

Gr醘ico con otros par醡etros

[Formato SVG]

Conclusiones

Por tanto, y resumiendo:

  • El SVG es un vocabulario XML para la definici髇 de gr醘icos vectoriales.
  • Para crearlos, editarlos y manipularlos podemos utilizar las herramientas que utilizamos habitualmente con otros documentos XML. En en este art韈ulo hemos visto como utilizando XSLT podemos generar gr醘icos vectoriales desde otros XML.

El ejemplo ha sido sencillo, pero creo que es una clara muestra de la potencia del XML en general y del SVG en concreto:

  • Hemos visto como con poco esfuerzo hemos sido capaces de transformar un documento XML en formato HTML y en formato SVG.
  • Y si suponemos que este fichero XML lo hemos generado desde una base de datos o desde una hoja de c醠culo y que todo el proceso lo tenemos bien empaquetado en una aplicaci髇 no hay que ser un programador experto para entender la potencia de esta forma de trabajar.

Direcciones

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.