Mi a különbség a Canvas és az SVG között?

A Canvas egy raszter API a grafika valós idejű rajzolásához JavaScript segítségével. Pixeleket rajzol a vászonra.

Az SVG (Skálázható Vektorgrafika) egy XML-formátum a 2D vektorgrafika leírására. Formákat, vonalakat, szöveget stb. ír le.

Fő különbségek:

• Alap: Canvas — pixelek, SVG — vektorok (matematikai leírások).
• Rajzolási mód: Canvas — imperatív (rajzolási parancsok), SVG — deklaratív (elemek leírása).
• Nagyítás: Canvas minőségveszteséggel nagyítható (raszter), SVG minőségveszteség nélkül nagyítható (vektor).
• Teljesítmény: Canvas inkább dinamikus grafikákhoz, animációkhoz, játékokhoz alkalmas. SVG inkább statikus, összetett grafikákhoz, diagramokhoz.
• Elérhetőség: SVG elemek elérhetők a DOM-on keresztül, módosíthatók CSS és JavaScript segítségével. Canvas pixel szinten rajzol, az egyes elemek nem elérhetők.
• Interaktivitás: Az SVG-ben az interaktivitás beépített az elemek szintjén. A Canvas esetében figyelni kell az egér/touch eseményeket, és meghatározni, mely pixelekhez tartoznak.
• Formátum: Canvas egy <canvas> elem és JavaScript API. SVG egy önálló XML-formátum, amelyet közvetlenül be lehet szúrni HTML-be vagy fájlként (.svg) használni.

Példa kör létrehozására:

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