HTML 5 Canvas vs. SVG

Canvas dan SVG memungkinkan Anda membuat grafik di browser, tetapi mereka berbeda di dasarnya.

SVG

SVG adalah bahasa yang digunakan untuk mendeskripsikan grafik 2D dengan XML.

SVG berdasarkan XML, yang berarti setiap elemen di DOM SVG tersedia. Anda dapat menambahkan pemroses event JavaScript untuk elemen tertentu.

Pada SVG, setiap gambar yang diukir dianggap sebagai objek. Jika properti objek SVG berubah, browser dapat otomatis meregenerasi gambar.

Canvas

Canvas menggambar 2D melalui JavaScript.

Canvas merender berdasarkan pixel.

Pada canvas, sekali gambar diukir, dia tidak mendapat perhatian lagi browser. Jika posisinya berubah, seluruh layar juga perlu diulang perenderan, termasuk obyek yang mungkin diatas gambar.

Pembandingan Canvas dan SVG

Tabel di bawah ini menunjukkan beberapa perbedaan antara canvas dan SVG.

Canvas

  • Bergantung pada resolusi
  • Tidak mendukung pemroses event
  • Kemampuan render teks yang lemah
  • Dapat disimpan dalam format .png atau .jpg
  • Sangat cocok untuk permainan yang berat grafis, dimana banyak objek akan diulang ulang perenderan

SVG

  • Tidak bergantung pada resolusi
  • Dukung pemroses event
  • Sangat cocok untuk aplikasi yang memiliki area render besar (seperti Google Maps)
  • Kecenderungan kompleks akan menurunkan kecepatan render (aplikasi yang berlebihan DOM tak cepat)
  • Tidak cocok untuk aplikasi permainan