In questo articolo mostrerò come poter creare immagini SVG trasformando dati XML. Sarà spiegato come poter eseguire questa trasformazione, da XML a SVG, creando l'immagine in una pagina XHTML grazie alla tecnologia XSLT.
La sigla SVG sta per Scalable-Vector-Graphics, permette cioè di creare immagini vettoriali.
Poter scegliere di creare e mostrare grafici e altre immagini senza avvalersi di plug-in come Flash, applet Java o evitando di creare immagini sfruttando la potenza della programmazione server side ma utilizzando semplicemente un browser fornito dell'interprete XSLT è un rivoluzione!
Per poter eseguire l'esempio che riporto nell'articolo è necessario avvalersi di un browser fornito del plug-in Adobe-SVG-Viewer: FireFox lo ha di default, mentre per IE no.
Passiamo all'esempio: questo è composto da una base dati in formato XML e da un foglio di stile XSLT che crea una pagina XHTML nella quale è dichiarato il namespace SVG.
Tramite il prefisso svg creerò una serie di immagini all'interno di una pagina XHTML interpretando all'istante i dati contenuti nel documento XML.
L'esempio è molto semplice, quasi si commenta da solo.
Cliccando il seguente link puoi vedere l'anteprima del risultato finale di questo articolo.
Per quanto riguarda la base dati XML, siccome ho un'inclinazione al giardinaggio, mi sono ispirato ad una ipotetica serra da principiante, che contiene alcune specie di vegetali ed alcuni attrezzi necessari ad un giardiniere: il file XML serra.xml.
Il foglio di stile XSLT da abbinare al documento XML è stato pensato per fare risaltare i tag SVG, quindi si troverà poco codice HTML e poco codice CSS;
Come al solito tutti i passaggi chiave sono commentati all'interno del codice sorgente.
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="serra">
<!-- dichiarazione del contenuto della trasformazione xslt
e del namespace SVG -->
<html xmlns:svg="http://www.w3.org/2000/svg">
<!-- dichiarazione ed importazione del plugin di Adobe -->
<object id="AdobeSVG"
CLASSID="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
</object>
<xsl:processing-instruction name = "import" >
namespace="svg" implementation="#AdobeSVG"
</xsl:processing-instruction>
<head>
<title>Analisi Serra SVG</title>
<style>
th{
text-align: center;
font-size: 18pt;
color:red;}
td{ text-align:center; width:100%;height:100%;}
h2{ color: blue;}
<!-- testo del namespace SVG -->
text{
font-family:arial;
text-anchor:middle;
baseline-shift:-15;
fill: orange;
font-size: 9pt;}
</style>
</head>
<body>
<center>
<table>
<tr>
<th>La mia Serra con SVG e XHTML.</th>
</tr>
<tr>
<td> <h2>Vegetali</h2> </td>
</tr>
<tr>
<td>
<!-- creo lo spazio per contenere un
gruppo di oggetti SVG -->
<svg:svg width="70%" height="200px">
<!-- creo il gruppo di oggetti SVG :
transform="translate(0,200)"
permette di traslare la posizione
dell'elemento grafico di tx unita'
lungo l'asse X e di ty unita' lungo l'asse Y-->
<svg:g id="piante" transform="translate(0,200)">
<xsl:for-each select="pianta">
<xsl:variable name="valore" select="qta"/>
<!-- creo un'immagine di solo Testo -->
<svg:text
x="{position()*55 + 7.5}" y="0">
<xsl:value-of select="nome"/>
</svg:text>
<!--
Creo un'immagine rettangolare posizionata
ad x e y unita' dall'angolo in alto
a destra dello spazio dedicato,
di altezza = height e larghezza = 15.
Lo coloro con il valore XML {color}
e valorizzo l'attributo title in modo
che appaia un tip quando il mouse si
ferma sull'oggetto. -->
<svg:rect x="{position()*55}"
y="-{$valore*5 + 20}"
height="{$valore*5}"
width="15"
style="fill:{color}"
title="{colore}: {qta} pz."/>
</xsl:for-each>
</svg:g>
</svg:svg>
</td>
</tr>
<tr>
<td> <h2>Attrezzi</h2> </td>
</tr>
<tr>
<td>
<svg:svg width="70%" height="300px">
<svg:g id="attrezzi"
transform="translate(0,200)">
<xsl:for-each select="accessorio">
<xsl:variable name="valore"
select="qta"/>
<svg:text
x="{position()*90 + 7.5}" y="0">
<xsl:value-of select="nome"/>
</svg:text>
<svg:rect x="{position()*90}"
y="-{$valore*5 + 20}"
height="{$valore*5}"
width="15"
style="fill:{color}"
title="{colore}: {qta} pz."/>
</xsl:for-each>
</svg:g>
</svg:svg>
</td>
</tr>
</table>
</center>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Come anticipato, il codice non è per nulla complesso e la trasformazione ha in se qualcosa di magico ed eccezionale.
Per chi volesse approfondire il tema SVG può visitare i siti del Consorzio W3C W3Consortium_SVG e W3School_SVG_Tutorial.
Alla prossima,
MA.
0 commenti:
Posta un commento
Non ti è chiaro qualcosa?
No problem, posta il tuo dubbio ;)
..... e ricordati di firmarlo!