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.<\/p>\n
Akan tetapi, masih ada jalan untuk mengakalinya. Dalam artikel ini, Anda akan mempelajari dua cara aman upload SVG ke WordPress.<\/p>\n
Sebelum membahas tentang SVG, Anda perlu tahu bahwa ada dua golongan file gambar, yaitu raster dan vector.<\/p>\n
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.<\/p>\n
File vector menggunakan XML atau extensible markup language sebagai dasarnya. Dengan kata lain, file vector terdiri dari kode yang bisa Anda manipulasi.<\/p>\n
Nah, SVG adalah salah satu tipe file gambar yang termasuk dalam golongan vector. Karena tidak terbuat dari piksel, file SVG tidak akan pecah atau kabur ketika diperbesar.<\/p>\n
Penggunaan file SVG sangat dianjurkan agar Anda bisa mengikuti kemajuan desain website. Setidaknya ada tiga keuntungan penggunaan SVG, yaitu:<\/p>\n
SVG pada umumnya memiliki ukuran file yang lebih kecil dibandingkan tipe gambar lainnya seperti JPG dan PNG. Berikut adalah contoh perbandingan ukuran ketiga tipe file tersebut:<\/p>\n
Dari perbandigan di atas, bisa Anda lihat bahwa ukuran file SVG jauh lebih kecil dibandingkan JPG dan PNG. Oleh karena itu, penggunaan SVG dapat\u00a0mempercepat loading website\u00a0Anda.<\/p>\n
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.<\/p>\n
Seperti yang telah disebutkan sebelumnya, file SVG dibentuk dengan kode dan bukan piksel. Ketika diperbesar di program manipulasi gambar, tipe file ini dapat diperbesar tanpa rusak karena distorsi.<\/p>\n
Sifat ini sangat dibutuhkan dalam\u00a0desain website\u00a0saat ini, terutama dengan adanya standar responsive design.<\/p>\n
Ketika meng-upload gambar ke WordPress, Anda dapat mengoptimalkannya untuk\u00a0SEO\u00a0dengan menambahkan image title dan alt text.<\/p>\n
Namun, gambar SVG dapat lebih mudah ditemukan dan dimunculkan dalam hasil pencarian jika dibandingkan JPG atau PNG.<\/p>\n
Alasannya karena file SVG memungkinkan Anda untuk memasukkan kode dan teks ke dalamnya. Untuk mengoptimalkannya, Anda bisa menambahkan kode di bawah ini:<\/p>\n
<object type=\"image\/svg+xml\" data=\"your_image.svg\">\r\n<img src=\"your_image.svg\" alt=\"This is your image alt\" title=\"Your image title tag\">\r\n<\/object><\/code><\/pre>\nLalu, gantilah \u201cThis is your image alt\u201d dan \u201cYour image title tag\u201d dengan alt text dan image title yang Anda inginkan.<\/p>\n
Dukungan SVG di WordPress<\/span><\/h2>\nGrafik yang mudah diubah ukurannya sudah menjadi kebutuhan utama dalam industri desain web. Logo dan icon merupakan contohnya.<\/p>\n
Berdasarkan data milik website survei teknologi W3Techs,\u00a019.1%<\/a>\u00a0website telah menggunakan grafik SVG. Namun jika melihat perkembangan per bulannya, penggunaan SVG akan meningkat pesat.<\/p>\nMeski penting, WordPress pada dasarnya tidak memiliki dukungan untuk file SVG. Alasannya adalah ancaman yang bisa muncul dari file itu sendiri.<\/p>\n
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\u00a0malware.<\/p>\n
Namun, Anda tidak perlu menghindari penggunaan SVG. Pada bagian selanjutnya Anda akan dijelaskan tentang beberapa cara agar dapat menggunakan file dengan tipe tersebut di\u00a0WordPress Hosting<\/strong>\u00a0dengan aman.<\/p>\n2 Cara Upload SVG ke WordPress dengan Aman<\/span><\/h2>\nAda dua cara aman untuk upload SVG ke WordPress: secara otomatis dan manual. Berikut adalah langkah-langkahnya.<\/p>\n
1. Cara Otomatis (Menggunakan Plugin SVG Support)<\/span><\/h3>\nCara mudah upload SVG ke WordPress adalah dengan plugin\u00a0SVG Support<\/strong>. Dengan plugin ini, Anda bisa mengunggah file SVG ke media library WordPress seperti halnya file JPG atau PNG.<\/p>\nPlugin SVG support juga bisa diatur untuk hanya digunakan oleh user Administrator di WordPress. Kami sarankan Anda untuk mengaktifkan pengaturan ini untuk meningkatkan keamanan.<\/p>\n
Caranya, klik\u00a0Settings > SVG Support<\/strong>. Kemudian, centang checkbox\u00a0Restrict to Administrators<\/strong>.<\/p>\n2. Cara Manual (Menggunakan File functions.php)\u00a0<\/span><\/h3>\nSetiap 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.<\/p>\n
Karena functions.php berada dalam direktori website, Anda harus menggunakan FTP client untuk membukanya. Ada banyak FTP client yang dapat diunduh secara gratis, seperti\u00a0WinSCP<\/a>\u00a0dan\u00a0FileZilla<\/a>.<\/p>\nBerikut adalah langkah-langkah yang perlu Anda lakukan untuk mengaktifkan dukungan SVG melalui functions.php:<\/p>\n
1. Buka folder\u00a0public_html<\/strong>.<\/p>\n2. Cari folder tema yang Anda gunakan, lalu buka file\u00a0functions.php<\/strong>\u00a0di dalamnya.<\/p>\n3. Tambahkan kode berikut ini:<\/p>\n
function add_file_types_to_uploads($file_types){\r\n$new_filetypes = array();\r\n$new_filetypes['svg'] = 'image\/svg+xml';\r\n$file_types = array_merge($file_types, $new_filetypes );\r\nreturn $file_types;\r\n}\r\nadd_action('upload_mimes', 'add_file_types_to_uploads'); <\/code><\/pre>\n4. Save file tersebut. Setelah ini, Anda bisa upload SVG ke WordPress.<\/p>\n
Tips Aman Upload SVG ke WordPress<\/span><\/h2>\nMeskipun penggunaan gambar SVG dapat memaparkan website Anda pada masalah keamanan, ada beberapa cara untuk mengatasinya:<\/p>\n
\n- \u201cMembersihkan\u201d SVG dengan tool<\/strong>. Salah satu tool online yang bisa digunakan untuk \u201cmembersihkan\u201d file SVG adalah\u00a0SVG Sanitizer<\/a>. 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 \u201cSanitize\u201d. Kode dari file XML yang telah \u201cdibersihkan\u201d akan muncul pada kolom di bawahnya.<\/li>\n
- Batasi wewenang pengaturan SVG.<\/strong>\u00a0SVG 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.<\/li>\n
- Menggunakan plugin yang aman.<\/strong>\u00a0Anda 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.<\/li>\n<\/ul>\n
Kesimpulan<\/span><\/h2>\n