Scalable Vector Graphics, atau SVG, memainkan peran penting dalam desain situs web saat ini. Jika saat ini Anda tidak menggunakan SVG dalam pekerjaan 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 ini.
Resolusi
Manfaat terbesar SVG adalah independensi resolusi. Karena file SVG adalah grafik vektor (berlawanan dengan gambar raster berbasis piksel), Anda dapat mengubah ukurannya tanpa kehilangan kualitas gambar. Ini sangat membantu saat Anda membuat situs web responsif yang harus terlihat bagus dan berfungsi dengan baik di berbagai ukuran layar dan perangkat. Anda dapat meningkatkan atau menurunkan skala file SVG untuk mengakomodasi perubahan ukuran dan kebutuhan tata letak situs web responsif Anda tanpa mengurangi kualitasnya dengan cara apa pun.
Umumnya, SVG memiliki tampilan yang lebih halus dan tajam dibandingkan gambar format lain, berapa pun ukurannya.
Ukuran File
Salah satu tantangan dengan menggunakan gambar raster (mis., JPG, PNG, GIF) di situs web responsif adalah ukuran file. Karena gambar raster tidak menskalakan seperti gambar vektor, Anda harus mengirimkan gambar berbasis piksel dalam ukuran terbesar yang 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. Hasilnya adalah gambar yang jauh lebih besar dari ukuran yang sedang dilihat, memaksa browser untuk mengunduh file besar.
Sebaliknya, grafik vektor dapat diskalakan, sehingga Anda dapat menggunakan ukuran file yang sangat kecil terlepas dari seberapa besar gambar tersebut mungkin perlu ditampilkan. Ini pada akhirnya mengoptimalkan kinerja situs secara keseluruhan dan kecepatan unduh.
Styling CSS
Anda dapat dengan mudah menambahkan SVG langsung ke HTML halaman. Ini dikenal sebagai SVG sebaris. Salah satu keuntungan menggunakan SVG sebaris adalah, karena grafik sebenarnya digambar oleh browser, tidak perlu permintaan HTTP untuk mengambil file gambar.
Manfaat lain: Anda dapat menata SVG sebaris dengan CSS. Perlu mengubah warna ikon SVG? Alih-alih mengedit gambar itu dalam perangkat lunak pengeditan grafik dan kemudian mengekspor dan mengunggah file lagi, Anda dapat mengubah file SVG hanya dengan beberapa baris CSS. Anda dapat menggunakan CSS untuk mengubah SVG untuk status melayang dan kebutuhan desain lainnya juga.
Intisari
Karena Anda dapat menata file SVG sebaris dengan CSS, Anda juga dapat menggunakan animasi CSS pada file tersebut. Transformasi dan transisi CSS adalah dua cara mudah untuk menambahkan beberapa kehidupan ke SVG. Anda bisa mendapatkan pengalaman kaya Flash di halaman tanpa menggunakan Flash-yang tidak lagi didukung iPad. Faktanya, Adobe akan menghapus Flash secara bertahap pada akhir tahun 2020.
Penggunaan SVG
Sekuat SVG, mereka tidak dapat menggantikan setiap format gambar lainnya. Foto yang membutuhkan kedalaman warna yang kaya tetap harus dalam format-j.webp
SVG juga sesuai untuk beberapa ilustrasi kompleks, seperti grafik, bagan, dan logo perusahaan. Semua grafik ini diuntungkan karena dapat diskalakan dan dapat ditata dengan CSS.
Dukungan untuk Peramban Lama
Dukungan SVG saat ini sangat bagus di browser web modern. Satu-satunya browser yang tidak mendukung grafik ini adalah Internet Explorer versi lama (yang tidak lagi didukung oleh Microsoft) dan beberapa versi Android lama. Secara keseluruhan, persentase yang sangat kecil dari populasi penjelajahan masih menggunakan browser ini, dan jumlah itu terus menyusut. Ini berarti Anda dapat menggunakan SVG di situs web Anda tanpa khawatir.
Jika Anda ingin memberikan fallback untuk SVG, gunakan alat seperti Grumpicon dari Filament Group. Sumber daya ini membuat-p.webp
