Aký je rozdiel medzi Canvas a SVG?

Canvas je rastrové API na kreslenie grafiky v reálnom čase pomocou JavaScriptu. Kreslí pixely na plátno.

SVG (Škálovateľná vektorová grafika) je formát XML na opis dvojrozmernej vektorovej grafiky. Opisuje tvary, čiary, text atď.

Hlavné rozdiely:

• Základ: Canvas — pixely, SVG — vektory (matematické opisy).
• Spôsob kreslenia: Canvas — imperatívny (príkazy na kreslenie), SVG — deklaratívny (popis prvkov).
• Zväčšenie: Canvas sa zväčšuje so stratou kvality (rastrové), SVG sa zväčšuje bez straty kvality (vektorové).
• Výkon: Canvas je vhodnejší pre dynamickú grafiku, animácie, hry. SVG je vhodnejší pre statickú, zložitú grafiku, diagramy.
• Prístupnosť: Elementy SVG sú prístupné cez DOM, môžu sa meniť pomocou CSS a JavaScriptu. Canvas kreslí na úrovni pixelov, jednotlivé prvky nie sú prístupné.
• Interaktivita: Interaktivita v SVG je zabudovaná na úrovni prvkov. Na Canvas je potrebné sledovať udalosti myši/touch a určiť, na ktoré pixely sa vzťahujú.
• Formát: Canvas je element <canvas> a API JavaScriptu. SVG je samostatný XML formát, ktorý možno priamo vložiť do HTML alebo použiť ako súbor (.svg).

Príklad vytvorenia kruhu:

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