Quando usare SVG e quando usare Canvas

Tempo di lettura: 2 minuti

SVG e Canvas sono entrambe tecnologie in grado di disegnare elementi nei browser Web, quindi vale la pena confrontarli e comprenderli quando uno è più adatto dell’altro.

• Una piccola icona a colori piatti? Questo è chiaramente il territorio SVG.
• Un gioco interattivo simile a una console? Questo è chiaramente il territorio del canvas.

SVG è vettoriale e dichiarativo

Se sai che hai bisogno di arte vettoriale, SVG è la scelta. L’arte vettoriale è visivamente nitida e tende ad avere una dimensione del file inferiore rispetto alla grafica raster come JPG.

Ciò rende i loghi un caso d’uso SVG molto comune. Il codice SVG può andare direttamente all’interno di HTML e sono come istruzioni di disegno dichiarative.

Se ti preoccupi molto della flessibilità e della reattività della grafica, SVG è la soluzione.

Canvas è un’API di disegno JavaScript

Inserisci un elemento  <canvas> in HTML, quindi esegui il disegno in JavaScript. In altre parole, impartisci comandi per dirgli come disegnare (che è più imperativo che dichiarativo ).

SVG è nel DOM

Se hai familiarità con eventi DOM come clicke mouseDowne quant’altro, questi sono disponibili anche in SVG. Un  <circle>non è terribilmente diverso da un <div> in questo senso.

SVG per accessibilità

Poiché SVG  può essere proprio nel DOM, generalmente pensiamo che SVG sia ciò che usi se stai cercando di creare un’esperienza accessibile. Spiegato in un altro modo, è possibile creare un SVG a cui la tecnologia assistiva possa accedere e trovare collegamenti e elementi secondari con le proprie spiegazioni uditive e simili.

Il testo è anche saldamente nel territorio SVG. SVG ha letteralmente un elemento <text> accessibile e visivamente nitido, a differenza del  canvas in cui il testo è generalmente sfocato.

Canvas per pixel

Il lavoro altamente interattivo con molti dettagli e sfumature complesse è il territorio del canvas. Per questo motivo vedrai molti più giochi creati con canvas di SVG per questo motivo.

CSS può lavorare con SVG

Abbiamo visto sopra che SVG può essere nel DOM e che JavaScript può entrare e fare cose. La storia è simile con i CSS.

Supponendo che tu abbia inserito letteralmente SVG nel HTML, potresti spostarlo o fare in modo che altri CSS esterni e JavaScript facciano la stessa cosa.

Ciò che è bello sapere è che le cose in cui CSS è eccezionale sono possibili in SVG, come stati :hovere animazioni!

Combinazioni

Tecnicamente, non si escludono completamente a vicenda. Un <svg>può essere dipinto in un <canvas>.

	DOM / DOM virtuale	CANVAS
Pro
	Ottimo per l’animazione UI / UX	Danza pixel, danza!
	Ottimo per SVG indipendente dalla risoluzione	Ottimo per contenuti 3D davvero coinvolgenti o coinvolgenti
	Più facile da eseguire il debug	Movimento di tonnellate di oggetti
Contro
	Carri armati con molti oggetti	Più difficile da rendere accessibile
	Perché devi preoccuparti del modo in cui animi	Non indipendente dalla risoluzione
		Non si rompe nel nulla

	SVG	CANVAS
Pro	Facile da iniziare	Molto performante
	Più facile registrare le interazioni dell’utente	Facile da aggiornare
	Facile da animare
Contro	DOM potenzialmente complesso	Più lavoro per iniziare
	Non performante per un gran numero di elementi	Più lavoro per gestire le interazioni
		Devi scrivere animazioni personalizzate

Conclusione

Quindi, se rivisitiamo quei primi due punti  …

• Una piccola icona a colori piatti? SVG entra nel DOM, quindi qualcosa come un’icona all’interno di un pulsante ha molto senso per SVG  per non parlare del fatto che può essere controllato con CSS e avere gestori di eventi JavaScript
• Un gioco interattivo simile a una console? Ciò avrà molti elementi in movimento, animazioni e interazioni complesse, considerazioni sulle prestazioni. Queste sono cose che eccelle il canvas.