Apa itu SVG? Inilah Alasan Mengapa Anda Perlu Menggunakannya!

SVG adalah format file gambar yang dapat meringankan website Anda karena ukurannya yang kecil. Namun WordPress tidak mengizinkan penggunanya untuk meng-upload file dengan tipe tersebut karena alasan keamanan.

Akan tetapi, masih ada jalan untuk mengakalinya. Dalam artikel ini, Anda akan mempelajari dua cara aman upload SVG ke WordPress.

Apa Itu Format SVG?

Sebelum membahas apa itu format SVG, Anda perlu tahu bahwa ada dua golongan file gambar, yaitu raster dan vector.

Gambar raster, seperti JPG dan PNG, dibentuk oleh banyak piksel warna dengan ukuran tetap. Oleh karena itu, file gambar yang termasuk dalam kategori ini akan mengalami distorsi ketika diperbesar.

File vector menggunakan XML atau extensible markup language sebagai dasarnya. Dengan kata lain, file vector terdiri dari kode yang bisa Anda manipulasi.

Nah, SVG adalah salah satu tipe file gambar yang termasuk dalam golongan vector. Karena tidak terbuat dari piksel, keunggulan SVG adalah tidak akan pecah atau kabur ketika diperbesar.

Kelebihan Menggunakan SVG

Penggunaan file SVG sangat dianjurkan agar Anda bisa mengikuti kemajuan desain website. Setidaknya ada tiga keuntungan penggunaan SVG, yaitu:

Ukuran File yang Lebih Kecil

SVG adalah file yang ukurannya lebih kecil dibandingkan tipe gambar lainnya seperti JPG dan PNG. Berikut adalah contoh perbandingan ukuran ketiga tipe file tersebut:

• PNG: 85,1KB
• JPG: 81,4KB
• SVG: 6.1KB

Dari perbandigan di atas, bisa Anda lihat bahwa ukuran file SVG jauh lebih kecil dibandingkan JPG dan PNG. Oleh karena itu, salah satu manfaat SVG adalah mempercepat loading website Anda.

Namun perlu diingat bahwa tidak semua grafik perlu diganti dengan tipe file ini. Misalnya, Anda bisa menggunakan PNG atau JPG untuk featured image, sedangkan gambar kecil seperti logo dan icon menggunakan SVG.

Bisa Diperbesar Tanpa Mengurangi Kualitas

Seperti yang telah disebutkan sebelumnya, SVG adalah file yang terdiri dari kode dan bukan piksel. Ketika diperbesar di program manipulasi gambar, tipe file ini dapat diperbesar tanpa rusak karena distorsi.

Sifat ini sangat dibutuhkan dalam desain website saat ini, terutama dengan adanya standar responsive design.

Bermanfaat untuk SEO

Ketika meng-upload gambar ke WordPress, Anda dapat mengoptimalkannya untuk SEO dengan menambahkan image title dan alt text.

Namun, gambar SVG dapat lebih mudah ditemukan dan dimunculkan dalam hasil pencarian jika dibandingkan JPG atau PNG.

Alasannya karena file SVG memungkinkan Anda untuk memasukkan kode dan teks ke dalamnya. Untuk mengoptimalkannya, Anda bisa menambahkan kode di bawah ini:

<object type="image/svg+xml" data="your_image.svg">
<img src="your_image.svg" alt="This is your image alt" title="Your image title tag">
</object>

Lalu, gantilah “This is your image alt” dan “Your image title tag” dengan alt text dan image title yang Anda inginkan.

Dukungan SVG di WordPress

Grafik yang mudah diubah ukurannya sudah menjadi kebutuhan utama dalam industri desain web. Logo dan icon merupakan contohnya.

Berdasarkan data milik website survei teknologi W3Techs, 19.1% website telah menggunakan grafik SVG. Namun jika melihat perkembangan per bulannya, penggunaan SVG akan meningkat pesat.

Meski penting, SVG adalah file yang tidak didukung di WordPress. Alasannya adalah ancaman yang bisa muncul dari file itu sendiri.

Karena SVG merupakan kumpulan kode, filenya bisa dimanipulasi. Bahkan fie SVG bisa diisi dengan skrip berbahaya. Jika itu terjadi, seseorang bisa menginjeksi website Anda dengan malware.

Namun, Anda tidak perlu menghindari penggunaan SVG. Pada bagian selanjutnya Anda akan dijelaskan tentang beberapa cara agar dapat menggunakan file dengan tipe tersebut di WordPress Hosting dengan aman.

2 Cara Upload SVG ke WordPress dengan Aman

Dua cara aman untuk upload SVG adalah sebagai berikut:

1. Cara Otomatis (Menggunakan Plugin SVG Support)

Cara mudah upload SVG adalah dengan plugin SVG Support. Dengan plugin ini, Anda bisa mengunggah file SVG ke media library WordPress seperti halnya file JPG atau PNG.

Plugin SVG support juga bisa diatur untuk hanya digunakan oleh user Administrator di WordPress. Kami sarankan Anda untuk mengaktifkan pengaturan ini untuk meningkatkan keamanan.

Caranya, klik Settings > SVG Support. Kemudian, centang checkbox Restrict to Administrators.

2. Cara Manual (Menggunakan File functions.php)

Setiap tema WordPress memiliki file functions.php, yang berfungsi mengatur fitur yang ada pada website Anda. Dengan mengedit file ini, pengguna dapat menambah atau mengubah setting yang ada.

Karena functions.php berada dalam direktori website, Anda harus menggunakan FTP client untuk membukanya. Ada banyak FTP client yang dapat diunduh secara gratis, seperti WinSCP dan FileZilla.

Apabila belum pernah menggunakan FTP client, Anda bisa mengikuti panduan FTP kami.

Berikut adalah langkah-langkah yang perlu Anda lakukan untuk mengaktifkan dukungan SVG melalui functions.php:

1. Buka folder public_html.

2. Cari folder tema yang Anda gunakan, lalu buka file functions.php di dalamnya.

3. Tambahkan kode berikut ini:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads'); 

4. Save file tersebut. Setelah ini, Anda bisa upload SVG ke WordPress.

Tips Aman Upload SVG ke WordPress

Meskipun penggunaan gambar SVG dapat memaparkan website Anda pada masalah keamanan, ada beberapa cara untuk mengatasinya:

• “Membersihkan” SVG dengan tool. Salah satu tool online yang bisa digunakan untuk “membersihkan” file SVG adalah SVG Sanitizer. Untuk menggunakan tool sederhana ini, Anda hanya perlu mennyalin kode file XML ke kolom yang tersedia di bagian atas halaman. Setelahnya, Anda cukup klik tombol “Sanitize”. Kode dari file XML yang telah “dibersihkan” akan muncul pada kolom di bawahnya.
• Batasi wewenang pengaturan SVG. SVG adalah file dengan kode yang mudah dimanipulasi. Agar tidak ada pihak yang memasukkan skrip berbahaya, Anda bisa membatasi wewenang untuk mengunggah file dengan tipe tersebut.
• Menggunakan plugin yang aman. Anda juga dapat menemukan beberapa plugin yang dapat mengaktifkan dukungan SVG. Tapi jangan buru-buru menggunakannya. Kebanyakan dari mereka hanya mengubah pengaturan MIME type agar penggunanya dapat meng-upload file SVG. Cara ini tidak dianjurkan.

Sudah Tahu Apa Itu Format SVG, Kan?

Di artikel ini Anda telah mengetahui apa itu format SVG. SVG adalah tipe file gambar yang memiliki banyak keunggulan. Salah satunya adalah ukuran filenya yang kecil, sehingga dapat mempercepat loading website Anda.

Sayangnya, Anda tidak bisa upload SVG WordPress karena rentan akan masalah keamanan. Namun, Anda bisa mengakalinya dengan mengaktifkan dukungan SVG di WordPress. Caranya ada dua, yaitu:

• Meng-install plugin Safe SVG.
• Menambah fitur pada file functions.php.

Nah, agar website lebih aman lagi meski menggunakan SVG, Anda perlu menerapkan langkah-langkah keamanan. Anda bisa mempelajarinya dengan download ebook gratis di bawah ini. Di dalamnya Anda akan menemukan lebih dari 20 langkah untuk mengamankan WordPress!