I siti web Netdesign utilizzano cookies. Maggiori informazioni alla pagina Informativa Cookies. Continuando la navigazione accetti il loro utilizzo. Se non desideri i Cookie vai alla pagina Opt out Cookies

Buon Venerdì da Netdesign -Vieni a trovarci su Facebook o Twitter, scrivici a info@netd.it o chiamaci ai numeri 338 94 23 302 / 331 99 22 729

Integrare SVG nelle pagine web con Raphael

L'SVG è un formato open basato sull'XML. Scopriamo come usare Raphael js per aggiungere facilmente SVG nelle pagine html.

ATTENZIONE! Il contenuto di questo articolo necessita di revisione perché redatto più di un anno fa. I comandi e la sintassi utilizzata potrebbero non funzionare in seguito a cambiamenti o aggiornamenti del software. Scrivici a Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. se hai bisogno di assistenza.

Articolo pubblicato il 17/03/2012

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 &lt;div id="element"&gt;&lt;/div&gt; 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&lt;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:

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 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.

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.

Hai trovato utile questo articolo?
Lasciaci un tuo sincero feedback

Pubblicati di recente

Articoli e documenti pubblicati di recente su questo sito web

  1. Un anno di obiettivi raggiunti
    online dal 16.04.2021
    ultima modifica il 16.04.2021


  2. Comunicazione orario estivo 2020
    online dal 29.07.2020
    ultima modifica il 31.07.2020


  3. Magento eCommerce
    online dal 23.07.2020
    ultima modifica il 23.07.2020


  4. Magento 1.x ha raggiunto l'End of Life
    online dal 01.07.2020
    ultima modifica il 01.07.2020


  5. Attenzione al "Virus" informatico
    online dal 02.04.2020
    ultima modifica il 02.04.2020


  6. Come utilizzare la mia casella di posta Dinomail su Smartphone?
    online dal 28.03.2020
    ultima modifica il 28.03.2020


Ulteriori articoli recenti

Competenze web

Le competenze di sviluppo, design e progettazione web del nostro team ci rendono punto di riferimento per la Sicilia orientale. Portali, creazione di piattaforme eCommerce ed applicazioni web personalizzate. A Catania, Siracusa, Ragusa e rispettive province.

Scopri le soluzioni web

Web Marketing

Da 10 anni curiamo le strategie di Web e Digital Marketing, SEO, Web Advertising, Social Media ed Analytics per tutti i nostri clienti raggiungendo il massimo dei risultati in quanto a diffusione del marchio ed intercettazione dei flussi di utenti più disposti all'acquisto e più facilmente convertibili in nuovi clienti.

Scopri le opportunità

Gestionali e CRM

Grazie alla profonda conoscenza di gestionali aziendali ed applicativi per la Customer Relationship Management, siamo in grado di rappresentare un importante supporto tecnico e strategico per quanto concerne la digitalizzazione delle imprese e lo sfruttamento di tutte le potenzialità applicative di cui hai bisogno.

Scopri le soluzioni IT

Hosting

Sappiamo quanto siano importanti i dati e le informazioni per un'azienda così come conosciamo appieno i possibili danni causati dalla loro perdita o furto. Ti offriamo l'accesso alla nostra infrastruttura informatica per qualsiasi esigenza di hosting siano esse di tipo web, posta, DNS, file sharing e molto altro.

Scopri le soluzioni web