HTML5: differenza tra svg e canvas

Nel nuovo HTML5 sono stati introdotti, tra gli altri, due nuovi elementi: <svg> e <canvas>.
Entrambi gli elementi promettono di farci disegnare sulla nostra pagina web. Ma quali sono le differenze tra i due elementi?
Tante 🙂

Prima fra tutte quella che <canvas> ci consente di disegnare immagini bitmap, mentre <svg> immagini vettoriali! Potrebbe però non essere chiara la differenza tra un’immagine bitmap e un’immagine vettoriale. Semplificando il concetto possiamo dire che un’immagine bitmap quando viene ingrandita tende a sgranare, mentre un’immagine vettoriale no. Ma questa non è certamente l’unica differenza tra i due elementi.

<canvas>

  1. Supportato da tutti i browser più importanti
  2. Gestione degli eventi complicata (o comunque più complicata di <svg>)
  3. E’ più performante (rispetto a <svg>)
  4. Il disegno avviene tramite linguaggio di scripting (tipicamente JavaScript)

<svg>

  1. Manca (per ora) un supporto esteso tra i browser più importanti
  2. Gestione degli eventi semplice
  3. Meno efficiente del <canvas>
  4. E’ possibile disegnare e gestire immagini complesse

Viviamo sereni… 🙂

Hai letto questi articoli?