Jaký je rozdíl mezi Canvas a SVG?

Canvas je rastrové API pro kreslení grafiky v reálném čase pomocí JavaScriptu. Kreslí pixely na plátno.

SVG (Scalable Vector Graphics) je formát XML pro popis dvourozměrné vektorové grafiky. Popisuje tvary, čáry, text atd.

Hlavní rozdíly:

• Základ: Canvas — pixely, SVG — vektory (matematické popisy).
• Způsob kreslení: Canvas — imperativní (příkazy kreslení), SVG — deklarativní (popis prvků).
• Změna velikosti: Canvas se zvětšuje se ztrátou kvality (rastrové), SVG se zvětšuje bez ztráty kvality (vektorové).
• Výkon: Canvas je vhodnější pro dynamickou grafiku, animace, hry. SVG je vhodnější pro statickou, složitou grafiku, diagramy.
• Přístupnost: Elementy SVG jsou přístupné přes DOM, lze je měnit pomocí CSS a JavaScriptu. Canvas kreslí na pixelové úrovni, jednotlivé prvky nejsou přístupné.
• Interaktivita: Interaktivita v SVG je vestavěná na úrovni prvků. Na Canvas je třeba sledovat události myši/touch a určit, na které pixely se vztahují.
• Formát: Canvas je prvek <canvas> a API JavaScriptu. SVG je samostatný XML formát, který lze přímo vložit do HTML nebo použít jako soubor (.svg).

Příklad tvorby 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>