Mis vahe on Canvasil ja SVG-l?

Canvas on rasterpõhine API graafika joonistamiseks JavaScripti abil reaalajas. See joonistab piksleid lõuendile.

SVG (Skaleeritavad vektorgraafika) on XML-formaat kahe mõõtmega vektorgraafika kirjeldamiseks. See kirjeldab kujundeid, jooni, teksti jne.

Peamised erinevused:

• Põhimõte: Canvas — piksleid, SVG — vektoreid (mõõtmelisi kirjeldusi).
• Joonistamise viis: Canvas — imperatiivne (joonistamiskäsud), SVG — deklaratiivne (elementide kirjeldus).
• Skaleerimine: Canvas skaleerub kvaliteedi kaotusega (rast), SVG skaleerub ilma kvaliteedi kaotuseta (vektor).
• Tõhusus: Canvas sobib paremini dünaamilise graafika, animatsioonide ja mängude jaoks. SVG sobib paremini staatilise, keeruka graafika ja diagrammide jaoks.
• Ligipääsetavus: SVG elemendid on DOM-i kaudu kättesaadavad, neid saab muuta CSS-i ja JavaScriptiga. Canvas joonistab piksli tasemel, üksikud elemendid ei ole kättesaadavad.
• Interaktiivsus: SVG interaktiivsus on sisseehitatud elementide tasemel. Canvasil tuleb jälgida hiire/puutetegevusi ja määrata, millistele piksli tasanditele need langesid.
• Vorming: Canvas on <canvas> element ja JavaScript API. SVG on iseseisev XML-formaat, mida saab otse HTML-i sisestada või kasutada failina (.svg).

Näide ringi loomisest:

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