HTML5 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 artinya setiap elemen di DOM SVG tersedia. Anda dapat menambahkan pemroses acara JavaScript untuk elemen tertentu.

Dalam SVG, setiap gambar yang digambarkan dianggap sebagai objek. Jika atribut objek SVG berubah, browser dapat secara otomatis menggambarkan kembali gambar.

Canvas

Canvas digambarkan dengan JavaScript 2D.

Canvas adalah rendering pixel-pixel.

Dalam canvas, sekali gambar telah digambarkan, ia tidak lagi mendapat perhatian browser. Jika posisinya berubah, seluruh latar belakang juga harus digambarkan kembali, termasuk objek yang mungkin telah digambarkan oleh gambar.

Pbandingan Canvas dengan SVG

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

Canvas

  • Bergantung pada resolusi
  • Tidak mendukung pemroses acara
  • Kemampuan rendering teks yang lemah
  • Dapat disimpan dalam format .png atau .jpg
  • Paling sesuai untuk permainan yang berat gambar, di mana banyak objek akan digantikan secara sering

SVG

  • Tidak bergantung pada resolusi
  • Dukung pemroses acara
  • Paling sesuai untuk aplikasi yang memiliki area penggantian besar (seperti peta Google)
  • Tingkat kompleks yang tinggi akan memperlambat kecepatan penggantian (aplikasi yang berlebihan DOM tidak cepat)
  • Tidak sesuai untuk aplikasi permainan