oleh

Dua Cara Aman Jika Mengaktifkan Dukungan SVG Pada WordPress

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 jika mengaktifkan dukungan SVG pada WordPress.

Apa Itu SVG?

Sebelum membahas tentang SVG, anda perlu memahami, bahwa ada dua golongan file gambar, yaitu raster dan vector.

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

File gambar vector menggunakan XML atau extensible markup language sebagai dasarnya, dengan kata lain, file-file tersebut terdiri dari kode yang bisa anda manipulasi.

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 di perbesar.

Dukungan SVG Pada WordPress

Grafik yang dapat di ubah ukurannya dengan mudah telah 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, WordPress pada dasarnya tidak memiliki dukungan untuk file SVG, alasannya adalah ancaman yang bisa muncul dari file itu sendiri.

Karena SVG merupakan kumpulan kode, maka ia dapat di manipulasi, bahkan di isi dengan script lain. Misalnya, seseorang bisa menyusupi dan meretas website anda jika file-file SVG yang ada tidak aman.

Namun, anda tidak perlu menghindari penggunaan SVG, pada bagian selanjutnya anda akan di jelaskan tentang beberapa cara agar dapat menggunakan file dengan tipe tersebut di WordPress dengan aman.

Mengaktifkan Dukungan SVG Pada WordPress Dengan Aman (Dua Cara)

Ada dua cara aman untuk mengaktifkan dukungan SVG pada WordPress, yaitu secara otomatis dan cara manual, berikut adalah langkah-langkahnya.

1. Secara Otomatis (Menggunakan Safe SVG)
apa itu svg

Safe SVG adalah sebuah plugin gratis yang bisa anda unduh di repository WordPress dan plugin ini memastikan keamanan file SVG anda.

Selain itu, ia juga mengaktifkan preview untuk semua grafik dengan tipe file tersebut di dalam media library WordPress, dengan demikian, anda tidak akan bingung ketika ingin meng-upload sebuah gambar.

Anda akan segera merasakan keuntungan dari Safe SVG setelah plugin tersebut di install dan di aktifkan.

Save SVG juga tersedia dalam versi berbayar, yang memungkinkan anda untuk menentukan siapa saja yang memiliki akses ke plugin ini, fitur tersebut bermanfaat jika website anda di kelola oleh sebuah tim.

2. Secara Manual (Menggunakan File functions.php) 

Setiap tema WordPress memiliki file functions.php, yang berfungsi mengatur fitur yang ada pada website anda, dengan mengakses file ini, pengguna dapat menambah atau mengubah setting yang ada.

Karena functions.php berada dalam database website, anda harus menggunakan FTP client untuk membukanya, ada banyak FTP client yang dapat di unduh secara gratis, seperti WinSCP dan FileZilla.

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

1. Bukalah folder root, yang biasanya di namakan public_html atau nama website anda.

2. Carilah folder tema yang sedang di gunakan, lalu bukalah 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 dan setelahnya anda dapat menggunakan file SVG di media library WordPress anda.

Tips Aman Menggunakan SVG Pada WordPress

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

  • “Membersihkan” SVG dengan tool. Salah satu tool online yang bisa di gunakan untuk “membersihkan” file SVG adalah SVG Sanitizer. Untuk menggunakan tool sederhana ini, anda hanya perlu meng-copy paste kode file XML ke kolom yang tersedia di bagian atas halaman. Setelahnya, anda cukup klik tombol “Sanitize”. Kode dari file XML yang telah “di bersihkan” akan muncul pada kolom di bawahnya.
  • Batasi wewenang pengaturan SVG. Untuk mencegah hal yang tidak di inginkan, anda juga bisa membatasi wewenang untuk mengunggah file dengan tipe tersebut, hal ini bisa di lakukan apabila website anda jika di kelola oleh sebuah tim.
  • 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 dan cara ini tidak di anjurkan.
Baca juga...  Cara Mudah membuat Posting Pada WordPress

Apa Kelebihan Menggunakan SVG?

Penggunaan grafik SVG sangat di anjurkan jika anda ingin dapat mengikuti kemajuan desain website, berikut adalah beberapa keuntungan SVG:

Ukuran yang lebih kecil

SVG pada umumnya memiliki ukuran file yang lebih kecil di bandingkan tipe gambar lainnya seperti JPG dan PNG. Berikut adalah sebuah contoh perbandingan ukuran ketiga tipe file tersebut:

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

Ukuran file SVG memang lebih kecil di bandingkan JPG dan PNG, tetapi dengan suatu batasan, sebuah percobaan menunjukkan, bahwa ukuran gambar SVG yang memiliki banyak detail dapat berlipat ganda.

Oleh karena itu, penggunaan SVG dapat meringankan beban website anda, namun perlu di ingat, bahwa tidak semua grafik perlu di ganti dengan tipe file ini. Lebih tepatnya, anda bisa tetap menggunakan PNG atau JPG untuk featured image, sedangkan gambar kecil seperti logo dan icon menggunakan SVG.

Dapat Di Perbesar

Seperti yang telah di sebutkan sebelumnya, file SVG di bentuk dengan kode dan bukan piksel, jadi ketika di perbesar di program manipulasi gambar, tipe file ini dapat di perbesar tanpa menghasilkan distorsi.

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

Bermanfaat Untuk SEO (Search Engine Optimization)

Ketika meng-upload gambar ke WordPress, anda dapat mengoptimalkannya untuk pencarian Google dengan menambahkan image title dan alt text.

Namun, gambar SVG dapat lebih mudah di temukan dan di munculkan dalam hasil pencarian jika di bandingkan JPG atau PNG.

Alasannya karena file SVG memungkinkan anda untuk memasukkan kode dan teks ke dalamnya dan 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.

Kesimpulan

SVG adalah tipe file gambar yang memiliki banyak keunggulan, salah satunya adalah ukuran filenya yang kecil, sehingga dapat mempercepat loading website anda.

Upload file SVG tidak di perbolehkan bagi pengguna WordPress, namun ada dua cara yang dapat anda lakukan untuk mengaktifkan dukungan SVG, yaitu :

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

Komentar

Tinggalkan Balasan Anda dan Terima Kasih Atas Kunjungannya...

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

Artikel Terbaru