HTML 5 Canvas vs. SVG

Canvas dan SVG memungkinkan Anda membuat grafik di dalam peramban, tetapi mereka berbeda secara dasar.

SVG

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

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

Dalam SVG, setiap grafik yang dibuat dianggap sebagai objek. Jika atribut objek SVG berubah, peramban dapat secara otomatis mengganti grafik.

Canvas

Canvas digambar melalui JavaScript 2D.

Canvas adalah penggantian pixel-pixel.

Dalam canvas, setelah grafik dibuat, ia tidak lagi mendapat perhatian peramban. Jika posisinya berubah, seluruh latar belakang harus digantikan kembali, termasuk obyek yang mungkin telah digantikan oleh grafik.

Perbandingan Canvas dan SVG

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

Canvas

  • Bergantung pada resolusi
  • Tidak mendukung penanganan event
  • Kemampuan renderan teks yang lemah
  • Dapat disimpan dalam format .png atau .jpg
  • Sangat cocok untuk permainan yang berat gambar, di mana banyak objek akan digantikan secara sering

SVG

  • Tidak bergantung pada resolusi
  • Dukung penanganan event
  • Sangat cocok untuk aplikasi yang memiliki area penggantian besar (seperti peta Google)
  • Kecerdasan kompleks akan menurunkan kecepatan penggantian (aplikasi yang berlebihan menggunakan DOM tidak cepat)
  • Tidak cocok untuk aplikasi permainan