Canvas ed SVG sono due tecnologie per il disegno disponibili all’interno di HTML 5.  Come scegliere quale utilizzare? Meglio Canvas o SVG?

C’è chi usa sempre l’uno o sempre l’altro, ma la scelta non è così semplice. Bisogna capire le caratteristiche dell’uno e dell’altro prima di decidere.

Vediamo prima un po’ di storia, per capire poi quali sono affinità e differenze e decidere di usare SVG  o Canvas.

Un po’ di storia

L’elemento Canvas è stato introdotto dalla Apple e infine standardizzato dal Web Hypertext Application Technology Working Group (WHATWG). Canvas consente di disegnare forme bidimensionali e di gestire immagini bitmap. Il modello utilizzato da Canvas è una mappa di bit.

L’elemento SVG (Scalable Vector Graphics) è definito in uno standard aperto del W3C dal 1999, è pensato ugualmente a Canvas per il disegno di grafica bidimensionale, ma diversamente da Canvas si basa su grafica vettoriale e non bitmap, ed è inoltre pensato per l’interattività.

Le differenze tra Canvas ed SVG

Ci sono alcuni aspetti che differenziano, appunto, Canvas ed SVG:

• disponibilità di un grafo della scena: con SVG è disponibile un grafo della scena, con Canvas no, e questo ha varie implicazioni; ad esempio nel caso si sia disegnata una forma che è davanti ad un’altra e si voglia spostare questa forma, con Canvas è necessario disegnare di nuovo tutti gli oggetti della scena, con SVG basta modificare gli attributi della forma di spostare

• interattività: è possibile associare eventi, come onClick, ad oggetti SVG; per ottenere lo stesso con Canvas occorre determinare il punto su cui l’utente ha cliccato e quale forma fosse presente in quel punto.

• scalabilità: gli oggetti SVG sono oggetti inseriti nel DOM, risulta così che canvas è più efficiente se il numero di oggetti è alto; SVG è invece efficiente quando trattiamo un numero ridotto di oggetti di grandi dimensioni

• possibilità di salvataggio della scena: le immagini SVG sono rappresentate come XML e scene complesse possono essere salvate e gestite come XML; le immagini Canvas sono mappe di bit memorizzabili nel formato JPEG e PNG e i singoli oggetti non sono più distinguibili una volta disegnati.

Come scegliere?

Come abbiamo visto Canvas è limitato riguardo la disponibilità di un grafo della scena e di interattività, tuttavia queste vengono rese disponibili da alcune librerie come Konva e il vantaggio di SVG viene praticamente annullato, rimanendo invece una scalabilità superiore in termini di numero di Oggetti disegnati. Sarà quindi il caso di scegliere Canvas quando ci troviamo a disegnare molti oggetti piccoli o medio piccoli, SVG altrimenti.

C’è comunque da dire che non c’è bisogno necessariamente di scegliere una delle due tecnologie, ma esse possono essere combinate, per gestire in modo più efficiente parti diverse di una applicazione.

The post Canvas o SVG, come scegliere appeared first on Just Think.