Creare animazioni,  3D, effetti e “editing” sulle immagini senza Flash, sembravano essere tutte cose impensabili prima di HTML5. Oggi invece tramite il nuovo tag “canvas” e il formato SVG  è possibile fare tutto ciò. Questo significa, ancora una volta, che Flash non serve più? Ovviamente no.

Andiamo con ordine e cerchiamo di capirne le differenze in modo da individuare – come sempre – il come e il quando dobbiamo usare una determinata tecnologia.

SVG

Cominciamo da quello più difficile ma anche più versatile: SVG. SVG è l'acronimo di Scalable Vector Graphics. Il nome la dice già lunga sulle sue potenzialità: grafica vettoriale scalabile. Sarebbe a dire: “disegnare in HTML come se fossimo in un software di grafica vettoriale”. Non solo,  queste grafiche possono essere anche animate o rimodellate runtime (cioè in fase di esecuzione della pagina).

Infatti i file grafici in SVG altro non sono che file in formato XML che, debitamente compilati (well-formed), permettono di realizzare alcuni prodotti niente male. Le immagini in formato SVG possono essere animate tramite il codice SMIL (Synchronized Multimedia Integration Language) altro codice basato su XML secondo gli standard indicati dal W3C.

Canvas

Il Canvas è un semplice nuovo tag di HTML5. In effetti da solo servirebbe a poco se non lo si incrementasse con JavaScript. Per fare un paragone semplice possiamo considerare il Canvas come una tavolozza e JavaScript come i colori e pennelli. E' tramite quest'ultimo infatti che il Canvas può renderizzare dinamicamente le immagini bitmap. In sostanza: “l'altro lato” delle immagini nel Web. SVG per il vettoriale, Canvas per le bitmap.

Flash

Last but not least: Flash. Come dicevamo, “il vecchio” terzo incomodo si pone come volano tra i due. Lo conosciamo bene e non dobbiamo certo spiegare cosa fa/non fa. Per certo rispetto a Canvas e SVG è molto più semplice e facile da usare anche da neofiti per animazioni sufficientemente complesse. Ovviamente non gira su browser di iPhone e iPad.

 

Riassumendo con una breve lista potremmo dire che:

SVG


  1. Non sempre è supportato da tutti i browser

  2. E' Ottimo per manipolare immagini vettoriali
  3. 
Permette di gestire gli eventi in maniera semplice
  4. 
Meno efficiente del CANVAS
  5. E' possibile disegnare e gestire immagini complesse grazie anche a prodotti di larga diffusione (Adobe Illustrator CS5, ad esempio)

CANVAS

  1. E' ben supportato dai browser principali
  2. Permette di manipolare le immagini bitmap in maniera approfondita
  3. Ha una difficile gestione degli eventi
  4. E' più performante dell'SVG
  5. Difficile da gestire se non si usano librerie JavaScript apposite.

FLASH

  1. Permette di creare animazioni anche complesse senza codice
  2. E' supportato da tutti i browser desktop. Ridotta diffusione e performance su mobile.
  3. Permette di gestire gli eventi in maniera semplice
  4. Più performante di Canvas e SVG
  5. Di facile gestione. Non necessita di librerie esterne.

Morale della favola: come al solito rimane la medesima.

  • Se devo sbarcare su mobile e tablet, Flash potrebbe non essere universale, SVG e Canvas si.
  • Se il mio lavoro è particolarmente complesso e ho bisogno di una buona personalizzazione dell'applicazione Flash potrebbe essere di più facile utilizzo. Se non sono sviluppatore skillato, devo affidarmi a prodotti di terze parti per SVG e Canvas.

A voi la scelta!
 

The following two tabs change content below.