Perbandingan Implementasi Grafik Vektor Dan Raster Pada HTML Dan JavaScript

Vektor (SVG, VML, dll) dan raster (JPEG, BMP, GIF, dll) adalah 2 format gambar yang memiliki keunggulan dan kekurangan masing-masing bergantung pada implementasinya. Vektor yang berbasis teks bertolak belakang dengan raster yang berbasis kumpulan pixel. Perbedaan yang mencolok selain cara penyimpanan data gambar dari kedua tipe tersebut adalah:

1. Tipe Grafik
   Vektor hanya dapat menampilkan tipe grafik yang bersifat primitif yang artinya dapat dikalkulasikan secara matematis seperti lingkaran, segitiga, dan kotak. Sedangkan raster dapat menampilkan gambar bertipe apa saja.
2. Ukuran file
   Ukuran file pada vektor umumnya lebih kecil daripada raster karena vektor menyimpan data dalam bentuk teks
3. Modifikasi gambar
   Modifikasi gambar pada vektor dapat dilakukan tanpa merusak gambar asli sedangkan raster kebalikannya. Hal ini dikarenakan pada vektor data disimpan dalam bentuk teks yang terformat.
   

Masih ada beberapa hal yang membedakan antara gambar vektor dan raster. Namun perbedaan inti dari kedua format tersebut adalah fleksibilitasnya, vektor mempunyai tingkat fleksibilitas yang tinggi sedangkan raster tidak. Hal ini mempunyai dampak yang besar dalam pengimplementasiannya pada HTML. Seperti yang telah diketahui sebelumnya, dengan tingkat fleksibiltas gambar vektor sehingga gambar dapat dizoom atau dimodifikasi tanpa merusak gambar asli, vektor pada HTML untuk menampilkan grafik harus mengkalkulasikan data-data yang telah disediakan dalam file vektor tersebut pada sisi end-user. Hal ini berarti grafik harus diproses terlebih dahulu sebelum dapat dilihat oleh pengguna. Pada raster, grafik sudah diproses sedemikian rupa sehingga gambar yang ada dapat ditampilkan pada user tanpa melalui proses yang panjang dan kompleks.

Dari penjelasan diatas berarti vektor memerlukan waktu proses yang lebih lama daripada raster agar dapat ditampilkan. Hal ini akan dapat semakin jelas dilihat jika gambar vektor dan raster ditampilkan pada halaman web dan gambar tersebut dapat digerakkan sesuka hati dengan menggunakan javascript. Setiap terjadi perubahan pada gambar di web seperti perubahan letak gambar, gambar berbasis vektor harus diproses ulang sedangkan gambar berbasis raster hanya perlu disesuaikan dengan posisi yang baru. Hal ini akan berakibat pada performa penampilan gambar pada web, gambar berbasis vektor besar kemungkinan akan memperlambat proses modifikasi gambar pada web melalui javascript sedangkan gambar berbasis raster sebaliknya.

Berikut adalah perbandingan gambar vektor dan raster dalam pengimplementasinnya pada halaman web dengan menggunakan JavaScript: