XML/SVG

Obiettivi di apprendimento

definire SVG e il suo scopo
comprendere le differenze tra grafica raster e SVG
definire somiglianze e differenze tra Flash e SVG
creare un semplice documento SVG

Che cos'è SVG?

Basato su XML, Scalable Vector Graphics (SVG) è un formato di file di grafica vettoriale: è uno standard aperto, ed è anche un linguaggio di sviluppo web creato dal W3C e progettato per essere compatibile con altri standard W3C come DOM, CSS, XML, XSLT, XSL, SMIL, HTML e XHTML. SVG consente la creazione di file di grafica di alta qualità generata dinamicamente in tempo reale. SVG consente di progettare elementi grafici ad alta risoluzione che possono includere gradienti, caratteri incorporati, trasparenze, animazioni ed effetti filtro.

I file SVG sono diversi dai formati raster o bitmap come GIF e JPEG, i quali devono includere tutti i pixel necessari per visualizzare un elemento grafico. Per questo motivo, i file GIF e JPEG tendono a essere pesanti, sono limitati a una sola risoluzione e consumano grandi quantità di banda. I file SVG sono significativamente più piccoli delle loro controparti raster. Inoltre, l'uso di vettori significa che la grafica SVG mantiene la propria risoluzione a qualsiasi livello di ingrandimento. SVG ti consente di ridimensionare la grafica, utilizzare qualsiasi tipo di carattere e stampare i tuoi progetti, il tutto senza compromettere la risoluzione. SVG è basato su XML e scritto in testo semplice, il che significa che il codice SVG può essere modificato con qualsiasi editor di testo. Inoltre, SVG offre importanti vantaggi rispetto ai formati bitmap o raster: vediamo quali.

Zoom: gli utenti possono ingrandire un'immagine senza avere problemi di risoluzione.
Il testo rimane testo: il testo rimane modificabile e ricercabile. Inoltre, è possibile utilizzare qualsiasi tipo di carattere.
Dimensioni file ridotte: i file SVG sono in genere più piccoli di altri formati grafici per il web e possono essere scaricati più rapidamente.
Indipendenza dal display: le immagini SVG appaiono sempre nitide sullo schermo, indipendentemente dalla risoluzione. Non troverai mai immagini sgranate.
Miglior controllo del colore: SVG offre una tavolozza di 16 milioni di colori.
Interattività: poiché SVG è basato su XML, offre un'interattività dinamica in grado di rispondere alle azioni dell'utente.

Grafica basata sui dati

Poiché è scritto in XML, il contenuto di un file SVG può essere collegato a processi aziendali back-end, a database e ad altre fonti di informazioni. I documenti SVG utilizzano standard esistenti come Cascading Stylesheets (CSS) ed Extensible Stylesheet Language (XSL), consentendo di personalizzare facilmente la grafica. Questo composta alcuni vantaggi.

Costi di manutenzione ridotti: poiché SVG consente di modificare dinamicamente gli attributi delle immagini, cade la necessità di avere diversi formati di uno stesso file. SVG consente di specificare stati e comportamenti di rollover tramite script. I pulsanti di navigazione complessi, ad esempio, possono essere creati utilizzando solo un file SVG, mentre normalmente ciò richiederebbe più file raster.
Riduzione dei tempi di sviluppo: SVG separa i tre elementi del flusso di lavoro tradizionale: contenuto (dati), presentazione (grafica) e logica dell'applicazione (scripting). Con i file raster, l'intera grafica deve essere ricreata completamente se vengono apportate modifiche al contenuto.
Soluzioni server scalabili: sia il client sia il server possono eseguire il rendering della grafica SVG. Poiché il client può essere utilizzato per il rendering della grafica, SVG può ridurre i carichi del server. Il rendering sul lato client può infatti migliorare l'esperienza dell'utente consentendo agli utenti di "ingrandire" un grafico SVG. Inoltre, il server può essere utilizzato per eseguire il rendering della grafica se il client ha risorse di elaborazione limitate, come un PDA o un telefono cellulare. In entrambi i casi, il contenuto del file rimane identico.
Facilità di aggiornamento: SVG separa il design dal contenuto, consentendo di aggiornare entrambi facilmente.

Grafica interattiva

SVG consente di creare applicazioni, strumenti o interfacce utente basati sul web. Inoltre, è possibile incorporare linguaggi di scripting e di programmazione come JavaScript, Java e Visual Basic. Qualsiasi elemento SVG può essere utilizzato per modificare o controllare qualsiasi altro elemento SVG o HTML. Poiché SVG è basato sul testo, il testo all'interno della grafica può essere tradotto rapidamente per altre lingue, il che semplifica il lavoro di localizzazione. Inoltre, se c'è una connessione a un database, SVG consente la funzionalità di drill-down per grafici e diagrammi. Questo comporta vari vantaggi.

Una migliore esperienza per l'utente finale: gli utenti possono inserire i propri dati, modificare i dati o persino generare nuova grafica da due o più fonti di dati.
In SVG, il testo è testo: come ricordato, SVG tratta il testo come testo. Ciò rende la grafica basata su SVG ricercabile dai motori di ricerca.
SVG può creare SVG: possono essere sviluppate applicazioni aziendali come per esempio una guida in linea.

Grafica personalizzata

SVG può essere orientato a seconda dell'utente, per superare i problemi culturali, di accessibilità e di estetica, e può essere personalizzato per pubblici differenti. SVG può anche essere generato dinamicamente utilizzando le informazioni raccolte da un database o dall'interazione con l'utente. L'obiettivo è quello di avere un file sorgente che si adatta perfettamente a un'ampia varietà di situazioni.

Una sola fonte, aspetto personalizzato: SVG consente di cambiare colore e altre proprietà in base a problemi di estetica, culturali e di accessibilità. SVG può utilizzare i fogli di stile per personalizzare il suo aspetto in diverse situazioni.
Internazionalizzazione, localizzazione: SVG supporta i caratteri Unicode per visualizzare efficacemente il testo in molte lingue e mode - in verticale, in orizzontale e bidirezionale.
Utilizzo di standard esistenti: SVG funziona perfettamente con i fogli di stile al fine di controllare la presentazione. I fogli di stile a cascata (CSS) possono essere utilizzati per le caratteristiche tipiche dei caratteri, nonché per altri elementi grafici SVG. Ad esempio, è possibile controllare il colore del tratto, il colore di riempimento e l'opacità di riempimento di un elemento da un foglio di stile esterno.

Perché usare SVG?

SVG sta prendendo piede grazie agli sforzi del W3C e dei suoi membri. È open source e come tale non richiede l'uso di linguaggi proprietari e particolari strumenti di sviluppo. Poiché è basato su XML, è familiare agli sviluppatori e consente loro di utilizzare competenze già possiedono. SVG è basato sul testo e può essere appreso sfruttando il lavoro (o il codice) di altri, il che riduce significativamente la curva di apprendimento complessiva. Inoltre, poiché SVG può incorporare JavaScript, DOM e altre tecnologie, gli sviluppatori che hanno familiarità con questi linguaggi possono creare elementi grafici allo stesso modo. SVG ha anche un'alta compatibilità perché funziona con HTML, GIF, JPEG, PNG, SMIL, ASP, JSP e JavaScript. Infine, la grafica creata in SVG è scalabile e non comporta perdita di qualità su piattaforme e dispositivi diversi. SVG può quindi essere utilizzato per il Web, nella stampa e su dispositivi portatili mantenendo la qualità.

Creazione di file SVG

Come farlo

Si possono usare 4 gruppi di programmi:

editor di testo generali, come Notepad ++ (con evidenziazione della sintassi XML)
editor svg specializzati
programmi che possono esportare svg (come gnuplot, Maxima CAS)
propri programmi per creare file svg direttamente tramite concatenazione di stringhe

Editor SVG

I file SVG sono scritti in un formato estremamente abbreviato per ridurre al minimo le dimensioni del file. Tuttavia, possono essere molto difficili da scrivere a seconda della complessità della tua immagine. Esistono strumenti dell'editor SVG che possono aiutare a semplificare questo compito. Alcuni di questi strumenti sono:

Editor SVG	Piattaforma	Disponibilità	Descrizione
Adobe Illustrator	Mac, Windows	Prodotto commerciale	Illustrator è in grado di esportare nel formato SVG e di modificare direttamente immagini SVG, anche senza conoscere il codice.
Sodipodi	Linux / UNIX	Open Source (gratuito, con sorgente)	Editor WYSWIG per grafica vettoriale.
Corel Draw!	Windows, Mac	Prodotto commerciale	Può importare ed esportare SVG.
Inkscape	Linux, Windows, Mac	Gratuito	Editor WYSIWYG, consente di modificare direttamente l'XML.

Programmi propri

C

Ecco un esempio in C:

  / *

 Programma console c basato su:
 codice cpp di Claudio Rocchini

 http://commons.wikimedia.org/wiki/File:Poincare_halfplane_eptagonal_hb.svg


 http://validator.w3.org/
 Il documento caricato "circle.svg" è stato verificato correttamente come SVG 1.1.
 Ciò significa che la risorsa in questione si è identificata come "SVG 1.1"
 e che abbiamo eseguito con successo una convalida formale utilizzando SGML, HTML5 e / o XML
 Parser (s) (a seconda del linguaggio di markup utilizzato).

 * /
 
 #include <stdio.h>
#include <stdlib.h>
#include <math.h>


const double PI = 3.1415926535897932384626433832795;

const int  iXmax = 1000,
           iYmax = 1000,
           radius=100,
           cx=200,
           cy=200;


const char *black="#FFFFFF", /* hexadecimal number as a string for svg color*/
           *white="#000000";

 FILE * fp;
 char *filename="circle.svg";
 char *comment = "<!-- sample comment in SVG file  \n can be multi-line -->";


void draw_circle(FILE * FileP,int radius,int cx,int cy)
{
    fprintf(FileP,"<circle cx=\"%d\" cy=\"%d\" r=\"%d\" style=\"stroke:%s; stroke-width:2; fill:%s\"/>\n",
    cx,cy,radius,white,black);
}


int main(){

        // setup
        fp = fopen(filename,"w");
	fprintf(fp,
		    "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n"
		    "%s \n "
           "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \n"
           "\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n"
           "<svg width=\"20cm\" height=\"20cm\" viewBox=\"0 0 %d %d \"\n"
           " xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n",
           comment,iXmax,iYmax);

        // draw
	draw_circle(fp,radius,cx,cy);

        // end
        fprintf(fp,"</svg>\n");
	fclose(fp);
	printf(" file %s saved \n",filename );

	return 0;
}

Matlab

Basato sul codice di Guillaume JACQUENOT:^[1]

filename = [filename '.svg'];
fid = fopen(filename,'w');
fprintf(fid,'<?xml version="1.0" standalone="no"?>\n');
fprintf(fid,'"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n');
fprintf(fid,'<svg width="620" height="620" version="1.1"\n');
fprintf(fid,'xmlns="http://www.w3.org/2000/svg">\n');
fprintf(fid,'<circle cx="100" cy="100" r="10" stroke="black" stroke-width="1" fill="none"/>\n');
fprintf(fid,'</svg>\n');
fclose(fid);

Maxima

 BeginSVG(file_name,cm_width,cm_height,i_width,i_height):=
 block(
 destination : openw (file_name),
 printf(destination, "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>~%"),
 printf(destination,"<svg width=\"~d cm\" height=\"~d cm\" viewBox=\"0 0 ~d ~d\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">~%",
 cm_width,cm_height,i_width,i_height),
 return(destination)
 );
 CircleSVG(dest,center_x,center_y,_radius):=printf(dest,"<circle cx=\"~d\" cy=\"~d\" r=\"~d\" fill=\"white\" stroke=\"black\" stroke-width=\"2\"/>~%",
 center_x,center_y,_radius);
 CloseSVG(destination):=
 (
 printf(destination,"</svg>~%"),
 close (destination)
 );
 /* ---------------------------------------------------- */
 cmWidth:10;
 cmHeight:10;
 iWidth:800;
 iHeight:600;
 radius:200;
 centerX:400;
 centerY:300;
 f_name:"b.svg";
 /* ------------------------------------------------------*/
 f:BeginSVG(f_name,cmWidth,cmHeight,iWidth,iHeight);
 CircleSVG(f,centerX,centerY,radius);
 CloseSVG(f);

Python

Si può usare una libreria apposita o racchiudere il codice SVG tra virgolette singole.

def svg_page():
 """ Funzione per scrivere codice SVG per una pagina di prova
 Il codice grezzo che utilizza le virgolette alte è preso
 per diventare una stringa di testo in python."""
 page='<?xml version="1.0"?>\n<svg xmlns="http://www.w3.org/2000/svg" top="0in" width="5.5in" height="2in">\n    <rect fill="blue" width="250" height="200"/>\n</svg>\n'
 return page

def write_page(page, title):
    """ Funzione per scrivere il codice svg su disco """
    filename = title + ".svg"
    f = open(filename, "w")
    f.write(page)

write_page (svg_page(), "My svgstub")

Per iniziare

Poiché si basa su XML, SVG segue le convenzioni XML standard. Ogni file SVG è contenuto in un tag <svg> come elemento principale. SVG può essere incorporato in un documento principale o utilizzato in modo indipendente. Ad esempio, quanto segue mostra un documento SVG:

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    ...
</svg>

La prima riga dichiara che il codice che segue è XML. Nota l'attributo "standalone": indica che questo particolare file non contiene sufficienti istruzioni di elaborazione per funzionare da solo. Per avere la funzionalità richiesta per visualizzare un'immagine particolare, il file SVG deve fare riferimento a un documento esterno.

La seconda riga fornisce un riferimento alla definizione del tipo di documento o DTD. Il DTD è un modo alternativo per definire i dati contenuti in un documento con istanza XML. Gli sviluppatori che hanno familiarità con HTML noteranno che la dichiarazione DTD è simile a quella di un documento HTML, ma in questo caso è specifica per SVG. Per ulteriori informazioni sui DTD, visitare: http://www.w3schools.com/dtd/dtd_intro.asp

Suggerimento: molti IDE (es. NetBeans) non hanno "template" SVG integrati. Pertanto, potrebbe essere più semplice utilizzare un semplice editor di testo durante la creazione di documenti SVG. Dovresti poi essere in grado di aprire e visualizzare il documento SVG con qualsiasi browser. Quando crei i tuoi documenti SVG, ricorda di:

dichiarare il tuo documento come file XML,
assicurarti che gli elementi del tuo documento SVG siano tra tag <svg>, inclusa la dichiarazione dello spazio dei nomi SVG,
salvare il tuo file con l'estensione .svg,
Non è necessario includere un'istruzione DOCTYPE, che include informazioni per identificarlo come documento SVG (dal momento che SVG 1.2 non esiste più).^[2]^[3]^[4]

L'elemento <svg> sulla seconda riga definisce il documento SVG e può specificare, tra le altre cose, il sistema di coordinate dell'utente e vari identificatori di unità CSS. All'interno dell'elemento <svg>, ci possono essere tre tipi di elementi: testo, forme e tracciati.

Testo

Di seguito è riportato un esempio dell'elemento di testo:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="5.5in" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="0.5in">
   <text y="15" fill="red">This is SVG.</text>
</svg>

L'elemento <svg> specifica:

che verrà mantenuto lo spazio bianco all'interno degli elementi di testo,
la larghezza e l'altezza del documento SVG, particolarmente importante per specificare le dimensioni dell'output di stampa.

In questo esempio, il testo è posizionato in un'area dell'immagine larga 5,5 pollici e alta 0,5 pollici. L'attributo "y" sulla riga 5 dichiara che la linea di base dell'elemento di testo è di 15 pixel in basso dalla parte superiore del documento SVG. Un attributo "x" omesso su un elemento di testo implica una coordinata x=0.

Poiché i documenti SVG utilizzano un DTD W3C, è possibile utilizzare il validatore W3C per convalidare il documento. Si noti che l'attributo "stile" viene utilizzato per descrivere la presentazione dell'elemento di testo. Allo stesso modo, il testo avrebbe potuto essere di colore rosso usando un attributo di presentazione fill="red".

Forme

SVG contiene i seguenti elementi di forma base:

rettangoli
cerchi
ellissi
linee
polilinee
poligoni

Queste forme di base, insieme ai "percorsi" che verranno trattati più avanti nel capitolo, costituiscono le forme grafiche di SVG. In questa introduzione a SVG, tratteremo solo alcune delle forme.

Rettangoli

L'elemento <rect> definisce un rettangolo allineato all'asse con il sistema di coordinate dell'utente. I rettangoli arrotondati possono essere creati impostando i valori per gli attributi rx e ry.

L'esempio seguente produce un rettangolo blu con l'angolo in alto a sinistra che si allinea con l'angolo in alto a sinistra dell'area dell'immagine. Utilizza il valore predefinito "0" per gli attributi x e y.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" top="0in" width="5.5in" height="2in">
    <rect fill="blue" width="250" height="200"/>
</svg>

Questo è il risultato:

Cerchi

Un cerchio richiede tre attributi: cx, cy e r. I valori cx e cy specificano la posizione del centro del cerchio mentre il valore r specifica il raggio. Se gli attributi cx e cy non sono specificati, si presume che il punto centrale del cerchio sia (0, 0). Se l'attributo r è impostato su zero, il cerchio non verrà visualizzato. A differenza di cx e cy, l'attributo r non è facoltativo e deve essere specificato. Inoltre, l'attributo stroke crea un contorno dell'immagine. È possibile modificare sia la larghezza che il colore.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="300">
    <circle cx="100" cy="50" r="40" stroke="darkslategrey" stroke-width="2" fill="grey"/>
</svg>

Il risultato sarà:

Poligoni

Un poligono è qualsiasi figura geometrica costituita da tre o più lati. Gli attributi points descrivono le coordinate (x, y) che specificano i punti degli angoli del poligono. Per questo esempio specifico, ci sono tre punti che indicano che verrà prodotto un triangolo.

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <polygon points="220,100 300,210 170,250" style="fill:#blue; stroke:red; stroke-width:2"/>
</svg>

Questo è il risultato:

Percorsi

I percorsi vengono utilizzati per disegnare forme personalizzate in SVG e sono descritti utilizzando i seguenti attributi di dati:

Attributo	Comando	Parametri	Funzione	Descrizione
Moveto	M	x y	Imposta un nuovo punto attuale	Inizia un nuovo sotto-percorso alla coordinata (x, y) indicata.
Lineto	L	x y	Traccia una linea retta	Traccia una linea dal punto corrente alla coordinata (x, y) che diventa il nuovo punto corrente.
Horizontal lineto	H	x	Disegna una linea orizzontale	Disegna una linea orizzontale dal punto corrente (cpx, cpy) a (x, cpy).
Vertical lineto	V	y	Disegna una linea verticale	Disegna una linea verticale dal punto corrente (cpx, cpy) a (cpx, y).
Curveto	C	x1 y1 x2 y2 x y	Disegna una curva cubica di Bezier	Disegna una curva cubica di Bézier dal punto corrente a (x, y) utilizzando (x1, y1) come punto di controllo all'inizio della curva e (x2, y2) come punto di controllo alla fine della curva.
Smooth curveto	S	x2 y2 x y	Disegna una curva morbida usando una curva cubica di Bezier	Disegna una curva cubica di Bézier dal punto (x,y). Il primo punto di controllo è assunto come la riflessione del secondo punto di controllo sul comando precedente relativo al punto corrente. (x2,y2) è il secondo punto di controllo (cioè il punto di controllo alla fine della curva).
Quadratic Belzier curveto	Q	x1 y1 x y	Disegna una curva quadratica di Bézier	Disegna una curva quadratica di Bézier dal punto corrente (x, y) utilizzando (x1, y1) come punto di controllo.
Smooth quadratic Belzier curveto	T	x y	Disegna una curva di Bézier quadratica morbida	Disegna una curva quadratica di Bézier dal punto corrente a (x, y).
Elliptical arc	A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	Disegna un arco ellittico o circolare	Disegna un arco ellittico dal punto (x, y). Le dimensioni e l'orientamento dell'ellisse sono definiti da due raggi (rx, ry) e una rotazione dell'asse x, che indica come l'ellisse nel suo insieme viene ruotata rispetto al sistema di coordinate corrente. Il centro (cx, cy) dell'ellisse viene calcolato automaticamente per soddisfare i vincoli imposti dagli altri parametri. bandiera ad arco grande e bandiera a scorrimento contribuiscono ai calcoli automatici e aiutano a determinare come viene disegnato l'arco.
Closepath	Z	(none)	Chiudi il percorso corrente tracciando una linea all'ultimo punto di movimento	Chiude il sottotraccia corrente disegnando una linea retta dal punto corrente al punto iniziale del sottotraccia corrente.

L'esempio seguente produce la forma di un triangolo. La "M" indica un "moveto" per impostare il primo punto. La "L" indica "lineto" per tracciare una linea da "M" alle coordinate "L". La "Z" indica un "percorso ravvicinato", che disegna una linea dall'ultima serie di coordinate L al punto di partenza M.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="5.5in" height="2in">
    <path d="M 50 10 L 350 10 L 200 120 z"/>
</svg>

Il risultato sarà:

Validazione

Dopo aver creato il file, controlla il suo codice con W3C Validatior^[5]

Ottimizzazione

Anche un codice senza errori può essere migliorato. Ad esempio, raggruppare gli elementi rende il codice più breve.

Includere SVG in HTML

Esistono tre metodi per includere SVG in un documento HTML. Fondamentalmente, il documento SVG viene prima creato come file autonomo. Viene quindi indicato nel documento HTML utilizzando uno dei seguenti comandi:

Comando	Vantaggi	Svantaggi
`<Embed>`	Supportato da quasi tutti i browser Consente script `html2svg` e `svg2html`	Non chiaramente standardizzato in nessuna specifica HTML
`<Object>`	HTML4 e standard superiori Supportato dai browser di nuova generazione	Funziona su browser più recenti ma senza script `html2svg` e `svg2html`
`<Iframe>`	Funziona nella maggior parte dei browser, ma non è documentato	Genera un bordo simile a una finestra senza uno stile specifico

Incorporare

La sintassi è la seguente:

<embed src="canvas.svg" width="350" height="176" type="image/svg+xml" name="emap">

Un attributo aggiuntivo, pluginspage, può essere impostato sull'URL da cui è possibile scaricare il plug-in:

pluginspage="http://www.adobe.com/svg/viewer/install/main.html"

Oggetto

La sintassi è la seguente ed è conforme alla specifica HTML 4 Strict:

<object type="image/svg+xml" name="omap" data="canvas_norelief.svg" width="350" height="176"></object>

Tra i tag <object> di apertura e chiusura, è possibile aggiungere informazioni per i browser che non supportano oggetti:

<object ...>You should update your browser</object>

Iframe

La sintassi è la seguente ed è conforme alla specifica di HTML 4 Transitional:

<iframe src="canvas_norelief.svg" width="350" height="176" name="imap"></iframe>

Tra i tag <iframe> di apertura e chiusura, è possibile aggiungere informazioni per i browser che non supportano iframe:

<iframe ...>You should update your browser</iframe>

Creazione di immagini SVG 3D

Potremmo voler visualizzare un'immagine SVG in tre dimensioni. Finora abbiamo creato grafiche bidimensionali, come cerchi e quadrati. Questi esistono su un semplice piano, con coordinate x, y. Se vogliamo guardare qualcosa in tre dimensioni, dobbiamo aggiungere il piano di coordinate z. Dobbiamo quindi aggiungere un altro parametro al file di dati, il parametro z.

<?xml version="1.0"?>
  <data>
  <subject x_axis="90" y_axis="118" z_axis="0" color="red" />
  <subject x_axis="113" y_axis="45" z_axis="75" color="purple" />
  <subject x_axis="-30" y_axis="-59" z_axis="110" color="blue" />
  <subject x_axis="60" y_axis="-50" z_axis="-25" color="yellow" />
</data>

Una volta che avremo i dati useremo XSLT per creare il file SVG. Il foglio di stile SVG è lo stesso di altri fogli di stile, ma dobbiamo assicurarci che durante la trasformazione venga creato un file SVG. Chiamiamo lo spazio dei nomi SVG con questa linea nelle dichiarazioni:

xmlns="http://www.w3.org/2000/svg

Agli esempi precedenti dovremo poi cambiare l'origine di (0, 0). Modifichiamo l'origine in questo esempio perché alcuni dei nostri dati sono negativi. L'origine predefinita è nell'angolo in alto a sinistra del grafico SVG. I valori negativi non vengono visualizzati perché, diversamente dai piani di coordinate tradizionali, i valori negativi sono sopra ai valori positivi. Per spostare l'origine aggiungiamo semplicemente una riga di codice al foglio di stile. Prima di andare oltre quella linea, diamo un'occhiata all'elemento g. L'elemento contenitore, g, viene utilizzato per raggruppare elementi grafici correlati. Qui useremo g per raggruppare i nostri elementi grafici e quindi potere applicare la trasformazione. Ecco come dichiariamo g e cambiamo l'origine in un punto 300 pixel a destra e 300 pixel in basso:

<g transform="translate(300,300)">elemento grafico</g>

Le trasformazioni in SVG sono piuttosto semplici, finché non si tratta di cambiare prospettiva. SVG ha funzioni come la rotazione e l'inclinazione dell'immagine in due dimensioni, ma non può ruotare il sistema di coordinate in tre dimensioni. Per questo avremo bisogno di usare un po' di matematica e un po' di Java. Quando si ruota in tre dimensioni è necessario eseguire due rotazioni, una attorno all'asse y e un'altra attorno all'asse x. La prima rotazione sarà attorno all'asse y e la formula sarà simile a questa:

$z'=z\cdot \cos(-Az)-x\cdot \sin(-Az)$ Az è l'angolo di rotazione dell'asse z

$x'=z\cdot \sin(-Az)-x\cdot \cos(-Az)$

$y'=y\,$ y non cambierà perché stiamo ruotando attorno all'asse y

La seconda rotazione sarà attorno all'asse x. si tenga presente che è già stata effettuata una rotazione, quindi invece di utilizzare i valori x, y e z dobbiamo usare x', y' e z' (x-prime, y-prime e z-prime) presenti in l'ultima rotazione. La formula sarà simile a questa:

$z''=z'\cdot \cos(Ay)-y'\cdot \sin(Ay)$ Ay è l'angolo di rotazione sull'asse y

$y''=z'\cdot \sin(Ay)+y'\cdot \cos(Ay)$

$x''=x'$ Ricorda che stiamo ruotando attorno all'asse x, quindi questo non cambia

Nelle università anglofone, nei corsi di trigonometria si usa l'acronimo SOH CAH TOA, che significa

Sin = Opposite/Hypotenuse
Cos = Adjacent/Hypotenuse
Tan = Opposite/Adjacent

Usiamo queste funzioni per trovare gli angoli necessari per le nostre rotazioni. Sulla base delle due precedenti formule possiamo fare le seguenti affermazioni su Az e Ay:

$\tan(Az)={\frac {Xv}{Zv}}$

$\sin(Ay)={\frac {Yv}{\sqrt {Xv2+Yv2+Zv2}}}$

Con così tanti passaggi da compiere per effettuare la rotazione, dovremmo rilasciare tutte queste informazioni in una classe Java, quindi chiamare la classe nel foglio di stile. La classe Java dovrebbe essere in grado di eseguire tutti i calcoli per determinare dove andranno i nuovi punti dati una volta effettuata la rotazione. La creazione di quella classe java va oltre lo scopo di questa sezione, ma per questo esempio la chiameremo ViewCalc.class.

Ora che possiamo ruotare l'immagine, dobbiamo integrare quella capacità nella trasformazione. Useremo i parametri per passare punti di vista nel foglio di stile durante la trasformazione. Il punto di vista predefinito sarà (0, 0, 0) e viene specificato sul foglio di stile in questo modo:

     <?xml version="1.0" ?>
     <xsl:stylesheet version="1.0"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <!-- default viewpoint in case they are not specified  -->
        <!-- from the command line -->
        <xsl:param name="viewpoint_x">0</xsl:param>
        <xsl:param name="viewpoint_y">0</xsl:param>
        <xsl:param name="viewpoint_z">0</xsl:param>
     <xsl:template match="/">
      …

Java ora deve essere aggiunto al foglio di stile in modo che il processore sappia quali metodi chiamare. Due righe vengono aggiunte alle dichiarazioni dello spazio dei nomi:

     <?xml version="1.0" ?>
     <xsl:stylesheet version="1.0"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
         <b>xmlns:java="ViewCalc"
         exclude-result-prefixes="java"</b>>

Notare la riga exclude-result-prefixes="java": viene aggiunta in modo che gli elementi nel foglio di stile con il prefisso Java: vengano elaborati, ma non in output. Assicurarsi di avere la classe ViewCalc in CLASSPATH altrimenti la trasformazione non verrà eseguita.

Il passaggio finale consiste nel chiamare i metodi nella classe ViewCalc dal foglio di stile. Per esempio:

   <xsl:template match="square">
        <xsl:for-each select=".">
         <xsl:variable name="locationx" select="@x_axis"/>
         <xsl:variable name="locationy" select="@y_axis"/>
         <xsl:variable name="locationz" select="@z_axis"/>
        <xsl:variable name="thisx" select="java:locationX($locationx,$locationy,
          $locationz, $viewpoint_x, $viewpoint_y,
          $viewpoint_z)"/>
        <xsl:variable name="thisy" select="java:locationY($locationx,
          $locationy, $locationz, $viewpoint_x, $viewpoint_y,
          $viewpoint_z)"/>
       </xsl:for-each>

Infine passiamo i nuovi parametri ed eseguiamo la trasformazione XSL per creare il file SVG con un punto di vista diverso.

Note

↑ 2D Apollonian gasket with four identical circles by Guillaume JACQUENOT ł
↑ W3C SVG 1.1 Recommendation: SVG Namespace, Public Identifier and System Identifier, see also W3C SVG 2 Editor’s Draft: SVG namespace and DTD (06 February 2013)
↑ SVG authoring and web server configuration guidelines. Jonathan Watt Don't include a DOCTYPE declaration
↑ Mozilla on SVG: Namespaces Crash Course, Getting Started
↑ validator w3.org

[1] 2D Apollonian gasket with four identical circles by Guillaume JACQUENOT ł

[2] W3C SVG 1.1 Recommendation: SVG Namespace, Public Identifier and System Identifier, see also W3C SVG 2 Editor’s Draft: SVG namespace and DTD (06 February 2013)

[3] SVG authoring and web server configuration guidelines. Jonathan Watt Don't include a DOCTYPE declaration

[4] Mozilla on SVG: Namespaces Crash Course, Getting Started

[5] validator w3.org

[1]

[2]

[3]

[4]

[5]