File Dalam Format Svg: Apa Dan Bagaimana Cara Kerjanya?

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, kau niscaya udah terbiasa dengan format file gambar pada umumnya, yaitu JPG, PNG dan GIF. Sementara SVG ialah format file vektor, sehingga mempunyai 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 sanggup di resize tanpa merusak kualitasnya (scalable).

Desain Web

Format file SVG, sama halnya menyerupai file Flash, bersifat terbuka, terstandarisasi dan berbasis pada aba-aba XML, sehingga mempunyai kompatibilitas hampir dengan semua web browser. Ini berarti; kita sanggup memasukkannya dalam website tetap dalam format vektor.

Saat ini, dominan website memakai gambar dalam format pixel, tapi perlahan format SVG sudah mulai dipakai secara luas di internet. Vektor selalu terlihat tajam pada resolusi apapun, dan mengingat SVG (yang sebetulnya merupakan kependekan dari Scalable Vector Graphics) sanggup mempunyai ukuran file kecil, ini ialah situasi menguntungkan buat semua.

Warna & Animasi

Keistimewaan lain dari format SVG adalah, kau sanggup memodifikasi warna, ukuran dan posisinya dengan memakai beberapa baris perintah CSS.

Misalnya, kalau file orisinil SVG berwarna hijau, namun alasannya suatu kondisi web Anda perlu mengubah warnanya, cukup menambahkan beberapa baris aba-aba CSS untuk melaksanakan hal tersebut. Luar biasa praktis, bukan? Selain mengubah warnanya, file SVG juga sanggup di-animasi-kan dengan CSS: misal Anda ingin gambar SVG berkedip ketika mouse berada diatasnya, atau membuatnya berputar-putar dikala 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 mempunyai visibilitas konten yang baik, istilahnya ialah elemen web responsif.

Secara umum, elemen web responsif dicapai dengan menyiapkan beberapa gambar di server dalam ukuran yang berbeda.Atau cara lain ialah dengan memakai font yang memang isinya simbol, contohnya fontawesome. Namun menyerupai yang sudah kita bahas pada paragraf diatas, memakai ikon dalam format SVG sanggup secara otomatis beradaptasi supaya sesuai dengan ukuran jendela browser Anda. Dengan  format SVG, ikon pada website selalu terlihat tajam dan lebih irit daerah pada server.

Kekurangan file SVG

Ada kelebihan, niscaya ada kekurangan. Format file SVG mungkin tidak sanggup ditampilkan pada beberapa browser minoritas. Biasanya untuk menghindari ruang kosong alasannya problem ini, kita perlu menyiapkan file pemanis dalam bentuk JPEG atau PNG sebagai penggantinya.

Tweet

Subscribe to receive free email updates: