Kāda ir atšķirība starp Canvas un SVG?

Canvas ir rastra API, kas ļauj zīmēt grafiku tiešraidē, izmantojot JavaScript. Tas zīmē pikseļus uz audekla.

SVG (skalējama vektorgrafika) ir XML formāts, kas apraksta divdimensiju vektorgrafiku. Tas apraksta figūras, līnijas, tekstu un citus elementus.

Galvenās atšķirības:

• Pamatā: Canvas — pikseļi, SVG — vektori (matemātiski apraksti).
• Zīmēšanas veids: Canvas — imperatīvs (zīmēšanas komandas), SVG — deklaratīvs (elementu apraksts).
• Mērogošana: Canvas mērogojas ar kvalitātes zudumu (rastrs), SVG — bez kvalitātes zuduma (vektors).
• Veiktspēja: Canvas ir labāks dinamiskai grafikai, animācijām, spēlēm. SVG ir labāks statiskai, sarežģītai grafikai, diagrammām.
• Pieejamība: SVG elementi ir pieejami caur DOM, tos var mainīt ar CSS un JavaScript. Canvas zīmē uz pikseļu līmeņa, atsevišķi elementi nav pieejami.
• Interaktivitāte: SVG iekšējā interaktivitāte ir iekļauta elementu līmenī. Canvas, ir jāseko peles/touch notikumiem un jānosaka, uz kuriem pikseļiem tie attiecas.
• Formāts: Canvas — <canvas> elements un JavaScript API. SVG — neatkarīgs XML formāts, ko var tieši ievietot HTML vai izmantot kā failu (.svg).

Piemērs, kā izveidot riņķi:

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