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

La canvas viene disegnata tramite JavaScript per grafici 2D.

La canvas viene rendering a livello di pixel.

Nella 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 l'immagine 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'alta complessità riduce la velocità di rendering (qualsiasi applicazione che utilizza eccessivamente DOM non è veloce)
  • Non adatto per applicazioni di gioco