Integrare SVG nelle pagine web con Raphael

Integrare SVG nelle pagine web con Raphael.

Cos'è e cosa offre l'SVG

L'SVG (Scalable Vector Graphics) è una tecnologia - ed un formato file - che permette la visualizzazione di oggetti grafici vettoriali, scalabili per loro natura. La scalabilità intrinseca dell'SVG permette al software di "disegnare" in tempo reale le forme, e i riempimenti, adattandoli alla superficie visibile. Il formato vettoriale SVG è quindi immune alla degradazione grafica tipica del ridimensionamento di immagini raster.

L'SVG è un linguaggio di markup basato interamente sull'XML. Come l'HTML, implementa il concetto di DOM (Document Object Model) che permette di aggiungere animazioni interattive ma soprattutto offre una potente interfaccia di controllo per ECMAscript (javascript). È così possibile dare vita ad entusiasmanti animazioni di ogni genere, impossibili col solo HTML.

Pur offrendo funzionalità simili al contenitore canvas, le due tecnologie si differenziano profondamente: l'SVG è pensato per oggetti vettoriali - scalabili - mentre l'ormai famosissimo canvas lavora su una "griglia di pixel".

I loro campi di utilizzo sono dunque molto differenti e capita spesso di chiedersi quale sia la tecnologia più adatta alle proprie esigenze (Vi segnaliamo a tal proposito un'interessante discussione avvenuta su Stackoverflow che mette a confronto SVG e Canvas: SVG vs CANVAS, where is the Web World going towards?).

Lo standard del W3C

Lo sviluppo dello standard SVG iniziò nel lontano 1999 ad opera del World Wide Web Consortium (W3C). Pochi mesi prima, alcune famose aziende software, avevano proposto al W3C due differenti formati per la grafica vettoriale: il PGML ed il VML i quali erano stati sviluppati autonomamente da Adobe, il primo, e da Microsoft, il secondo.

Il W3C ebbe quindi l'arduo compito di sviluppare una tecnologia che supportasse la grafica vettoriale e che fosse uno standard de facto, fondendo in un'unica specifica le diverse esperienze maturate dallo sviluppo di tante eterogenee tecnologie vettoriali.

Nel corso degli anni lo standard SVG è stato più volte migliorato e sempre più browser ne hanno integrato il supporto nativo (a volte parziale).

Sfortunatamente Internet Explorer supporta SVG soltanto dalla versione 9, tagliando fuori un'importantissima percentuale di utenti web. Con Raphael è comunque possibile includere grafica vettoriale nelle versioni di Internet Explorer precedenti alla 9: Raphael "ripiega" automaticamente sul linguaggio VML, supportato nativamente nelle vecchie versioni di IE.

Il supporto dei browser

Secondo il sito caniuse.com, la percentuale di browser che supportano nativamente le funzioni basilari del formato SVG (embedding con object o embed) si aggira intorno al 71%. Il supporto di codice SVG "inline" è peggiore e risulta disponibile soltanto nel 68% dei browsers.

Sul fronte mobile il supporto nativo ad SVG è veramente un disastro e, sebbene sia possibile utilizzare SVG esterni (object/embed) nel 71% dei browser mobili, gli utenti delle versioni 2.1, 2.2 e 2.3 di Android sono comunque costretti ad installare Opera Mini, il quale, a differenza del browser di default, implementa SVG nelle versioni 5 e 6.

La compatibilità con gli SVG inline (utilizzati da Raphael) nelle piattaforme mobili è ancora più bassa: soltanto la versione 5 di iOS supporta questa feature mentre su Android è necessario avere nel proprio smartphone la versione Honeycomb oppure Ice Cream Sandwich.

Gli utenti delle versioni di Android più diffuse (Froyo e Gingerbread), che equivalgono a più dell'85% del totale, possono comunque colmare il gap, ma sono obbligati ad installare Opera Mobile che risulta essere l'unico browser per Android ad implementare nativamente gli SVG inline.

Dato lo scarso supporto di SVG è consigliabile l'utilizzo di Modernizr in tutti i progetti web che necessitano di grafica vettoriale al fine di caricare una libreria di fallback (polyfill) per riempire, se necessario, le mancanze del browser.

NOTA: Vi consigliamo di consultare le Tabelle di Compatibilità SVG costantemente aggiornate.

Perchè usare Raphael js

Raphael è una libreria javascript leggera (~86 Kb) che semplifica la creazione di oggetti grafici vettoriali all'interno di una pagina html. Raphael è compatibile con lo standard SVG definito dal W3C e supporta anche VML, utilizzato esclusivamente su Internet Explorer come motore di rendering vettoriale alternativo ad SVG. Raphael è quindi l'unica libreria di grafica vettoriale realmente crossbrowser (*).

Con Raphael è possibile gestire gli eventi del DOM ed aggiungere animazioni a qualsiasi elemento SVG semplificando enormemente la creazione di elaborati grafici interattivi.

I campi di applicazione di Raphael sono molti e variano dalla creazione di animazioni puramente estetiche alla realizzazione di grafici (charts) per la visualizzazione di dati.

Usare Raphael

Vediamo come usare Raphael all'interno delle nostre pagine web. Prima di tutto è necessario scaricare la libreria dal sito ufficiale di Raphael ed integrare lo script nella pagina:

Blocco di codice #1

<html> <head> <script src="./path/to/raphael.js"></script> </head> <!-- ... --> </html>

A questo punto inizializziamo ed inseriamo un foglio SVG all'interno della pagina, o all'interno di un elemento HTML, utilizzando l'oggetto Raphael.

Blocco di codice #2

// Crea un foglio SVG di dimensioni 320x200 pixels all'interno del documento con coordinate 10, 50. var paper = Raphael(10, 50, 320, 200); // Crea un foglio SVG di dimensioni 320x200 pixels all'interno dell'elemento 'element'. var paper = Raphael("element", 50, 320, 200);

Forme integrate

Adesso che abbiamo il nostro canvas SVG è possibile inserire degli oggetti grafici vettoriali. Ricordate che l'origine degli assi di un foglio SVG corrisponde al vertice superiore sinistro dello stesso. Tutte le coordinate andranno quindi espresse con valori "pesati" da sinistra verso destra e dall'alto verso il basso.

L'oggetto paper di Raphael offre parecchi metodi utili all'inserimento di forme geometriche semplici come cerchi ed ellisse. Per cominciare inseriamo un cerchio posizionato al centro del foglio con un raggio di 50 pixel:

Blocco di codice #3

var width = 600; var height = 300; // Crea un foglio SVG di dimensioni 600x300 pixels all'interno dell'elemento 'element'. var paper = Raphael("element", width, height); // Ricordate che l'elemento 'element' deve già esistere all'interno del DOM, se non l'avete già fatto, aggiungete <div id="element"></div> al vostro doc // Inserisce un cerchio al centro del "paper" var circle = paper.circle(width/2, height/2, 50);

Dopodiché inseriamo un rettangolo utilizzando il metodo .rect() che accetta come argomenti le coordinate xy del vertice superiore sinistro e le dimensioni dello stesso (largezza ed altezza):

Blocco di codice #4

// Inserisce un rettangolo largo 100px, alto 50px con coordinate x10 y10 var rectangle = paper.rect(10, 10, 100, 50);

Infine aggiungiamo un'ellisse tramite il metodo .ellipse() che vuole come argomenti le coordinate del centro e le lunghezze dei suoi due raggi:

Blocco di codice #5

// Inserisce un'ellisse con centro in x100 y100 ed i due raggi rispettivamente di 80 e 30 pixels var ellipse = paper.ellipse(100, 100, 80, 30);

Aggiungendo un minimo di complessità al codice, il nostro script avrà il seguente aspetto:

Blocco di codice #6

// Larghezza del foglio SVG var width = 600; // Altezza del foglio SVG var height = 300; // Crea un foglio SVG all'interno dell'elemento 'element'. var paper = Raphael("canv", width, height); // Inserisce molti cerchi, rettangoli ed ellissi for(var i = 0; i<30; i++){ paper.circle(0+(i*80), 60, 50); paper.rect(0+(i*100), 140, 100, 50); paper.ellipse(0+(i*120), 240, 80, 30); }

che, una volta renderizzato nel browser apparirà in questo modo:

Esempio creazione forme semplici con Raphael js

Probabilmente avrete notato che nello script completo (Blocco di codice #6) non sono state usate variabili di riferimento agli oggetti grafici. L'uso di variabili non è obbligatorio ma risulta comunque utile per accedere agli oggetti in un secondo momento ed aggiungere attributi o animazioni.

Lavorare con i path

Le forme integrate in Raphael sono molto utili, ma, per utilizzare l'intera potenza dell'SVG è necessario utilizzare i path. Un path è un insieme di regole che permette all'SVG di disegnare forme molto più complesse delle figure geometriche di base. Per disegnare un path è necessario utilizzare una particolare sintassi, definita dal W3C nel capitolo Path Data.

I path sono definiti da una pathstring che va immaginata come una sequenza di istruzioni utili a dar vita all'oggetto grafico desiderato. Un esempio di pathstring è il seguente:

Blocco di codice #7

var width = 600; var height = 300; var pathString = "M 250 150 l 0 -50 l 100 0 l 0 50 l -100 0 z"; var paper = Raphael("canv", width, height); paper.path(pathString);

In basso il risultato renderizzato da SVG. Fate attenzione al punto A: le sue coordinate sono 250, 150 e corrispondono alla prima istruzione del pathstring: l'origine della forma (M 250 150). Le successive istruzioni disegnano il rettangolo seguendo un percorso orario di vertice in vertice. L'istruzione l 0 -50, ad esempio, stabilisce le coordinate del vertice superiore sinistro del rettangolo spostandosi dall'origine (250, 150) di 0 pixel in orizzontale e di -50 pixel in verticale.

Utilizzo dei Path con Raphael js ed SVG

Adesso è arrivato il momento di disegnare qualcosa di più complesso, ad esempio un ottagono regolare:

Blocco di codice #8

var width = 600; var height = 300; var paper = Raphael("canv", width, height); var pathString = "M 290 190 l -30 -30 l 0 -30 l 30 -30 l 30 0 l 30 30 l 0 30 l -30 30 l -30 0 z"; var pth = paper.path(pathString); // Rendiamo più visibile il nostro ottagono impostando uno spessore del bordo pari a 4 pixels pth.attr("stroke-width", 4);

Una volta che avrete inserito il blocco di codice #8 nel vostro documento HTML, questa è l'immagine che vi apparirà:

Ottagono regolare disegnato con una pathstring e Raphael js

Gestire gli attributi

Tutti gli elementi SVG godono di attributi che permettono di modificarne l'aspetto, di inserire dei link o di trasformare (ruotare, scalare) l'elemento stesso. Di seguito la lista degli attributi più importanti.

Blocco di codice #9

/* Riempimento e bordo ------------- */ // Spessore del bordo object.attr("stroke-width", 4); // Riempimento della forma object.attr("fill", "#f0f0f0"); // Opacità del riempimento object.attr("fill-opacity", 50); // Colore del bordo object.attr("stroke", "#a0a0a0"); // Opacità del bordo object.attr("stroke-opacity", 50); // Gradiente del riempimento 'grad°-#startColor-#endColor' object.attr('gradient', '90-#BBCBFF-#3866FF'); /* Trasformazioni ------------------ */ // L'attributo transform accetta istruzioni con una sintassi simile a quella della pathstring. // I comandi disponibili sono r[n°] = ruota di n gradi; s[n] = scala n volte; t[x,y] = trasla di x e y. object.attr("transform", "r45,s2"); /* Varie --------------------------- */ object.attr("href", "http://www.netd.it/sviluppo/"); object.attr("target", "blank");

Animazioni ed eventi

Adesso realizziamo qualcosa di più concreto: un'icona a forma di casa, con animazioni collegate agli eventi mousein/mouseout ed un link che punta alla home del nostro sito web. È possibile vedere in azione lo script seguente, eseguilo su jsfiddle.

Blocco di codice #10

// Larghezza del foglio SVG var width = 600; // Altezza del foglio SVG var height = 300; // Crea un foglio SVG all'interno dell'elemento 'element'. var paper = Raphael("canv", width, height); // Pathstring dell'icona "home" var pathString = "M 270 190 l 0 -50 l -18 0 l 60 -45 l 60 45 l -18 0 l 0 50 z m 20 -40 l 0 40 l 20 0 l 0 -40 z"; // Aggiungiamo la forma al foglio var pth = paper.path(pathString); // Dichiariamo un oggetto javascript contenente un elenco di proprietà var attributes = {"stroke-width":4, "cursor":"pointer", "href":"//www.netd.it", "target":"blank", "stroke": "#e7e7e7", "gradient": "90-#BBCBFF-#3866FF"}; // Passiamo gli attributi all'oggetto pth.attr(attributes); // Inizializziamo un'animazione di zoomIn in modalità 'elastica' var mouseIn = Raphael.animation({'transform':'s1.25'}, 1000, "elastic"); // Inizializziamo un'animazione di zoomOut in modalità 'elastica' var mouseOut = Raphael.animation({'transform':'s1'}, 1000, "elastic"); // Associamo le animazioni agli eventi mouse[in/out] pth.mouseover(function(){this.animate(mouseIn);}); pth.mouseout(function(){this.animate(mouseOut);});

Conclusioni

Raphael js è davvero un'ottima libreria. La semplicità di utilizzo e la velocità di apprendimento fanno di Raphael un ottimo strumento per lo sviluppo e l'integrazione di grafica vettoriale sul web. Non esitate a commentare per qualsiasi domanda o dubbio, i feedback sono ben accetti.

Per approfondire l'argomento Raphael vi consigliamo di consultare la sua documentazione completa.

(*) Sebbene esistano altre librerie javascript che offrono un supporto crossbrowser all'SVG, Raphael resta comunque la sola libreria SVG a non utilizzare Flash o Canvas come "ripiego". L'unica valida alternativa a Raphael sembra essere svgweb che si affida a Flash per il rendering del codice SVG.

Netdesign black logo


Netdesign di Fabio Buda, Via Pietro Nenni n.2
96013, Carlentini, SR, P.Iva 01687250892, C.F. BDUFBA87C10C351T
http://www.netd.it - info@netd.it

Made with ❤ in Sicily by Netdesign