HTML 5 Canvas vs. SVG

Canvas e SVG ti permettono di creare grafici nel browser, ma sono fondamentalmente diversi.

SVG

SVG è un linguaggio che utilizza XML per descrivere grafici 2D.

SVG è basato su XML, il che significa che ogni elemento nel SVG DOM è disponibile. Puoi aggiungere un gestore di eventi JavaScript a un elemento.

In SVG, ogni grafico disegnato viene considerato come un oggetto. Se le proprietà dell'oggetto SVG cambiano, il browser può automaticamente ridisegnare il grafico.

Canvas

Il canvas disegna grafici 2D tramite JavaScript.

Il canvas viene rendering a livello di pixel.

Nel canvas, una volta che i grafici sono stati disegnati, non ricevono più l'attenzione del browser. Se la loro posizione cambia, l'intera scena deve essere ridisegnata, inclusi qualsiasi oggetto che potrebbe essere coperto dai grafici.

Confronto tra Canvas e SVG

La tabella seguente elenca alcune delle differenze tra canvas e SVG.

Canvas

  • Dipende dalla risoluzione
  • Non supporta i gestori di eventi
  • Poca capacità di rendering di testo
  • Può salvare le immagini di risultato in formato .png o .jpg
  • Più adatto per giochi ad alta densità di immagini, dove molti oggetti vengono disegnati frequentemente

SVG

  • Non dipende dalla risoluzione
  • Supporta i gestori di eventi
  • Più adatto per applicazioni con grandi aree di rendering (ad esempio Google Maps)
  • Un'elevata complessità riduce la velocità di rendering (tutte le applicazioni che utilizzano troppo DOM non sono rapide)
  • Non adatto per applicazioni di gioco