Sebagian dari Anda mungkin pernah melihat file dalam format SVG, tapi belum mengetahui apa sih fungsi dan keistimewaannya dibanding format gambar lainnya? baca artikel singkat ini untuk menambah pengetahuan kamu.

Sebelumnya, kamu pasti udah terbiasa dengan format file gambar pada umumnya, yaitu JPG, PNG dan GIF. Sementara SVG adalah format file vektor, sehingga memiliki beberapa keistimewaan. Dan sebagaimana gambar vektor lainnya, file SVG tidak tersimpan dalam bentuk piksel / bitmap, melainkan tersimpan dalam bentuk "data koordinat dan warna", sehingga jauh lebih ringan dan bisa di resize tanpa merusak kualitasnya (scalable).

Desain Web

Format file SVG, sama halnya seperti file Flash, bersifat terbuka, terstandarisasi dan berbasis pada kode XML, sehingga memiliki kompatibilitas hampir dengan semua web browser. Ini berarti; kita bisa memasukkannya dalam website tetap dalam format vektor.

Saat ini, mayoritas website menggunakan gambar dalam format pixel, tapi perlahan format SVG sudah mulai digunakan secara luas di internet. Vektor selalu terlihat tajam pada resolusi apapun, dan mengingat SVG (yang sebenarnya merupakan singkatan dari Scalable Vector Graphics) dapat memiliki ukuran file kecil, ini adalah situasi menguntungkan buat semua.

Warna & Animasi

Keistimewaan lain dari format SVG adalah, kamu bisa memodifikasi warna, ukuran dan posisinya dengan menggunakan beberapa baris perintah CSS.

Misalnya, jika file asli SVG berwarna hijau, namun karena suatu kondisi web Anda perlu mengubah warnanya, cukup menambahkan beberapa baris kode CSS untuk melakukan hal tersebut. Luar biasa praktis, bukan? Selain mengubah warnanya, file SVG juga bisa di-animasi-kan dengan CSS: misal Anda ingin gambar SVG berkedip ketika mouse berada diatasnya, atau membuatnya berputar-putar saat animasi loading pergantian halaman.

Ikon Responsif

Pernah melihat ketika kita mengubah ukuran browser dan elemen dalam website yang sedang kita buka juga ikut berubah ukuran dan susunannya? ini dilakukan supaya pengnjung tetap memiliki visibilitas konten yang baik, istilahnya adalah elemen web responsif.

Secara umum, elemen web responsif dicapai dengan menyiapkan beberapa gambar di server dalam ukuran yang berbeda.Atau cara lain adalah dengan menggunakan font yang memang isinya simbol, misalnya fontawesome. Namun seperti yang sudah kita bahas pada paragraf diatas, menggunakan ikon dalam format SVG dapat secara otomatis menyesuaikan diri agar sesuai dengan ukuran jendela browser Anda. Dengan  format SVG, ikon pada website selalu terlihat tajam dan lebih hemat tempat pada server.

Kekurangan file SVG

Ada kelebihan, pasti ada kekurangan. Format file SVG mungkin tidak dapat ditampilkan pada beberapa browser minoritas. Biasanya untuk menghindari ruang kosong karena masalah ini, kita perlu menyiapkan file tambahan dalam bentuk JPEG atau PNG sebagai penggantinya.