HTML 5 Canvas vs. SVG

Canvas ve SVG, tarayıcıda grafik oluşturmanıza olanak tanır, ancak temel olarak farklılardır.

SVG

SVG, 2D grafikleri XML kullanarak tanımlayan bir dildir.

SVG XML tabanlıdır, bu da SVG DOMundaki her bir elemanın kullanılabilir olduğunu anlamına gelir. Bir elemana JavaScript olay işleyicisi ekleyebilirsiniz.

SVG'de, her çizilen grafik nesne olarak görülür. Eğer SVG nesnesinin özellikleri değiştiyse, tarayıcı otomatik olarak grafikleri yeniden oluşturabilir.

Canvas

Canvas 2D grafikleri çizmek için JavaScript kullanır.

Canvas pixel bazında renderlenir.

Canvas'ta, grafik çizildikten sonra tarayıcı tarafından artık dikkate alınmaz. Konum değiştirildiğinde, tüm sahne yeniden çizilmelidir, bu da grafik tarafından kapsanmış olabilecek herhangi bir nesneyi de içerir.

Canvas ile SVG Karşılaştırması

Aşağıdaki tablo, canvas ile SVG arasındaki bazı farklılıkları sıralar.

Canvas

  • Çözünürlüğe bağımlı
  • Olay İşleyici Desteği Yok
  • Zayıf metin renderleme yeteneği
  • .png veya .jpg formatında sonuç görselleri kaydedebilir
  • Çok fazla nesnenin sıkça yeniden çizildiği görsel yoğunluğunda en uygun oyunlar için en uygun

SVG

  • Çözünürlüğe bağımlı değil
  • Olay İşleyici Desteği
  • Büyük renderleme alanına sahip uygulamalar için en uygun (örneğin, Google Haritalar)
  • Kompleksite yüksekse renderleme hızını yavaşlatır (DOM'yu aşırı kullanılan her türlü uygulama hızlı değildir)
  • Oyun Uygulamalarına Uygun Değil