9 Maggio, 2014 | Di Wellnet

SVG o Canvas per il tuo HTML5?

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: processingjskinetic.jspaper.jsfabric.js

Per tracciare una linea tramite Canvas, iniziare semplicemente con:

<canvas id="esempio" width="300" height="300">
  <!-- Se il browser non supporta il Canvas, è da segnalare all'utente -->
  <!-- Puoi inserire un contenuto "fallback" (testo, immagini, flash, etc..) -->
  <p>Il tuo browser non supporta Canvas HTML5.</p> 
</canvas>

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 o Canvas per il tuo HTML5?

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:

    SVG o Canvas per il tuo HTML5?
    Wellnet
    Wellnet

    Wellnet è una nuova realtà nel panorama delle agenzie digitali italiane: 70 expertise complementari e integrate, con sedi a Milano, Torino Cuneo e Modena, frutto della fusione di tre realtà di successo preesistenti.