Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.

Cara Aman Mengaktifkan Dukungan SVG di WordPress

3 min read

svg adalah

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 mengaktifkan dukungan SVG di 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, dibentuk oleh banyak piksel warna dengan ukuran tetap. Oleh karena itu, file gambar yang termasuk dalam kategori ini akan mengalami distorsi ketika diperbesar.

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 diperbesar.

Dukungan SVG di WordPress

Grafik yang dapat diubah 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 dimanipulasi, bahkan diisi 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 dijelaskan tentang beberapa cara agar dapat menggunakan file dengan tipe tersebut di WordPress dengan aman.

Mengaktifkan Dukungan SVG di WordPress dengan Aman (Dua Cara)

Ada dua cara aman untuk mengaktifkan dukungan SVG di WordPress: secara otomatis dan 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. 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 diaktifkan.

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 dikelola oleh sebuah tim.

Jika belum mengetahui cara install plugin di WordPress, Anda dapat mempelajarinya di artikel ini.

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 diunduh secara gratis, seperti WinSCP dan FileZilla.

Apabila belum pernah menggunakan FTP client, artikel ini dapat membantu Anda.

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

1. Bukalah folder root, yang biasanya dinamakan public_html atau nama website Anda.

2. Carilah folder tema yang sedang digunakan, 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. Setelah ini, Anda dapat menggunakan file SVG di media library WordPress.

Tips Aman Menggunakan SVG di 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 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 “dibersihkan” akan muncul pada kolom di bawahnya.
  • Batasi wewenang pengaturan SVG. Untuk mencegah hal yang tidak diinginkan, Anda juga bisa membatasi wewenang untuk mengunggah file dengan tipe tersebut. Hal ini bisa dilakukan apabila website Anda dikelola 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 dianjurkan.

Apa Kelebihan Menggunakan SVG?

Penggunaan grafik SVG sangat dianjurkan 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 dibandingkan 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 dibandingkan 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 diingat bahwa tidak semua grafik perlu diganti 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 Diperbesar

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 menghasilkan distorsi.

Sifat ini sangat dibutuhkan 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 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.

Penutup

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 diperbolehkan bagi pengguna WordPress. Namun ada dua cara yang dapat Anda lakukan untuk mengaktifkan dukungan SVG:

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

Semoga artikel ini bermanfaat bagi Anda. Jika memiliki pertanyaan tentang topik ini, jangan sungkan untuk menuliskannya di kolom komentar.

0
Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.

Leave a Reply

Your email address will not be published. Required fields are marked *

8 + 4 =