Como ya vimos en el artículo "Presente y futuro de los gráficos vectoriales para la web" el SVG es un vocabulario XML para la definición de gráficos vectoriales. Esto significa por tanto que para la edición, manipulación y generación de gráficos vectoriales con este vocabulario podemos utilizar las herramientas que normalmente utilizamos para trabajar con cualquier documento XML.
En este artículo desarrollaremos un ejemplo en el cual a partir de un documento XML podemos obtener utilizando una XSLT (lenguaje de transformación) un documento SVG que nos muestre de forma gráfica la información del documento XML original.
NOTA: Para visualizar los gráficos 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ículo:
<?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ún indicador de una empresa.
Generando la información en formato HTML
Ya sabemos mostrar el anterior documento XML en formato HTML. Esto ya lo vimos en el artículo "Generar HTML desde un XML mediante una XSLT", en el cual explicabamos como mediante el lenguaje de transformación XSLT y un procesador XSLT (utilizamos el XT de James Clark) podíamos 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ón con el siguiente aspecto:
Generando la información en formato SVG
En este apartado vamos a mostrar el documento XML anterior en formato SVG de manera que podamos visualizar la información que proporciona de forma gráfica.
Al ser el SVG un vocabulario XML podemos realizar esta conversión utilizando el lenguaje de transformación XSLT y cualquier procesador XSLT estándar (yo he utilizado el XT de James Clark).
Nuestra intención es obtener un gráfico como el que se puede visualizar en la imagen inferior.
Los conocimientos que debemos tener para generar este gráfico no tienen porque ser en absoluto muy avanzados.
Del lenguaje SVG sólo utilizamos principalmente los elementos:
- rect, para pintar un rectangulo.
- line, para pintar lineas.
- text, para pintar texto.
Y el fichero XSLT es sencillo. Lo único que lo complica un poco son las operaciones que debemos realizar para posicionar los elementos anteriores en las coordenadas adecuadas. Ademas estas tampoco tendrían que haber sido excesivamente complicadas pero, he desarrollado el ejemplo de manera que:
- El gráfico se adapte al tamaño de la ventana.
- Esta parametrizado de manera que calcula el tamaño de las columnas en función del número de estas y el interlineado en las lineas horizontales en función del valor máximo y del número de lineas que tenga.
La XSLT empieza con la definición 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ño de la ventana.
- Margenes horizontales y verticales.
- El número 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áfica -->
<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ña -->
<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áfica.
<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ón 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ón y mediante las reglas de construcción:
- plhorizontales
- plhorizontales1
- plhorizontales2
- ptextoy
pintamos el eje de las X y el resto de lineas horizontales con la numeración 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ón:
- pintarRectangulo
- ptextox
Obteniendo finalmente la imagen que mostrabamos en un principio.
Como podéis observar la lógica de la XSLT es muy sencilla y el único punto que la hace un poco más 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áfico:
Conclusiones
Por tanto, y resumiendo:
- El SVG es un vocabulario XML para la definición de gráficos vectoriales.
- Para crearlos, editarlos y manipularlos podemos utilizar las herramientas que utilizamos habitualmente con otros documentos XML. En en este artículo hemos visto como utilizando XSLT podemos generar gráficos 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álculo y que todo el proceso lo tenemos bien empaquetado en una aplicación no hay que ser un programador experto para entender la potencia de esta forma de trabajar.
Direcciones
- [1] Especificación SVG (Candidato a recomendación), http://www.w3.org/TR/SVG/
- [2] Especificación XSLT, http://www.w3c.org/TR/xslt.
- [3] Artículo en castellano "Como convertir XML en HTML utilizando XSLT", http://html.programacion.net/taller/tw_xml_y_xslt.php
- [4] Artículo en castellano: "Presente y futuro de los gráficos vectoriales para la web",http://www.programacion.net/articulos/joa_svg1.php
- [5] Recopilación de direcciones sobre SVG, http://www.programacion.net/direcciones.php?categoria=SVG