Canvas va SVG o'rtasidagi farq nima?

Canvas — bu JavaScript yordamida real vaqt rejimida grafik chizish uchun raster API. U pikselni toʻlqin bilan chizadi.

SVG (Skalajlanadigan Vektor Grafiklari) — bu 2D vektor grafiklarini tasvirlash uchun XML formatidir. U shakllar, chiziqlar, matn va boshqalarni tasvirlaydi.

Asosiy farqlar:

• Asos: Canvas — piksel, SVG — vektorlar (matematik tavsiflar).
• Chizish usuli: Canvas — imperativ (chizish buyruqlari), SVG — deklarativ (elementlar tavsifi).
• Skalalash: Canvas sifat yoʻqotilishi bilan skalalanadi (rastr), SVG sifat yoʻqotmasdan skalalanadi (vektor).
• Ishlash tezligi: Canvas dinamik grafikalar, animatsiyalar, oʻyinlar uchun yaxshiroq. SVG statik, murakkab grafikalar, diagrammalar uchun yaxshiroq.
• Mavjudlik: SVG elementlari DOM orqali mavjud, ularni CSS va JavaScript bilan o'zgartirish mumkin. Canvas piksel darajasida chizadi, alohida elementlar mavjud emas.
• Interaktivlik: SVGda interaktivlik elementlar darajasida mavjud. Canvasda, musht yoki teginish hodisalarini kuzatish va qaysi piksellarga ta'sir qilganini aniqlash kerak.
• Format: Canvas — <canvas> element va JavaScript API. SVG — mustaqil XML format, toʻgʻridan-toʻgʻri HTMLga joylashtirilishi yoki fayl sifatida (.svg) ishlatilishi mumkin.

Misol uchun doira yaratish:

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