Kuo skiriasi Canvas ir SVG?

„Canvas“ yra rastinis API, skirtas piešti grafiką realiuoju laiku naudojant JavaScript. Jis piešia taškus ant drobės.

„SVG“ (skalaujama vektorinė grafika) yra XML formatas, skirtas aprašyti dviejų matmenų vektorinę grafiką. Jis aprašo figūras, linijas, tekstą ir kt.

Pagrindiniai skirtumai:

• Pagrindas: Canvas — taškai, SVG — vektoriai (matematiniai aprašymai).
• Piešimo būdas: Canvas — imperatyvus (piešimo komandos), SVG — deklaratyvus (elementų aprašymas).
• Mastelio keitimas: Canvas mastelį keičia prarandant kokybę (rastrinis), SVG mastelį keičia be kokybės praradimo (vektorinė).
• Našumas: Canvas geriau tinka dinamiškai grafiką, animacijoms, žaidimams. SVG geriau tinka statinei, sudėtingai grafiką, diagramoms.
• Prieinamumas: SVG elementai prieinami per DOM, juos galima keisti CSS ir JavaScript. Canvas piešia taškų lygyje, atskiri elementai nėra prieinami.
• Interaktyvumas: SVG interaktyvumas įmontuotas į elementų lygmenį. Canvas, reikia stebėti pelės/liečio įvykius ir nustatyti, ant kurių taškų jie paspaudė.
• Formatas: Canvas — <canvas> elementas ir JavaScript API. SVG — savarankiškas XML formatas, kurį galima tiesiog įterpti į HTML arba naudoti kaip failą (.svg).

Pavyzdys, kaip sukurti ratą:

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