SVG o Canvas per il tuo HTML5?
Questi due elementi vengono inseriti nell'HTML e sono spesso usati per creare animazioni, giochi, visual-data interattivi, etc.. Per il loro supporto sui browser, fare riferimento a: Canvas e SVG.
Di seguito ne elenchiamo a grandi linee le caratteristiche principali, senza dettagliare troppo il codice.
CANVAS
Letteralmente Tela: si comporta proprio come la tela per un pittore, delimita cioè l'area nella quale si potrà disegnare (sia in 2D che in 3D, anche se quest'ultimo non è supportato dalla maggior parte dei browser).
È un elemento/immagine bitmap programmabile, quindi agisce semplicemente sui pixel (raster). Essendo generato tramite programmazione non è quindi alla portata di tutti.
La sua "reazione agli eventi" (event handler) che si verifica nel documento è solo far si che si rigeneri tutta la scena, ridisegnandola. Le animazioni quindi avvengono frame by frame.
Il Canvas dipende da JavaScript, quindi se quest'ultimo è disabilitato o l'utente utilizza un lettore/interprete, non verrà visualizzato.
È adatto per applicazioni dinamiche tipo giochi e animazioni intensive, per via del suo caricamento più veloce e indipendente dal DOM.
Di seguito alcune librerie JavaScript per l'animazione in Canvas: processingjs, kinetic.js, paper.js, fabric.js
Per tracciare una linea tramite Canvas, iniziare semplicemente con:
Di seguito il codice JavaScript da inserire in fondo al codice HTML:
var canvas = document.getElementById('esempio'), context = canvas.getContext('2d'); // il codice che disegnerà verrà inserito di seguito... context.beginPath(); context.moveTo(50, 50); context.lineTo(250, 150); context.stroke();
L'immagine generata sarà questa:
SVG
È di base vettoriale, quindi scalabile e ottimo per schermi ad alta risoluzione.
Le immagini sono generate tramite XML, facili da creare anche senza esperienza di programmazione. Si possono usare i seguenti programmi/tool:
Le immagini create in SVG sono aggiunte al DOM e modificabili tramite Javascript e Css, anche con eventi che si hanno sugli altri elementi del documento.
Le animazioni agiscono sul "disegno" stesso, si possono quindi definire delle trasformazioni su di esso e non richiedono di rigenerare l'elemento SVG.
Si sconsiglia di usare gli SVG per animazioni intensive e giochi, perché, essendo integrati nel DOM, hanno tempi di caricamento più lunghi all'aumentare della complessità del documento. Vengono solitamente usati per icone animate e grafici interattivi non troppo complessi.
Su lato SEO gli SVG sono più accessibili perché supportano il testo.
Due tra le più usate librerie JavaScript per l'animazione e la gestione di visual-data in SVG sono d3.js e raphael.
Esempio per disegnare un cerchio con un bordo tramite SVG:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
L'immagine generata sarà questa:
