SVG nel mondo reale

Link copiato negli appunti

In questo articolo NON verranno illustrate le principali caratteristiche di Scalable Vector Graphics (SVG), per le quali si rimanda ai precedenti articoli pubblicati in questo sito. Andremo invece a investigare quale ruolo possa assumere questo formato nel ciclo di vita di una pubblicazione Web o addirittura, come vedremo, in ambiti differenti dalla semplice diffusione in Internet.

Astraendoci dall'impiego finale che si voglia fare di un "componente visivo" in SVG, sappiamo di poter esprimere in questo formato una qualsiasi immagine statica, esportandolo dai tradizionali software per grafica vettoriale (quali Illustrator e CorelDraw), vettorializzando un'immagine raster (GIF, JPEG, PNG) con software quali Celinea CR2V, oppure includendo quest'ultima senza modifiche in un'immagine SVG attraverso l'elemento image.

A questo punto si aprono numerose possibilità di (ri)utilizzo dell'immagine che non richiedono particolari modifiche del codice originario: dal software gestionale griffato con il logo dell'azienda alla realizzazione della brochure di quest'ultima, progettare componenti in SVG consente la gestione unitaria dell'identità grafica del cliente e quindi una manutenzione più veloce.

Prima di trattare questi utilizzi "esotici" del formato, argomento della seconda parte di questo tutorial, tratteremo la realizzazione dell'usuale grafica statica di siti Web, con una breve digressione riguardo SVG Fonts, ovvero la possibilità di rappresentare (in modo portabile) un qualsiasi font all'interno di questo linguaggio XML. Nel prossimo articolo vedremo invece come animare la grafica prodotta attraverso il Modulo di Animazione ereditato da SMIL 2.0, piuttosto che agendo con ECMAScript (JavaScript, Jscript, ActionScript) sul Document Object Model generato, in analogia con HTML, da un sorgente SVG. Vedremo infine come inserire questo formato all'interno di una presentazione multimediale in SMIL, affiancando una interfaccia dalle spiccate doti d'interattività a filmati o brani musicali diffusi in streaming.

Gli esempi richiedono il plugin Adobe SVG viewer 3.0 o superiore. Dal momento che Internet Explorer per Mac non consente di interagire con i plugin attraverso JavaScript, Adobe ha incluso un interprete per questo linguaggio nella versione 3.0, rendendolo la migliore soluzione per un'utenza eterogenea di Windows, Mac e Linux. Il plugin è scaricabile gratuitamente nella sezione dedicata a SVG del sito di Adobe.

Componenti visive

SVG nasce con un'intrinseca modularità dettata dallo status di linguaggio XML, che consente di raggiungere, clonare e modificare (anche run-time) porzioni qualsiasi di un documento attraverso tre astrazioni differenti: SAX, DOM e XSL.

Il primo è appannaggio dei linguaggi di programmazione d'alto livello, mentre il DOM consente di manipolare i contenuti anche con linguaggi di scripting quali ECMAScript. eXtensible Stylesheet Language è infine il linguaggio XML per l'elaborazione di contenuti XML e si divide nelle Transformations (XSLT), in grado di produrre formati testuali qualsiasi, e nei Formatting Objects (XSL-FO) rivolti invece alla formattazione tipografica di documenti. Quest'ultimo è destinato essere sempre più utilizzato, dal momento che la convergenza tra pubblicazione online e offline diverrà ben presto essenziale per le grandi aziende e rappresenta in generale una delle frontiere aperte da XML. Internamente al linguaggio SVG, abbiamo poi la possibilità di definire un oggetto generico per istanziarlo in seguito più volte, eventualmente modificandone alcune caratteristiche, attraverso gli elementi def e use.

L'elemento radice svg può essere inoltre nidificato a piacere, consentendo l'inclusione di componenti preesistenti in un'immagine più complessa, ad esempio il layout del sito piuttosto che la copertina della brochure della propria società. L'elemento image consente poi l'inserimento di un'immagine SVG (oltre che GIF, JPG e PNG) contenuta in un file esterno.

Il primo esempio, realizzato con l’editor Jasc WebDraw, è il generico layout della homepage che utilizzerò nel corso dell’articolo e riassume i gradi di libertà elencati sin’ora:

Un cerchio blu viene definito e istanziato cinque volte a formare un logo a forma di impronta:
<defs>
…

<ellipse id="cerchio" cx="100" cy="200" rx="30"
ry="30"
style="fill:rgb(128,128,255);stroke:none;stroke-width:2"/>
</defs>
…

<use xlink:href="#cerchio"
transform="scale(0.45) translate(200 250) …"/>
<use xlink:href="#cerchio"
transform="scale(0.45) translate(300 350) …"/>
<use xlink:href="#cerchio"
transform="scale(0.45) translate(400 450) …"/>
<use xlink:href="#cerchio"
transform="scale(0.45) translate(500 550) …"/>
A fianco del titolo c’è invece un’immagine SVG ottenuta
(attraverso CR2V) da un’immagine JPG e direttamente inserita nel documento:

<svg width="800" height="600">
…

<svg width="150" height="150">
<g transform="scale(0.3) translate(35 24)">
…
</g>
</svg>
…
</svg>
Una seconda immagine JPG è stata inserita senza alcuna vettorializzazione preventiva:
<!—immagine raster inserita senza modifiche —>
<image x="350" y="220" width="400" height="300"
xlink:href="tata3.jpg" transform="translate(0 -3.2) …"/>

A chi volesse una soluzione gratuita per l’editing visuale di immagini
SVG, posso consigliare Sodipodi,
prodotto notevole sulla piattaforma nativa Unix/Linux e ora disponibile, sebbene
con qualche baco, anche per Windows.

SVG per la grafica statica

Se ci si accontenta di produrre da sorgenti SVG immagini raster tradizionali
(GIF, JPG o PNG), per impaginarle ad esempio nel proprio sito, esiste un software
in Java dell’Apache Software Foundation, denominato Batik,
che realizza proprio questo. Esso rappresenta una componente fondamentale per
l’utilizzo di SVG nell’attesa che si diffondano i plugin per questo
formato.

Ad esempio ritroviamo Batik all’interno di Cocoon,
un framework enorme (e gratuito) per il Web publishing, e XWeb,
una onestissima (e altrettanto gratuita) soluzione di content management per
siti di piccole e medie dimensioni: entrambe le piattaforme, scritte anch’esse
in Java, consentono di memorizzare in puro XML un intero sito, per tradurlo
a richiesta in HTML e immagini statiche.

In realtà è possibile creare sistemi simili da zero, dal momento
che è lo stesso XML a consentire l’inserimento di formati eterogenei
(XHTML, SVG, MathML, SMIL, …) all’interno dello stesso documento.
Gli editor visuali per grafica SVG dispongono in genere di questa funzionalità
ed è così possibile “tagliare" nel modo tradizionale
l’immagine JPG esportata per realizzare l’HTML finale.

Una volta scaricata la distribuzione, attualmente batik-1.5.zip, è
necessario innanzitutto decompattarla nella directory di istallazione utilizzando
la linea di comando (il prompt di DOS nei sistemi Windows, la shell nei sistemi
*nix):

[directory contenente batik-1.5.zip]>jar xvf batik-1.5.zip

A questo punto è sufficiente posizionarsi nella directory di istallazione
prodotta e invocare il comando:

[directory di Batik]>java -jar batik-rasterizer.jar [percorso del file
SVG]

A fianco del sorgente SVG Vedremo comparire una immagine PNG, il formato di
default di questo software; le alternative sono (JPG, PDF, TIFF) possono essere
impostate con uno dei molti parametri disponibili assegnando uno dei valori
tra image/jpeg application/pdf e image/tiff:

[directory di Batik]>java -jar batik-rasterizer.jar –m image/jpeg
[percorso del file SVG]

Nel corso della traduzione in formato raster, è ovviamente possibile
ridimensionare l’immagine, aumentare la compressione (solo per le immagini
JPG) o definire la risoluzione in dpi dell’immagine risultante. Ad esempio
per estrarre dal layout solo la testata utilizzero’ il comando:

[directory di Batik]>java -jar batik-rasterizer.jar -a 0,0,800,175 -w 800
-h 175 –d esempiheader.png esempilayout.svg

Il parametro –a specifica la “finestra" dell’immagine
originale che intendiamo catturare, nel nostro caso la banda superiore larga
800 pixels e alta 175; con i parametri –w e –h definiamo invece
le dimensioni dell’immagine prodotta mentre con –d stabiliamo un
nome differente da quello del sorgente per il file generato. Così facendo
proseguo a ricavare le altre immagini da inpaginare nell’HTML, limitandomi
per semplicità ad una sottile striscia orizzontale da usare come background
per i contenuti e una banda da porre in fondo alla pagina. Il secondo esempio
mostra la pagina Web ricavata dal layout in SVG dell’esempio precedente.

Una questione di stile

Un tool molto utile incluso in Batik è rappresentato da ttf2svg, un
programma in grado di ricavare dai TrueType Font del proprio computer la traduzione
in SVG Fonts. Con ogni sorta di programma di grafica, vettoriale e non,
siamo inevitabilmente limitati nella scelta dei caratteri: possiamo cioè
utilizzare solo i font resi disponibili dal sistema operativo o dal programma
di editing grafico del caso.

Nel caso di SVG questo rappresenta un problema ancora maggiore, dal momento
che l’immagine viene “interpretata" lato-client e non si può
pertanto avere alcuna sicurezza sulla resa finale dell’immagine: aprendo
il primo esempio su piattaforme differenti questa anomalia dovrebbe evidenziarsi
chiaramente.

SVG Fonts muove i propri passi dai cosiddetti WebFonts, un modulo dei Cascading
Style Sheets Livello 3 (CSS3) che in passato ha incontrato sostanziali problemi
di adozione su larga scala, principalmente per la banda richiesta dalla trasmissione,
oltre che dei contenuti, dei glifi necessari alla loro visualizzazione. Partendo
sempre dalla directory di Batik, è possibile creare il file SVG contenente
buona parte dei glifi corrispondenti al set di caratteri di un font TrueType,
attraverso il comando:

[directory di Batik]>java -jar batik-ttf2svg.jar [percorso file .ttf di
input] -o [percorso file .svg di output]

Per ognuno dei caratteri tradotti, viene restituito il percorso SVG in grado
di riprodurre l’esatto glifo di partenza. A questo punto possiamo inserire
nei documenti SVG, all’interno dell’elemento defs per la definizione
di componenti riusabili, i glifi da utilizzare copiandoli dal file prodotto
da Batik:

Così facendo abbiamo l’opportunità di assegnare
un nome convenzionale al font introdotto, nel nostro caso “My Donuts",
per referenziarlo successivamente come faremmo con un comune font TrueType o
di sistema:

<text x="166px" y="184px" transform="..."
style="...; font-family: My Donuts; …">Patata's</text>

Il terzo esempio
mostra ancora il layout iniziale, nel quale tuttavia la resa dei caratteri è
totalmente indipendente dal sistema, sebbene ancora dipendente dal plugin o
software utilizzato per la visualizzazione del formato SVG.

Abbiamo cercato di tratteggiare la metodologia
per un utilizzo proficuo del formato SVG all’interno di un progetto Web
reale; siete anche entrati in contatto con il software gratuito Batik, in grado
di elaborare sorgenti SVG in immagini raster. Nella seconda parte vedremo come
(ri)utilizzare la grafica creata precedentemente in ambienti differenti dalla
diffusione in rete, quali la stampa tradizionale e la realizzazione di interfacce
per applicativi, mettendo in luce ulteriori potenzialità di questo linguaggio.

SVG per la carta stampata

Un ambito nel quale si prevede un notevole interesse nel prossimo futuro è
quello della formattazione tipografica, tematica che conduce a riviste, brochure
e in generale prodotti per la stampa che richiedano una qualità superiore
rispetto a quella resa possibile nella pubblicazione online dal linguaggio HTML.

Per rendersi conto di questo basta stampare una qualsiasi pagina Web e porla
accanto ad una pagina di libro o rivista: nel secondo caso noterete un’arte
nella spaziatura delle lettere e nell’andare a capo che rende uniformi
i blocchi di testo e gradevole la lettura. I formati digitali nei quali vengono
solitamente rappresentati contenuti di questo tipo sono il PDF e il PostScript.
XSL consente finalmente di trattare in modo unificato i propri contenuti, codificandoli
in un formato “neutro" come XML e trasformarli poi per il Web (XSLT)
e per la carta stampata (XSL-FO) indifferentemente.

L’implementazione di riferimento per questo secondo fine è FO
Processor (FOP), della stessa fondazione di Batik, e permette di sperimentare
la convergenza di formati resa possibile dall’uso combinato di questi
linguaggi. Il mio scopo NON è quello di spiegare nessuna delle due tecnologie
XSL, argomenti ai quali intendo dedicare più di un articolo nel prossimo
futuro, quanto illustrare il suo utilizzo in combinazione con SVG. A questo
proposito ho modificato il layout della homepage
creata nel corso della prima parte, adattandolo al formato A4 della stampa tradizionale.

La pratica ideale è quella di separare gli elementi grafici della pagina
(il titolo, il logo a forma d’impronta, lo sfondo per il testo e le immagini)
per ricombinarli all’interno del foglio di stile XSL-FO, nel nostro caso
brochure.fo, che costituirà l’input
di FOP in grado di produrre il documento PDF finale. Questo implica tuttavia
la comprensione delle strutture principali del nuovo linguaggio introdotto e
questo esula dalle finalità dell’articolo. Ci limiteremo quindi a
definire alcuni di questi elementi, nello specifico le informazioni che siamo
abituati a trovare in cima e in calce al modello di formattazione (rispettivamente
il titolo e il numero di pagina) inserendo quindi un’ampia immagine SVG
rappresentante l’intero contenuto.

Questa pratica è destinata a produrre un file PDF abbastanza voluminoso,
dal momento che ogni elemento della pagina risultante verrà reso come oggetto
grafico, ma è funzionale a questo articolo e non richiede la conoscenza
approfondita degli altri linguaggi citati. A brochure contenenti una grafica
elaborata, o più semplicemente molte immagini, corrisponderà sempre
e comunque un PDF di dimensioni notevoli.

Codice di [ brochure.fo ]:

<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
...
<fo:page-sequence master-reference="first">

<fo:static-content flow-name="xsl-region-before">
<fo:block line-height="14pt" font-size="10pt"
text-align="end">Patata's Brochure</fo:block>
</fo:static-content>

<fo:static-content flow-name="xsl-region-after">
<fo:block line-height="14pt" font-size="10pt"
text-align="end">Pagina <fo:page-number/>
</fo:block>
</fo:static-content>

<fo:flow flow-name="xsl-region-body">
<fo:block space-before.optimum="3pt" space-after.optimum="20pt">
<fo:instream-foreign-object>

<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink/" width="540px"
height="700px">
<svg:title>Patata's Brochure</svg:title>
<!—incorpora il layout all’interno dell’immagine -->
<svg:image xlink:href="svgfonts.svg" width="800px"
height="1036px" transform="scale(0.67)"/>
</svg:svg>
</fo:instream-foreign-object>
</fo:block>
<fo:block/>
</fo:flow>
</fo:page-sequence>
</fo:root>

A questo punto, per ottenere il documento PDF corrispondente a questo foglio
di stile, è sufficiente eseguire da linea di comando:

[directory di istallazione di FOP ]> fop [percorso input .fo] [percorso
output .pdf]

Questo è il risultato (documento PDF)
dell’esecuzione di FOP sul file di input brochure.fo:

SVG per le interfacce in Java

Il rapporto intercorso tra il linguaggio di Sun e XML è stato da sempre
molto stretto: tra le affermazioni a mio giudizio più calzanti vi è
quella secondo cui “XML ha dato a Java qualcosa da fare". Da una
parte infatti il codice Java può essere tradotto da e verso XML attraverso
Java Architecture for XML Binding (JAXB), piuttosto che dare luogo ad una libreria
di tag (taglib) da utilizzare nelle Java Server Pages (JSP); dall’altra
molte implementazioni di riferimento (come il parser XT)
e in generale applicazioni per XML sono state sviluppate con questo linguaggio
di programmazione.

Per quanto riguarda SVG, la fonte resta sempre l’Apache Software Foundation
con la classe JSVGCanvas, che consente l’inserimento di un layout SVG
all’interno di un programma Java, oltre a una certa interazione con esso:
tra breve vedremo una classe Java che utilizzi come sfondo un layout
derivato, appositamente per questo scopo, dai precedenti.

E’ opportuno notare come, per la seconda volta nel corso dell’articolo,
sono stato in grado di modificare in modo sostanziale il layout originale (ad
esempio il titolo e le dimensioni dei singoli elementi grafici) ponendo mano
ad un file di testo con un comune editor, senza richiedere l’intervento
di un grafico. La sovrapposizione di un design caratteristico alla pura funzionalità
di un applicativo è d’altra parte una delle ragioni principali del
successo del Web… digressioni a parte, le fasi per realizzare questo sono
semplici:

Codice di [ PatataSVG.java ]:

...
// includere la classe JSVGCanvas
import org.apache.batik.swing.JSVGCanvas;
public class PatataSVG extends JApplet {
public void init() {
// un handle per il pannello principale
Container contentPane = getContentPane();
// utilizzo il posizionamento assoluto
contentPane.setLayout(null);
// creare la "tela" SVG
JSVGCanvas canvas = new JSVGCanvas();
try
{
// caricare l'immagine SVG
canvas.setURI( new File( "./interface.svg" ).toURL().toString() );
}
catch (Exception e)
{
System.out.println("File ./interface.svg not found");
}
...
// aggiungere la "tela" SVG al pannello principale
contentPane.add( canvas );
// posizionare l’elemento
canvas.setBounds(0, 0, 810, 460);
...
}
...
}

In primo luogo è necessario istanziare l’oggetto in grado di racchiudere elementi SVG esterni all’applicazione:

// creare la "tela" SVG
JSVGCanvas canvas = new JSVGCanvas();

E’ ora possibile accedere ad un generico URL, in rete piuttosto che in locale, presso il quale scaricare il sorgente SVG:

// caricare l'immagine SVG
canvas.setURI( new File( "./interface.svg" ).toURL().toString() );

Tutto il resto del codice riguarda l’integrazione della componente SVG
con l’interfaccia, oppure il funzionamento delle altre componenti Swing
utilizzate nell’esempio, può quindi essere tralasciato ai fini della
comprensione dell’articolo. Per eseguire il codice
appena illustrato e necessario aprire in una directory arbitraria l’archivio
contenente l’esempio e aggiungere al CLASSPATH, se già non l’avete
fatto, la stringa:

[directory di istallazione di Batik]batik.jar; [directory di istallazione
di Batik]libbatik-swing.jar

Da linea di comando è possibile ora eseguire la classe opportuna:

[directory dell’archivio]>java PatataSVG

SVG per le animazioni in Flash

Per quanto visto sin’ora, l’utilizzo più diretto di SVG è
quello di formato per la memorizzazione di generici oggetti grafici, da declinare
successivamente nel layout del proprio sito, della propria brochure, piuttosto
che l’interfaccia del software che si sta progettando. E’ anche
possibile utilizzare questo formato per generare in modo automatico contenuti
da inserire nelle animazioni in Flash.

Il Document Object Model (DOM) è senza dubbio il paradigma maggiormente
conosciuto dagli sviluppatori Web, dal momento che vi si ricorre per realizzare
la maggior parte delle funzionalità di DynamicHTML. ECMAScript è il
principale linguaggio per accedervi e la sua implementazione in Flash di Macromedia,
ActionScript, consente di importare un’immagine SVG traducendola nel formato
vettoriale SWF, che si fonda grossomodo sulle stesse primitive grafiche. In
genere anche i layout delle interfacce in Flash sono elaborati con Photoshop,
e solo in fase di produzione vengono importati o addirittura ricreati nell’ambiente
vettoriale fornito da Macromedia.

Actionscript permette invece di ricavare questo formato in modo automatico
da un sorgente SVG e raggiungere così una notevole fetta d’utenza,
con la diffusione del plugin per Flash nei moderni browser. Un esempio di questo,
purtroppo in lingua inglese, si trova presso actionscript-toolbox.com.
Un numero ancora maggiore d’informazioni e tutorial sull’argomento
si trovano presso il sito Flash Developer
dot nl, così come nell’ottimo libro Flash
XML StudioLab.

Indice lezioni

SVG nel mondo reale

Componenti visive

SVG per la grafica statica

Una questione di stile

SVG per la carta stampata

SVG per le interfacce in Java

SVG per le animazioni in Flash

Ti consigliamo anche

Crittografia e firma XML in Java - Apache Santuario

Ottimizzazione XML open source: EXIficient

L'ottimizzazione di documenti XML in Java

Open Graph Protocol, Facebook e il Web Semantico