Canvas ve SVG arasındaki fark nedir?

Canvas, JavaScript kullanarak gerçek zamanlı grafik çizimi için raster tabanlı bir API'dir. Pikselleri tuval üzerine çizer.

SVG (Ölçeklenebilir Vektör Grafikleri), 2D vektör grafiklerini tanımlamak için XML formatıdır. Şekiller, çizgiler, metin vb. tanımlar.

Ana farklar:

• Temel: Canvas — pikseller, SVG — vektörler (matematiksel tanımlar).
• Çizim yöntemi: Canvas — emredici (çizim komutları), SVG — deklaratif (öğe tanımlamaları).
• Ölçeklendirme: Canvas kalite kaybıyla ölçeklenir (raster), SVG kalite kaybı olmadan ölçeklenir (vektör).
• Performans: Canvas, dinamik grafikler, animasyonlar, oyunlar için daha uygundur. SVG, statik, karmaşık grafikler, diyagramlar için daha iyidir.
• Erişilebilirlik: SVG öğeleri DOM aracılığıyla erişilebilir, CSS ve JavaScript ile değiştirilebilir. Canvas, piksel seviyesinde çizim yapar, bireysel öğeler erişilebilir değildir.
• Etkinlik: SVG'de etkileşim, öğe seviyesinde yerleşiktir. Canvas'ta, mouse/temas olaylarını izlemek ve hangi piksellere dokunduklarını belirlemek gerekir.
• Format: Canvas, <canvas> elementi ve JavaScript API'sidir. SVG, bağımsız bir XML formatıdır, doğrudan HTML'ye gömülebilir veya dosya olarak kullanılabilir (.svg).

Bir daire oluşturma örneğ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>