Manfaat menggunakan Scalable Vector Graphics
Scalable Vector Graphics, atau SVG, memainkan peran penting dalam desain situs web saat ini. Jika saat ini Anda tidak menggunakan SVG dalam karya desain web Anda, berikut adalah beberapa alasan mengapa Anda harus mulai melakukannya, serta fallback yang dapat Anda gunakan untuk browser lama yang tidak mendukung file-file ini.
Resolusi
Manfaat terbesar dari SVG adalah kemandirian resolusi. Karena file SVG adalah grafis vektor daripada gambar raster berbasis piksel, mereka dapat diubah ukurannya tanpa kehilangan kualitas gambar. Ini sangat membantu ketika Anda membuat situs web responsif yang perlu terlihat bagus dan berfungsi dengan baik di berbagai ukuran layar dan perangkat .
File SVG dapat ditingkatkan keatas atau ke bawah untuk mengakomodasi perubahan ukuran dan kebutuhan tata letak dari situs web responsif Anda dan Anda tidak perlu khawatir tentang grafik yang memiliki kualitas yang dikompromikan setiap langkah.
Ukuran file
Salah satu tantangan dengan menggunakan gambar raster (JPG, PNG, GIF) pada situs web responsif adalah ukuran file dari gambar-gambar tersebut. Karena gambar raster tidak menskalakan cara yang dilakukan vektor, Anda harus mengirimkan gambar berbasis piksel Anda pada ukuran terbesar di mana mereka akan ditampilkan. Ini karena Anda selalu dapat membuat gambar lebih kecil dan mempertahankan kualitasnya, tetapi hal yang sama tidak berlaku untuk membuat gambar lebih besar. Hasil akhirnya adalah Anda sering memiliki gambar yang jauh lebih besar daripada yang ditampilkan di layar seseorang, yang artinya mereka tidak perlu dipaksa mengunduh file yang sangat besar.
SVG mengatasi tantangan ini. Karena grafik vektor dapat diskalakan, Anda dapat memiliki ukuran file yang sangat kecil terlepas dari seberapa besar gambar-gambar itu mungkin perlu ditampilkan. Ini pada akhirnya akan berdampak positif pada kinerja dan kecepatan unduh keseluruhan situs.
CSS Styling
Kode SVG juga dapat ditambahkan langsung ke HTML halaman. Ini dikenal sebagai “inline SVG.” Salah satu manfaat menggunakan inline SVG adalah karena grafik sebenarnya diambil oleh browser berdasarkan kode Anda, tidak perlu membuat permintaan HTTP untuk mengambil file gambar. Manfaat lain adalah bahwa SVG sebaris dapat ditata dengan CSS.
Perlu mengubah warna ikon SVG? Daripada perlu membuka gambar itu di beberapa jenis perangkat lunak pengeditan dan mengekspor dan mengunggah file lagi, Anda dapat dengan mudah mengubah file SVG dengan beberapa baris CSS.
Anda juga dapat menggunakan gaya CSS lainnya pada grafik SVG untuk mengubahnya pada status hover atau untuk kebutuhan desain tertentu. Anda bahkan dapat menganimasikan grafik tersebut untuk menambahkan beberapa gerakan dan interaktivitas ke halaman.
Animasi
Karena file SVG sebaris dapat ditata dengan CSS, Anda juga dapat menggunakan animasi CSS. Perubahan dan transisi CSS adalah dua cara mudah untuk menambahkan beberapa kehidupan ke file SVG. Anda bisa mendapatkan pengalaman seperti Flash yang kaya pada halaman tanpa menyerah pada kerugian yang datang dengan menggunakan Flash di situs web hari ini.
Penggunaan SVG
Sekuat apa pun SVG, grafis ini tidak dapat menggantikan setiap format gambar lain yang Anda gunakan di situs web Anda. Foto yang membutuhkan kedalaman warna yang mendalam masih harus berupa JPG atau mungkin file PNG, tetapi gambar sederhana seperti ikon sangat cocok untuk dijalankan sebagai SVG.
SVG juga bisa sesuai untuk ilustrasi yang lebih kompleks, seperti logo perusahaan atau grafik dan bagan. Semua grafik akan mendapat manfaat dari scalable, dapat ditata dengan CSS, dan keuntungan lain yang tercantum dalam artikel ini.
Dukungan untuk Browser Lama
Dukungan saat ini untuk SVG sangat baik di browser web modern. Satu-satunya browser yang benar-benar kurang mendukung untuk grafik ini adalah versi Internet Explorer yang lebih lama (Versi 8 dan di bawah) dan beberapa versi Android yang lebih lama. Secara keseluruhan, persentase yang sangat kecil dari populasi penelusuran masih menggunakan peramban ini, dan jumlah itu terus menyusut. Ini berarti bahwa SVG dapat digunakan dengan cukup aman di situs web saat ini.
Jika Anda ingin memberikan fallback untuk SVG, Anda dapat menggunakan alat seperti Grumpicon dari Grup Filamen. Sumber daya ini akan mengambil file gambar SVG Anda dan membuat penggantian PNG untuk browser yang lebih lama.
Diedit oleh Jeremy Girard pada 1/27/17