Care este diferența dintre Canvas și SVG?

Canvas este o API raster pentru desenarea graficii în timp real cu JavaScript. Desenează pixeli pe pânză.

SVG (Grafica Vectorială Scalabilă) este un format XML pentru descrierea graficii vectoriale 2D. Descrie forme, linii, text etc.

Diferențele principale:

• Bază: Canvas — pixeli, SVG — vectori (descrieri matematice).
• Mod de desenare: Canvas — imperativ (comenzi de desenare), SVG — declarativ (descrierea elementelor).
• Scalare: Canvas se scalează cu pierdere de calitate (raster), SVG se scalează fără pierdere de calitate (vector).
• Performanță: Canvas este mai potrivit pentru grafica dinamică, animații, jocuri. SVG este mai bun pentru grafica statică, complexă, diagrame.
• Accesibilitate: Elementele SVG sunt accesibile prin DOM, pot fi modificate cu CSS și JavaScript. Canvas desenează la nivel de pixel, elementele individuale nu sunt accesibile.
• Interactivitate: Interactivitatea în SVG este integrată la nivel de elemente. În Canvas, trebuie să urmăriți evenimentele mouse/touch și să determinați pe ce pixeli s-au produs.
• Format: Canvas este un element <canvas> și API JavaScript. SVG este un format XML independent, care poate fi inserat direct în HTML sau utilizat ca fișier (.svg).

Exemplu de creare a unui cerc:

// 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>