HTML 5 Canvas vs. SVG
- Önceki Sayfa HTML5 SVG
- Sonraki Sayfa HTML Medya
Canvas ve SVG, tarayıcıda grafikler oluşturmanıza olanak tanır, ancak temel olarak farklıdır.
SVG
SVG, XML kullanarak 2D grafikleri tanımlayan bir dildir.
SVG XML tabanlıdır, bu da SVG DOM'undaki 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şirse, tarayıcı otomatik olarak grafikleri yeniden oluşturabilir.
Canvas
Canvas, JavaScript ile 2D grafikleri çizer.
Canvas pixel bazında renderlenir.
Canvas'ta, grafik çizildikten sonra tarayıcı tarafından artık dikkate alınmaz. Konum değiştiğinde, tüm sahne yeniden çizilmelidir, bu da grafiklerin üzerine çizilmiş olabilecek herhangi bir nesneyi de içermektedir.
Canvas ile SVG Karşılaştırması
Aşağıdaki tablo, canvas ile SVG arasındaki bazı farklılıkları gösterir.
Canvas
- Çözünürlüğe Bağlı
- Olay İşleyicilerini Desteklemeyor
- Zayıf metin renderleme yeteneği
- Sonuç görsellerini .png veya .jpg formatında kaydedebilir
- Çok sayıda 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ğlı Değil
- Olay İşleyicilerini Destekler
- 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'un aşırı kullanıldığı herhangi bir uygulama hızlı değildir)
- Oyun Uygulamalarına Uygun Değil
- Önceki Sayfa HTML5 SVG
- Sonraki Sayfa HTML Medya
