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>
- Supportato da tutti i browser più importanti
- Gestione degli eventi complicata (o comunque più complicata di <svg>)
- E’ più performante (rispetto a <svg>)
- Il disegno avviene tramite linguaggio di scripting (tipicamente JavaScript)
<svg>
- Manca (per ora) un supporto esteso tra i browser più importanti
- Gestione degli eventi semplice
- Meno efficiente del <canvas>
- E’ possibile disegnare e gestire immagini complesse
Viviamo sereni… 🙂