Qual è la differenza tra Canvas e SVG?

Canvas è un'API raster per disegnare grafica in tempo reale con JavaScript. Disegna pixel sul canvas.

SVG (Grafica Vettoriale Scalabile) è un formato XML per descrivere grafica vettoriale 2D. Descrive forme, linee, testo, ecc.

Principali differenze:

• Base: Canvas — pixel, SVG — vettori (descrizioni matematiche).
• Metodo di disegno: Canvas — imperativo (comandi di disegno), SVG — dichiarativo (descrizione degli elementi).
• Scalabilità: Canvas si scala con perdita di qualità (raster), SVG si scala senza perdita di qualità (vettore).
• Prestazioni: Canvas è più adatto per grafica dinamica, animazioni, giochi. SVG è migliore per grafica statica, complessa, diagrammi.
• Accessibilità: Gli elementi SVG sono accessibili tramite DOM, possono essere modificati con CSS e JavaScript. Canvas disegna a livello di pixel, gli elementi singoli non sono accessibili.
• Interattività: L'interattività in SVG è integrata a livello di elementi. Su Canvas, bisogna tracciare eventi mouse/touch e determinare su quali pixel sono avvenuti.
• Formato: Canvas è un elemento <canvas> e API JavaScript. SVG è un formato XML autonomo, che può essere inserito direttamente in HTML o usato come file (.svg).

Esempio di creazione di un cerchio:

// Canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

<!-- SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>