12 Alasan Perlu Menggunakan Gambar SVG

SVG adalah singkatan dari Scalable Vector Graphics, yaitu sebuah format gambar vector dari XML untuk grafis dua dimensi, yang support dengan interaksi dan animasi.

Sebenarnya format SVG sudah ada sejak tahun 1990an yang pengembangannya dilakukan oleh W3C (World Wide Web Consortium). Namun popularitasnya baru masif sekitar tahun 2017an di Indonesia. Hal ini karena faktor tidak terdapat pixels dan ukuran file lebih kecil untuk bisa diunggah ke dalam internet.

12 Alasan Menggunakan File Gambar Format SVG

Alasan perlu menggunakan gambar SVG karena file SVG menawarkan grafik halus meskipun ukurannya relatif kecil daripada bitmap. Apalagi SVG editor yang berbasis xml mudah untuk dibaca serta format gambar SVG dapat dimodifikasi menggunakan aplikasi grafis.

Penggunaan editor ini juga lebih optimal, sebab bisa meminimalisir HTTP Request yang harus dimuat dalam file gambar. Tidak ada file yang harus kamu unduh, sehingga laman website memiliki waktu singkat agar bisa memuat konten saat pengunjung akses.

Faktor ini membuat laman website yang kamu bangun lebih cepat loading sehingga meningkatkan user experience dan pagespeed dalam website.

Berikut adalah alasan kamu harus menggunakan gambar format SVG untuk kebutuhan website.

1. Mengurangi Waktu Loading

File gambar SVG memiliki karakteristik kecil daripada jenis raster sehingga cepat dimuat di dalam browser dan mempercepat pagespeed website. Pengunjung bisa mendapatkan pengalaman akses website yang cepat. Hal ini sangat penting ketika koneksi internet sedang lambat atau perangkat yang terbatas spesifikasinya.

2. Responsif dan Retina Display

SVG memiliki keunggulan yang mampu menyesuaikan berbagai ukuran perangkat. Sehingga ideal untuk desain yang responsif karena gambar tersebut mudah untuk zoom in dan zoom out tanpa menurunkan kualitasnya.

Tidak hanya itu saja, tetapi juga mendukung Retina Display untuk menghasilkan gambar jernih dan tajam untuk perangkat resolusi tinggi.

3. Peningkatan Pengalaman Pengguna (User Experience)

Situs web yang memiliki desain menarik akan menarik banyak pengunjung serta meningkatkan retensi bagi pengguna. Dengan gambar yang responsif, tentu bisa memaksimalkan pengalaman dari pengunjung.

4. Animasi dan Interaktivitas

Tidak hanya untuk gambar 2D saja, file ini juga memungkinkan gambar bisa kamu ubah dengan JavaScript atau CSS. Sehingga bisa menghasilkan animasi dengan efek yang interaktif. Adanya animasi yang halus ini bisa menarik lebih banyak pengunjung.

5. Dukungan untuk Efek Filter

SVG juga memiliki dukungan efek filter, seperti drop shadow, blur, dan gradien sehingga kamu bisa membuat desain gambar yang lebih menarik.

6. Dukungan Cross-Browser

Berbagai jenis browser sudah bisa mendukung gambar ini, seperti Mozilla Firefox, Google Chrome, Safari, Microsoft Edge, Opera, dan sebagainya. Sehingga tampilannya support dengan baik pada berbagai jenis perangkat atau sistem operasi.

7. Fallback untuk Browser Tertentu

Gambar ini tidak mendukung browser versi lama secara sepenuhnya. Namun terdapat fallback gambar ke dalam format lain untuk browser tersebut.

8. Penggunaan dalam Icon

File SVG paling cocok apabila kamu gunakan untuk simbol atau icon situs web. Sebab, gambar ini bisa mengubah ukuran tanpa merusak kualitasnya. Sehingga akan tetap tampak jelas dan tajam pada berbagai perangkat dan ukuran layar.

9. Teknik SVG Sprite

Maksud dari sprite ini artinya menggabungkan beberapa gambar ke dalam satu file. Sehingga browser cukup memuat satu file saja untuk seluruh gambar pada laman. Hal ini dapat mengurangi permintaan server sekaligus meningkatkan kecepatan saat memuat halaman.

10. Lazy Loading

Teknik ini memungkinkan gambar bisa dimuat saat muncul pada display pengguna. Sehingga mengoptimalkan waktu saat memuat halaman serta meningkatkan performa dari situs web.

11. Tidak Rentan terhadap Serangan XSS

File dengan format ini berbasis xml sehingga tahan dari serangan XSS. Hal ini membuatnya tetap aman saat digunakan pada website.

12. Cocok untuk High DPI

Keunggulan selanjutnya yaitu cocok ditampilkan pada layar yang memiliki resolusi tinggi, misalnya Retina Display. Gambar ini mampu menampilkan ketajaman tanpa pikselasi layaknya gambar raster.

Keuntungan Menggunakan Gambar SVG

Secara garis besar, kamu sudah memahami tentang SVG merupakan format grafis. Lebih lanjut apa saja sih keuntungan menggunakan SVG? Yuk simak berikut ini penjelasannya.

A. Resolusi Tinggi

Keunggulan utama dari penggunaan gambar ini adalah vector yang mudah untuk diatur skalanya dalam resolusi sesuai dengan kehendak pengguna. Bahkan tanpa mengurangi kualitasnya sedikit pun.

Mengapa demikian? Sebab, komposisi file vector bukan merupakan kumpulan dari pixel seperti halnya raster. Sehingga kamu bisa lebih mudah mengatur resolusi gambar sesuai dengan keinginan.

Inilah yang menjadi alasan penggunaannya sering kali untuk desain logo atau desain lain. Terutama untuk desain yang sering dilakukan pengubahan atau penyesuaian ukuran.

B. Skalabilitas Tanpa Kehilangan Kualitas

SVG memiliki keunggulan karena gambarnya yang bisa kamu perbesar atau perkecil sesuai kebutuhan tanpa harus mengorbankan kualitasnya. Hal ini penting digunakan untuk desain responsif yang mana tampilan website harus sesuai dengan berbagai ukuran perangkat.

C. Ukuran File yang Lebih Kecil

Gambar ini memiliki ukuran file yang lebih kecil daripada tipe gambar lain seperti PNG dan JPG. Beberapa perbandingannya diantaranya PNG 85,1 kb, JPG 81,4 kb, dan SVG 6,1 kb. Bisa terlihat dari perbandingan tersebut bahwa file SVG paling kecil daripada jenis lain.

Tetapi tidak semua file harus diganti menggunakan tipe file ini. Katakanlah kamu sudah menggunakan file png sebagai featured image, sementara untuk gambar logo bisa menggunakan file dari SVG.

D. Mudah Disesuaikan

Mengapa dikatakan mudah untuk disesuaikan? Sebab, gambar ini memiliki basis teks. Kamu bisa melakukan editing dengan perangkat lunak untuk teks.

Dari sini kamu bisa mengubah warna, atur ulang elemen hingga menyesuaikan gambar sesuai dengan kebutuhan tanpa harus merusak kualitas gambarnya.

E. SEO Friendly

SEO (Search Engine Optimization) adalah cara web developer atau digital marketing untuk meningkatkan konten kamu dalam mesin pencarian. Dengan SEO ini, kamu bisa meningkatkan page rank sekaligus memaksimalkan pendapatan menggunakan konten tersebut.

Sebab, format file ini secara umum terdapat pada Google AdSense, AdWords, dan Social Ads. File ini memiliki karakteristik SEO yang bagus sehingga sering kali muncul dalam kampanye iklan.

Namun kamu juga perlu melakukan optimalisasi karakteristik dari format file gambar tersebut untuk mendongkrak popularitas dari konten pada situs web.

2 Cara Upload SVG ke WordPress dengan Aman

Dalam format grafis, terdapat dua golongan dari file gambar, yaitu vector dan raster. Nah, gambar raster berupa PNG dan JPG terbentuk dari banyak pixel warna dan ukuran yang tetap. File gambar yang masuk dalam kategori raster bisa mengalami distorsi saat kamu perbesar.

Sementara untuk kategori vector berupa xml sebagai bahasa dasarnya. File ini terdiri atas beberapa kode yang bisa dimanipulasi. Nah, inilah yang menjadi fungsi utama dari SVG, yang mana tidak akan pecah saat diperbesar.

Setelah mengetahui pengertian, dan keuntungannya, lalu bagaimana sih cara upload SVG yang aman? Yuk simak penjelasannya berikut ini.

1. Cara Otomatis (Menggunakan Plugin SVG Support)

Cara mengunggah file ini bisa menggunakan plugin SVG support. Melalui plugin tersebut, kamu bisa dengan mudah unggah file melalui media library WordPress. Plugin ini juga bisa kamu atur menggunakan user Administrator dari WordPress.

Untuk caranya pun sangat mudah yaitu dengan klik Settings lalu klik SVG Support. Lalu centang bagian checkbox pada Restrict to Administrators.

2. Cara Manual (Menggunakan File function.php)

File function.php berguna untuk mengatur fitur pada website. Melalui editing file ini, kamu bisa menambahkan atau mengubah pengaturan yang ada. Namun gunakan FTP client ketika membukanya karena berada pada direktori web. Terdapat berbagai FTP Client yang bisa kamu unduh gratis, misalnya WinSCP.

Caranya yaitu masuk ke folder public_html, lalu cari folder tema, lalu bukalah file functions.php yang ada di dalamnya. Tambahkan kode tertentu, lalu save file tersebut.

Tips Aman Upload SVG ke WordPress

Lalu, bagaimana sih agar upload SVG ke WordPress tidak bermasalah dengan keamanannya? Berikut ini penjelasannya.

Bersihkan Menggunakan Tool

Tool online SVG Sanitizer menjadi salah satu yang bisa kamu gunakan. Cukup dengan menyalin kode xml pada kolom yang ada di bagian atas laman. Lalu, klik tombol Sanitize, secara otomatis file akan dibersihkan.

Membatasi Wewenang Pengaturan

File ini memiliki kode mudah untuk manipulasi. Sehingga batasi wewenang untuk melakukan pengunggahan file agar tidak ada pihak mana pun yang memasukkan script berbahaya.

Gunakan Plugin Aman

Jangan terburu-buru menggunakan plugin untuk mengaktifkan dukungan dari file ini. Sebab, kebanyakan plugin hanya bisa mengubah pengaturan MIME.

Kesimpulan

Secara umum, SVG merupakan file grafis yang mempunyai berbagai keunggulan. Terutama soal ukuran file yang kecil namun memiliki kualitas tinggi. Hal ini sangat berguna untuk mempercepat proses loading ketika masuk ke laman website kamu.

Namun di samping keunggulannya, tentu terdapat kekurangan seperti soal keamanan. Namun hal ini bisa kamu atasi dengan menggunakan plugin dan menambahkan fitur file functions.php.

Mengingat banyaknya keuntungan yang bisa kamu peroleh dari menggunakan file SVG, tentu sangat baik untuk menerapkannya pada website yang kamu kembangkan. Namun jangan lupa untuk tetap memperhatikan faktor keamanannya.

Bersihkan file tersebut secara berkala menggunakan tools khusus. Kemudian jangan batasilah wewenang untuk mengunggah file pada WordPress, serta pilih jenis plugin yang aman.

Itulah informasi lengkap mengenai SVG, mulai dari pengertian, keuntungan dan alasan mengapa harus menggunakannya hingga tips aman unggah file ke WordPress. Semoga informasi ini bermanfaat untuk kamu.