access_time
hourglass_empty
person_outline

Cara Aman Menambahkan File SVG ke WordPress

Anda pernah mengalami kesulitan saat mengunggah file SVG ke WordPress? Hal ini terjadi karena WordPress sama sekali tidak mendukung format SVG. Di artikel ini, kami akan mengulas cara agar gambar dengan format SVG dapat ditambahkan ke WordPress. Selain itu, kami juga akan membahas apa itu SVG dan alasan menggunakannya.

Apa Itu SVG?

Scalable Vector Graphics atau SVG adalah format gambar vektor berbasis teks XML. Biasanya, gambar-gambar yang kita lihat di internet hadir dalam format, seperti JPG dan PNG. Kedua format ini dibuat dari sejumlah ‘kotak’ berukuran sangat kecil yang disebut piksel. Sedangkan format SVG bergantung pada XML markup untuk menggambarkan garis, bentuk, dan atribut gambar lainnya.

Meskipun sudah ada sejak tahun 90-an, SVG baru dikenal belakangan ini. Statistik yang dikeluarkan oleh W3Techs menunjukkan bahwa pada bulan April 2019, hanya 16.7% website yang menggunakan file SVG. Namun, persentase ini rupanya terus bertambah seiring developer dan pemilik website menginginkan loading yang cepat di website mereka (akan kami jelaskan di bagian berikutnya).

Keunggulan lain jika Anda memilih SVG adalah format ini didukung di banyak platform. Lihat saja bagaimana browser major, seperti Chrome, Firefox, Safari, dan Chrome untuk Android menggunakan file ini.

Hanya saja, jika saat ini Anda menggunakan IE8 atau versi Chrome dan Safari sebelum di-update, Anda mungkin akan mengalami beberapa kendala karena tiga browser tersebut tidak lagi mendukung file SVG. Seharusnya ini tidak jadi masalah karena sebagian besar orang tidak lagi sering menggunakan Internet Explorer (bahkan browser yang disebutkan tidak masuk dalam peringkat top 15 global browsers market share).

Mengapa Anda Harus Menggunakan File SVG?

Harus diakui bahwa masih banyak orang yang belum familiar dengan SVG karena format ini tidak dibuat serupa grafis berbasis piksel. Namun, bukan berarti Anda lantas tidak perlu menggunakannya, kan? File SVG punya banyak kegunaan untuk website Anda.

Alasan pertama mengapa menggunakan SVG adalah skalabilitas. Karena pada dasarnya SVG berbasis vektor, kualitas gambarnya akan tetap sama meskipun resolusi layar di tiap perangkat berbeda.

Gambar JPG akan terlihat buram atau kurang jelas di perangkat tertentu karena ukurannya yang tidak terlalu besar. Namun, gambar SVG akan tetap terlihat tajam di semua jenis perangkat. Bahkan Anda bisa memperbesar (zoom in) dan memperkecil (zoom out) gambar sesuka hati tanpa khawatir kualitasnya akan ikut berkurang. Keunggulan ini sangat terasa ketika Anda hendak menawarkan user experience yang sama dan juga berkualitas tinggi kepada seluruh pengunjung website.

SVG juga diminati karena ukuran filenya yang kecil. Karena alasan inilah, ruang penyimpanan atau storage di web Anda tidak akan cepat ‘habis’. Selain itu, kecilnya ukuran format SVG juga memberi kesempatan bagi website untuk loading lebih cepat. Namun, ada satu kekurangannya – jika Anda membuat gambar yang sangat mendetail lalu mengubah atau mengonversikannya ke SVG, ukurannya akan lebih besar dari JPG, atau PNG, atau ketika keduanya digabungkan.

Mengapa demikian? Hal ini dikarenakan ukuran file SVG bergantung pada kompleksitas gambar. Semakin mendetail suatu gambar, semakin besar ukuran filenya. Karena itulah, format SVG lebih cocok untuk gambar logo dan ikon. Jadi, bila Anda ingin menampilkan gambar beresolusi tinggi – seperti hasil foto – di situs, file JPG dan PNG lebih disarankan.

Keunggulan lainya dari SVG adalah format ini di-indeks oleh Google. Semua gambar yang dibuat dengan format ini akan muncul di halaman hasil Pencarian Gambar Google. Tentu saja hal ini akan membawa pengaruh positif untuk SEO di situs Anda.

SVG Tidak Menjadi Bagian dari Inti WordPress

Dengan banyaknya keunggulan yang sudah dijabarkan tadi, mengapa SVG lantas belum banyak digunakan? Mengapa WordPress justru ‘mempersulit’ pengunggahan gambar berformat SVG?

Alasan utama mengapa WordPress tidak menjadikan SVG bagian dari intinya (file default) adalah karena risiko keamanan yang diberikannya.

Pada dasarnya, SVG adalah file teks. Orang-orang bisa dengan mudah mengeksploitasi gambar SVG dengan memasukkan kode berbahaya. Alhasil, situs Anda akan lebih rentan terhadap serangan injection yang dapat menyebabkan peretasan situs. Menakutkan, bukan?

Dalam menggunakan file SVG, kehati-hatian Anda benar-benar dituntut. Jika Anda ingin mengunggah SVG ke WordPress, lakukanlah dengan cara yang benar – terlebih lagi kalau file yang diunggah diperoleh secara gratis dari sumber yang tidak diketahui.

Untuk mencegah adanya kode yang tidak diinginkan, solusinya adalah dengan ‘membersihkan’ file SVG. Proses ini akan menghapus kode dan error (kesalahan) yang mencurigakan sehingga gambar lebih aman dipasang di situs Anda. Seperti yang sudah dijelaskan sebelumnya, mengunggah gambar SVG ke WordPress dengan tidak hati-hati akan menyebabkan masalah serius (seperti, website yang diretas dan server rusak atau crashed).

Ditambahkannya SVG ke fitur inti WordPress atau tidak masih dalam pembahasan hingga saat ini. Karena belum adanya jawaban yang pasti, kita harus kreatif dan mencari opsi dari source lain jika ingin mengunggah SVG ke WordPress.

Cara Aman Upload SVG ke WordPress

Cara terbaik dan paling aman untuk mengunggah file SVG ke WordPress adalah dengan menggunakan Safe SVG. Safe SVG adalah plugin yang secara otomatis akan ‘membersihkan’ (sanitize) file SVG yang diunggah. Caranya adalah dengan menghapus kode atau hal lain yang membahayakan keamanan situs. Selain itu, sebelum dionlinekan, plugin ini akan menampilkan gambar SVG di pustaka media sehingga Anda bisa menambahkannya ke postingan dengan mudah.

Plugin WordPress ini menyediakan versi premium dengan fitur pembatasan user. Dengan adanya fitur ini, user yang Anda izinkanlah yang bisa mengunggah gambar SVG. Fitur ini juga sangat berguna bila ada banyak orang atau admin yang berkontribusi di website Anda. Cukup berikan akses ke user yang Anda percaya.

Di versi premiumnya juga terdapat optimasi server SVGO – ukuran file bisa dikurangi dan bantuan yang didapat merupakan bantuan premium, bukan bantuan dari forum.

Plugin ini bisa ditemukan di repositori WordPress atau melalui dashboard admin WordPress.

Anda tidak perlu melakukan berbagai pengaturan dan penyesuaian ketika menginstall dan mengaktifkan plugin ini. Unggah saja gambar berformat SVG dan plugin akan membersihkannya secara otomatis.

Sebagai contoh, kami mengunggah gambar SVG sebelum menginstall plugin Safe SVG. Seperti yang Anda lihat di tangkapan layar di bawah ini, WordPress tidak mengizinkan unggahan tersebut karena alasan keamanan.

SVG adalah - Sebelum install plugi Safe SVG

Namun, setelah menginstall Safe SVG, gambar berformat SVG dapat diunggah tanpa kesulitan berarti. Alih-alih ikon file (yang ditampilkan jika plugin SVG lain yang diinstall), Anda bisa lihat pratinjau (preview) gambar SVG.

apa itu SVG - Setelah plugin Safe SVG diinstall

Selesai! Unggah gambar SVG ke WordPress kini jadi lebih mudah.

Kesimpulan

SVG menawarkan banyak keunggulan untuk dipasangkan di situs WordPress Anda. Namun, karena formatnya berbasis teks, orang-orang bisa saja menambahkan kode injection dan membuat website Anda lebih rentan terhadap serangan online berbahaya. Inilah alasan utama mengapa sampai saat ini WordPress tidak memperbolehkan usernya mengunggah gambar SVG.

Jika ingin mengunggah gambar SVG ke WordPress, Anda harus melakukannya dengan bantuan plugin bernama Safe SVG. Safe SVG adalah plugin WordPress dan akan membersihkan gambar berformat SVG secara otomatis dari kode berbahaya. Dengan begini, gambar SVG yang Anda pasang nantinya tidak memudahkan website Anda untuk diretas.

Meskipun plugin ini menjamin keamanan pengunggahan SVG, Anda tetap harus berhati-hati dan jangan lengah. Apabila Anda ingin menampikan gambar SVG gratis, selalu cek resource-nya terlebih dulu – apakah tepercaya atau tidak? Lindungilah selalu website Anda!

Penulis

Author

Ariata C. / @ariata

Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca.

Tutorial terkait

Ketik balasan

Komentar*

Nama*

Email*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Jadilah bagian dari Hostinger!