PILIH CANVAS ATAU SVG DI HTML

Sekilas kita sudah mengintip cara menggambar di HTML dengan canvas dan svg. Apa perbedannya, apa kekurangan dan kelebihan masing-masing?

Sebelumnya:

• Baca SVG di sini
• Baca Canvas di sini

Untuk membuat logo

Untuk menggambar logo sederhana disarankan menggunakan SVG. Karena pada dasarnya format SVG lebih fleksibel secara ukuran.

Untuk membuat permainan “game”

Di mana ada gerakan kompleks dan interaksi seperti game. Canvas lebih cocok secara performa.

Kontrol pada DOM

DOM adalah singkatan dari document object model. Di mana HTML mempunyai DOM yang merupakan representasi dari suatu struktur HTML.

Ketika menggambar dengan SVG, kita punya kontrol terhadap DOM.
Sementara kanvas tidak. Semuanya dilakukan di Javascript saja.

Resolusi yang responsif

Karena kanvas mengandalkan pixel untuk menggambar sementara SVG tidak. Maka untuk resolusi yang lebih fleksible (gambar tidak pecah di berbagai ukuran), gunakan SVG.

Referensi

Baca pendapat para ahli seputar canvas VS SVG di artikel CSS trick ini