Canvas vs SVG: Scegliere lo strumento giusto per il lavoro

HTML5 Canvas e SVG sono entrambe tecnologie HTML5 standard che puoi utilizzare per creare fantastiche grafiche e esperienze visive. La domanda che pongo in questo articolo è la seguente: dovrebbe importare quale utilizzi nel tuo progetto? In altre parole, ci sono casi d’uso che preferiscono HTML5 Canvas rispetto a SVG?

In primo luogo, dedicheremo alcune parole all’introduzione di HTML5 Canvas e SVG.

Che cos’è HTML5 Canvas?

Ecco come la specifica WHATWG introduce l’elemento canvas:

L’elemento canvas fornisce agli script una bitmap dipendente dalla risoluzione, che può essere utilizzata per la renderizzazione di grafici, grafica per giochi, arte o altre immagini visive in tempo reale.

In altre parole, il tag <canvas> espone una superficie dove puoi creare e manipolare immagini rasterizzate pixel per pixel utilizzando un’interfaccia programmabile JavaScript.

Ecco un semplice esempio di codice:

Il codice HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

Il codice JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

Puoi sfruttare i metodi e le proprietà dell’API HTML5 Canvas ottenendo un riferimento all’oggetto di contesto 2D. Nell’esempio sopra, ho disegnato un semplice quadrato rosso, di dimensioni 100 x 100 pixel, posizionato a 10px da sinistra e 10px dall’alto della superficie di disegno <canvas> drawing surface.

Essendo dipendente dalla risoluzione, le immagini che crei su <canvas> potrebbero perdere qualità quando ingrandite o visualizzate su display Retina.

Disegnare semplici forme è solo la punta dell’iceberg. L’API Canvas HTML5 ti permette di disegnare archi, percorsi, testo, gradienti, ecc. Puoi anche manipolare le tue immagini pixel per pixel. Ciò significa che puoi sostituire un colore con un altro in determinate aree dei grafici, puoi animare i tuoi disegni e persino disegnare un video sul canvas e modificare il suo aspetto.

Che cos’è SVG?

SVG sta per Scalable Vector Graphics. Secondo la specifica:

SVG è un linguaggio per descrivere grafica bidimensionale. Come formato autonomo o quando mescolato con altro XML, utilizza la sintassi XML. Quando mescolato con HTML5, utilizza la sintassi HTML5. …

I disegni SVG possono essere interattivi e dinamici. Le animazioni possono essere definite e attivate sia in modo dichiarativo (cioè, inserendo elementi di animazione SVG nel contenuto SVG) o tramite scripting.

SVG è un formato di file XML progettato per creare grafica vettoriale. Essendo scalabile ha il vantaggio di permetterti di aumentare o ridurre un’immagine vettoriale mantenendo la sua nitidezza e alta qualità. (Questo non può essere fatto con le immagini generate da HTML5 Canvas.)

Ecco lo stesso quadrato rosso (precedentemente creato con HTML5 Canvas) questa volta disegnato utilizzando SVG:

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

È possibile fare con SVG la maggior parte delle cose che si possono fare con Canvas, come disegnare forme e tracciati, gradienti, pattern, animazioni e così via. Tuttavia, queste due tecnologie funzionano in modi fondamentalmente diversi. A differenza di una grafica basata su Canvas, SVG ha un DOM e, come tale, entrambi CSS e JavaScript vi hanno accesso. Ad esempio, è possibile cambiare l’aspetto di una grafica SVG utilizzando CSS, animare i suoi nodi con CSS o JavaScript, fare in modo che una qualsiasi delle sue parti risponda a un evento mouse o tastiera allo stesso modo di un <div>. Come diventerà più chiaro nelle sezioni successive, questa differenza gioca un ruolo significativo quando si deve scegliere tra Canvas e SVG per il proprio prossimo progetto.

Immediate Mode e Retained Mode

È cruciale distinguere tra modalità immediata e modalità conservata. HTML5 Canvas è un esempio della prima, SVG della seconda.

La modalità immediata significa che, una volta che il disegno è sul canvas, il canvas smette di tenerne traccia. In altre parole, tu, come sviluppatore, devi lavorare ai comandi per disegnare gli oggetti, creare e mantenere il modello o la scena di come dovrebbe apparire l’output finale e specificare cosa deve essere aggiornato. L’API grafica del browser semplicemente comunica i tuoi comandi di disegno al browser, che poi li esegue.

SVG utilizza l’approccio retentivo, dove si emettono semplicemente le istruzioni di disegno di ciò che si desidera visualizzare sullo schermo, e l’API grafica del browser crea un modello in memoria o una scena dell’output finale e lo traduce in comandi di disegno per il proprio browser.

Essendo un sistema grafico immediato, Canvas non ha un DOM, o Document Object Model. Con Canvas, si disegnano i pixel e il sistema li dimentica, riducendo così la memoria extra necessaria per mantenere un modello interno del proprio disegno. Con SVG, ogni oggetto disegnato viene aggiunto al modello interno del browser, il che rende la vita come sviluppatore un po’ più semplice, ma a un certo costo in termini di prestazioni.

Sulla base della distinzione tra modalità immediata e retentiva, così come altre caratteristiche specifiche di Canvas e SVG rispettivamente, è possibile delineare alcuni casi in cui l’uso di una tecnologia rispetto all’altra potrebbe meglio servire gli obiettivi del proprio progetto.

HTML5 Canvas: Pro e Contro

La specifica HTML5 Canvas raccomanda chiaramente che gli autori non utilizzino l’elemento <canvas> dove hanno a disposizione altri mezzi più adatti.

Ad esempio, per un elemento <header> ricco di grafica, gli strumenti migliori sono HTML e CSS, non <canvas> (e neppure SVG, tra l’altro). Dr Abstract, creatore e fondatore del Zim JS canvas framework, conferma questa visione mentre scrive:

Il DOM e i framework DOM sono bravi nell’esporre informazioni e in particolare informazioni testuali. In confronto, il canvas è una immagine. Il testo può essere aggiunto al canvas e può essere reso reattivo, ma il testo non può essere facilmente selezionato o cercato come nel DOM. Lunghe pagine scorrevoli di testo o testo e immagini sono un ottimo uso del DOM. Il DOM è ottimo per siti di social media, forum, shopping e tutti gli app informativi a cui siamo abituati. — “Quando Usare una Libreria o Framework JavaScript per Canvas”

Quindi, questo è un chiaro esempio di quando non usare <canvas>. Ma quando <canvas> è una buona opzione?

Questo tweet di Sarah Drasner riassume alcuni dei principali pro e contro delle caratteristiche e capacità del canvas, che possono aiutarci a identificare alcuni casi d’uso per questa potente tecnologia:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

Puoi visualizzare l’immagine dal tweet qui.

Cosa HTML5 Canvas Può Essere Ottimo Per

Alvin Wan ha confrontato Canvas e SVG in termini di prestazioni sia in relazione al numero di oggetti disegnati che in relazione alle dimensioni degli oggetti o del canvas stesso. Afferma i suoi risultati come segue:

In sintesi, l’eccesso di rendering del DOM è più evidente quando si devono gestire centinaia, se non migliaia di oggetti; in questo scenario, il Canvas è il chiaro vincitore. Tuttavia, sia il canvas che l’SVG sono invarianti rispetto alle dimensioni degli oggetti. Alla fine, il canvas offre un chiaro vantaggio in termini di prestazioni.

Basandoci su ciò che sappiamo del Canvas, in particolare la sua eccellente capacità di disegnare molti oggetti, ecco alcuni possibili scenari in cui potrebbe essere appropriato, e persino preferibile, rispetto all’SVG.

Giochi e Arte Generativa

Per giochi graficamente intensi, altamente interattivi, così come per l’arte generativa, il Canvas è generalmente la scelta migliore.

Ray Tracing

Il ray tracing è una tecnica per la creazione di grafica 3D.

Il ray tracing può essere utilizzato per migliorare un’immagine tracciando il percorso della luce attraverso i pixel in un piano immagine e simulando gli effetti dei suoi incontri con oggetti virtuali. … Gli effetti ottenuti tramite il ray tracing, … vanno dalla creazione di immagini realistiche a partire da grafica vettoriale altrimenti semplice all’applicazione di filtri simili a quelli fotografici per rimuovere gli occhi rossi. — SVG vs Canvas: come scegliere, Microsoft Docs.

Se sei curioso, ecco un’applicazione di raytracer in azione di Mark Webster.

Tuttavia, sebbene HTML5 Canvas sia decisamente più adatto all’impresa rispetto a SVG, non è detto che il ray tracing sia meglio eseguito su un elemento <canvas>. Infatti, lo sforzo sul processore potrebbe essere piuttosto considerevole, al punto che il tuo browser potrebbe smettere di rispondere.

Disegnare un Numero Significativo di Oggetti su una Piccola Superficie

Un altro esempio è una situazione in cui l’applicazione deve disegnare un numero significativo di oggetti su una superficie relativamente piccola, come rappresentazioni grafiche di dati in tempo reale non interattivi, come pattern meteorologici.

L’immagine qui sopra è da questo articolo MSDN, che faceva parte della mia ricerca per questo pezzo.

Sostituzione di Pixel nei Video

Come dimostrato in questo articolo HTML5 Doctor, un altro esempio in cui Canvas sarebbe appropriato è quando si sostituisce il colore di sfondo di un video con un colore diverso, un’altra scena o un’immagine.

Cosa HTML5 Canvas Non È Così Eccellente Per

D’altra parte, ci sono numerosi casi in cui Canvas potrebbe non essere la scelta migliore rispetto a SVG.

Scalabilità

La maggior parte dei casi in cui la scalabilità è un vantaggio sarà meglio servita utilizzando SVG piuttosto che Canvas. Grafici ad alta fedeltà e complessi come diagrammi di edifici e ingegneria, organigrammi, diagrammi biologici, ecc., sono esempi di questo.

Quando disegnati utilizzando SVG, ingrandire le immagini o stamparle preserva tutti i dettagli ad un alto livello di qualità. È inoltre possibile generare questi documenti da un database, il che rende il formato XML di SVG altamente adatto allo scopo.

Inoltre, questi grafici sono spesso interattivi. Pensate ai piani delle sedute quando prenotate il vostro biglietto aereo online come esempio, il che li rende un ottimo caso d’uso per un sistema grafico ritenuto come SVG.

Detto questo, con l’aiuto di alcune grandi librerie come CreateJS e Zim (che estende CreateJS), gli sviluppatori possono integrare relativamente rapidamente eventi del mouse, test di colpo, gesti multitocco, capacità di trascinamento e rilascio, controlli e altro, nei loro creazioni basate su Canvas.

Accessibilità

Sebbene ci siano passaggi che puoi intraprendere per rendere un grafico Canvas più accessibile — e una buona libreria Canvas come Zim potrebbe essere utile qui per accelerare il processo — canvas non risalta quando si tratta di accessibilità. Ciò che si disegna sulla superficie del canvas è solo un gruppo di pixel, che non possono essere letti o interpretati da tecnologie assistive o bot dei motori di ricerca. Questa è un’altra area in cui SVG è preferibile: SVG è solo XML, il che lo rende leggibile sia dagli esseri umani che dalle macchine.

Nessuna Dipendenza da JavaScript

Se non desideri utilizzare JavaScript nel tuo applicativo, allora Canvas non è il tuo migliore alleato. Infatti, l’unico modo in cui puoi lavorare con l’elemento <canvas> è attraverso JavaScript. Al contrario, puoi disegnare grafica SVG utilizzando un programma di editing vettoriale standard come Adobe Illustrator o Inkscape, e puoi utilizzare CSS pura per controllarne l’aspetto e eseguire animazioni sottili e microinterazioni accattivanti.

Combinazione di HTML5 Canvas e SVG per scenari avanzati

Ci sono casi in cui il tuo applicativo può trarre il meglio da entrambe le tecnologie combinando HTML5 Canvas e SVG. Ad esempio, un gioco basato su Canvas potrebbe implementare sprite da immagini SVG generate da un programma di editing vettoriale, per sfruttare la scalabilità e la ridotta dimensione del file di download rispetto a un’immagine PNG. O un programma di disegno potrebbe avere l’interfaccia utente progettata utilizzando SVG, con un elemento <canvas> incorporato, che potrebbe essere utilizzato per il disegno.

Infine, una libreria potente come Paper.js rende possibile scriptare grafica vettoriale sulla parte superiore di HTML5 Canvas, offrendo così ai developer un modo conveniente di lavorare con entrambe le tecnologie.

Conclusione

In questo articolo, ho esplorato alcune caratteristiche chiave sia di HTML5 Canvas che di SVG per aiutarti a decidere quale tecnologia potrebbe essere più adatta per particolari compiti.

Qual è la risposta?

Chris Coyier è d’accordo con Benjamin De Cock, come il secondo twitta:

Un modo estremamente semplice per rispondere è “usa canvas quando non puoi usare svg” (dove “non puoi” potrebbe significare animare migliaia di oggetti, manipolare ogni pixel individualmente, ecc.). Per dirlo in altro modo, SVG dovrebbe essere la tua scelta predefinita, canvas il tuo piano di riserva.

— Benjamin De Cock (@bdc) October 2, 2019

Il Dr. Abstract offre una lunga lista di cose che sono meglio costruite usando Canvas, tra cui loghi interattivi e pubblicità, infografiche interattive, app per l’e-learning e molto altro.

Secondo me, non ci sono regole ferree per sapere quando è meglio usare Canvas invece di SVG. La distinzione tra modalità immediata e ritenuta indica che HTML5 Canvas è senza dubbio il vincitore quando si tratta di creare cose come giochi con molte grafiche, e SVG come preferibile per cose come immagini piatte, icone e elementi dell’interfaccia utente. Tuttavia, nel mezzo c’è spazio per che HTML5 Canvas espanda il suo raggio d’azione, soprattutto considerando cosa le varie potenti librerie Canvas potrebbero offrire. Non solo rendono più facile lavorare con entrambe le tecnologie nella stessa opera grafica, ma rendono anche alcune caratteristiche difficili da implementare in un progetto nativo basato su Canvas — come controlli interattivi ed eventi, risposta, caratteristiche di accessibilità, e così via — ora al raggiungimento della maggior parte dei sviluppatori, aprendo la porta a possibilità sempre più interessanti di utilizzare HTML5 Canvas.

Domande frequenti (FAQs) su Canvas vs SVG