Canvas HTML5 vs. SVG
- Halaman Sebelumnya SVG HTML5
- Halaman Berikutnya Media HTML
Canvas dan SVG memungkinkan Anda membuat grafik di browser, tetapi mereka berbeda secara dasar.
SVG
SVG adalah bahasa yang digunakan untuk mendeskripsikan gambar 2D dengan XML.
SVG berdasarkan XML, yang berarti setiap elemen di DOM SVG tersedia. Anda dapat menambahkan pemroses acara JavaScript untuk elemen tertentu.
Dalam SVG, setiap gambar yang dibuat dianggap sebagai objek. Jika atribut objek SVG berubah, browser dapat secara otomatis mengulang gambar.
Canvas
Canvas menggambar 2D melalui JavaScript.
Canvas merenderan berdasarkan pixel.
Dalam canvas, sekali gambar dibuat, ia tidak mendapat perhatian lagi dari browser. Jika posisinya berubah, seluruh latar belakang juga perlu untuk diulang perenderan, termasuk objek mana pun yang mungkin telah dihiasi oleh gambar.
Pembanding Canvas dan SVG
Tabel di bawah ini menunjukkan beberapa perbedaan antara canvas dan SVG.
Canvas
- Bergantung pada resolusi
- Tidak mendukung pemroses acara
- Kemampuan perenderan teks yang lemah
- Dapat disimpan dalam format .png atau .jpg
- Paling sesuai untuk permainan yang berat gambar, di mana banyak objek akan diulang-ulang untuk perenderan
SVG
- Tidak bergantung pada resolusi
- Dukung pemroses acara
- Paling sesuai untuk aplikasi yang memiliki area perenderan besar (seperti Google Maps)
- Kecerdasan kompleks akan mengurangi kecepatan perenderan (aplikasi yang berlebihan menggunakan DOM tidak cepat)
- Tidak sesuai untuk aplikasi permainan
- Halaman Sebelumnya SVG HTML5
- Halaman Berikutnya Media HTML
