Jaka jest różnica między Canvas a SVG?

Canvas to rastrowe API do rysowania grafiki na żywo za pomocą JavaScript. Rysuje piksele na płótnie.

SVG (Skalowalna Grafika Wektorowa) to format XML do opisu dwuwymiarowej grafiki wektorowej. Opisuje kształty, linie, tekst itp.

Główne różnice:

• Podstawa: Canvas — piksele, SVG — wektory (opisy matematyczne).
• Sposób rysowania: Canvas — imperatywny (polecenia rysowania), SVG — deklaratywny (opis elementów).
• Skalowanie: Canvas skalowany jest z utratą jakości ( raster ), SVG skalowany jest bez utraty jakości ( wektor ).
• Wydajność: Canvas lepiej nadaje się do grafiki dynamicznej, animacji, gier. SVG lepiej do statycznej, złożonej grafiki, wykresów.
• Dostępność: Elementy SVG są dostępne przez DOM, można je modyfikować za pomocą CSS i JavaScript. Canvas rysuje na poziomie piksela, poszczególne elementy nie są dostępne.
• Interaktywność: Interaktywność w SVG jest wbudowana na poziomie elementów. W Canvas trzeba śledzić zdarzenia myszy/paska i określać, na które piksele one przypadają.
• Format: Canvas to element <canvas> i API JavaScript. SVG to samodzielny format XML, który można wstawiać bezpośrednio do HTML lub używać jako plik (.svg).

Przykład tworzenia koła:

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