SVG yakni format file gambar yang dapat meringankan situs Kamu karena ukurannya yang kecil. Namun WordPress tak mengizinkan penggunanya bagi meng-upload file dengan tipe tersebut karena alasan keamanan.
Akan tetapi, masih ada jalan bagi mengakalinya. Pada artikel ini, Kamu akan mempelajari dua cara aman mengaktifkan dukungan SVG di WordPress.
Apa Itu SVG?
Sebelum membahas mengenai SVG, Kamu 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 pada kategori ini akan mengalami distorsi ketika diperbesar.
File gambar vector menggunakan XML atau extensible markup language selaku dasarnya. Dengan kata lain, file-file tersebut terdiri dari kode yang dapat Kamu manipulasi.
SVG yakni diantara tipe file gambar yang termasuk pada golongan vector. Karena tak terbuat dari piksel, file SVG tak akan pecah atau kabur ketika diperbesar.
Dukungan SVG di WordPress
Grafik yang dapat diubah ukurannya dengan gampang telah menjadi keperluan utama pada industri desain web. Logo dan icon adalah sebuah contohnya.
Merujuk pada data milik situs survei teknologi W3Techs, 19.1% situs telah menggunakan grafik SVG. Namun jikalau melihat perkembangan per bulannya, pemakaian SVG akan meningkat pesat.
Meski urgen, WordPress di dasarnya tak mempunyai dukungan bagi file SVG. Alasannya yakni ancaman yang dapat muncul dari file itu sendiri.
Karena SVG adalah sebuah kumpulan kode, karenanya ia dapat dimanipulasi, bahkan diisi dengan script lain. Misalnya, seseorang dapat menyusupi dan meretas situs Kamu jikalau file-file SVG yang terdapat tak aman.
Namun, Kamu tak perlu menghindari pemakaian SVG. Di bagian berikutnya Kamu akan dideskripsikan mengenai beberapa cara agar dapat menggunakan file dengan tipe tersebut di WordPress hosting dengan aman.
Mengaktifkan Dukungan SVG di WordPress dengan Aman (Dua Cara)
Ada dua cara aman bagi mengaktifkan dukungan SVG di WordPress: secara otomatis dan manual. Berikut yakni langkah-langkahnya.
1. Secara Otomatis (Menggunakan Safe SVG)
Safe SVG yakni sebuah plugin cuma-cuma yang dapat Kamu unduh di repository WordPress. Plugin ini memastikan keamanan file SVG Kamu.
Selain itu, ia pun mengaktifkan preview bagi seluruh grafik dengan tipe file tersebut di pada media library WordPress. Dengan demikian, Kamu tak akan bingung ketika ingin meng-upload sebuah gambar.
Kamu akan segera merasakan keuntungan dari Safe SVG setelah plugin tersebut di-install dan diaktifkan.
Save SVG pun terdapat pada versi berbayar, yang memungkinkan Kamu bagi menentukan siapa saja yang mempunyai akses ke plugin ini. Fitur tersebut bermanfaat jikalau situs Kamu dikelola oleh sebuah tim.
Seandainya belum mengetahui cara install plugin di WordPress, Kamu dapat mempelajarinya di artikel ini.
2. Secara Manual (Menggunakan File functions.php)
Setiap tema WordPress mempunyai file functions.php, yang berfungsi mengatur fitur yang terdapat di situs Kamu. Dengan mengakses file ini, pengguna dapat menambah atau mengubah pengaturan yang terdapat.
Karena functions.php berada pada database situs, Kamu mesti menggunakan FTP client bagi membukanya. Ada banyak FTP client yang dapat diunduh secara cuma-cuma, seperti WinSCP dan FileZilla.
Apabila belum pernah menggunakan FTP client, artikel ini dapat menolong Kamu.
Berikut yakni strategi yang perlu Kamu lakukan bagi mengaktifkan dukungan SVG lewat functions.php:
1. Bukalah folder root, yang biasanya dinamakan public_html atau nama situs Kamu.
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, Kamu dapat menggunakan file SVG di media library WordPress.
Tips Aman Menggunakan SVG di WordPress
Meskipun pemakaian gambar SVG dapat memaparkan situs Kamu di masalah keamanan, ada beberapa cara bagi mengatasinya:
- “Membersihkan” SVG dengan tool. Diantara tool online yang dapat digunakan bagi “membersihkan” file SVG yakni SVG Sanitizer. Bagi menggunakan tool sederhana ini, Kamu hanya perlu meng-copy paste kode file XML ke kolom yang terdapat di bagian atas halaman. Setelahnya, Kamu lumayan klik tombol “Sanitize”. Kode dari file XML yang telah “dibersihkan” akan muncul di kolom di bawahnya.
- Batasi wewenang pengaturan SVG. Bagi mencegah hal yang tak diinginkan, Kamu pun dapat membatasi wewenang bagi mengunggah file dengan tipe tersebut. Hal ini dapat dilakukan apabila situs Kamu dikelola oleh sebuah tim.
- Menggunakan plugin yang aman. Kamu pun dapat menemukan beberapa plugin yang dapat mengaktifkan dukungan SVG. Namun jangan buru-buru menggunakannya. Kebanyakan dari mereka hanya mengubah pengaturan MIME type agar penggunanya dapat meng-upload file SVG dan cara ini tak dianjurkan.
Apa Kelebihan Menggunakan SVG?
Pemakaian grafik SVG benar-benar dianjurkan jikalau Kamu ingin dapat mengikuti kemajuan desain situs. Berikut yakni beberapa keuntungan SVG:
Ukuran yang lebih kecil
SVG di umumnya mempunyai ukuran file yang lebih kecil diperbandingkan tipe gambar lainnya seperti JPG dan PNG. Berikut yakni sebuah contoh perbandingan ukuran ketiga tipe file tersebut:
- PNG: 85,1KB
- JPG: 81,4KB
- SVG: 6.1KB
Ukuran file SVG memang lebih kecil diperbandingkan JPG dan PNG, tetapi dengan suatu batasan. Sebuah percobaan menunjukkan bahwa ukuran gambar SVG yang mempunyai banyak detail dapat berlipat ganda.
Oleh karena itu, pemakaian SVG dapat meringankan beban situs Kamu. Namun perlu diingat bahwa tak seluruh grafik perlu diganti dengan tipe file ini. Lebih tepatnya, Kamu dapat tetap menggunakan PNG atau JPG bagi 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 benar-benar dibutuhkan pada desain situs dikala ini, terutama dengan adanya standar memiliki tampilan yang dinamis design.
Bermanfaat bagi SEO (search engine optimization)
Ketika meng-upload gambar ke WordPress, Kamu dapat mengoptimalkannya bagi pencarian Google dengan menambahkan image title dan alt text.
Namun, gambar SVG dapat lebih gampang ditemukan dan dimunculkan pada hasil pencarian jikalau diperbandingkan JPG atau PNG.
Alasannya karena file SVG memungkinkan Kamu bagi memasukkan kode dan teks ke dalamnya. Bagi mengoptimalkannya, Kamu dapat menambahkan kode di bawah ini:
<object type=image/svg+xml data=your_image.svg>
<img src=your_image.svg alt=SVG yakni format file gambar yang dapat meringankan situs Kamu karena ukurannya yang ke Cara Aman Mengaktifkan Dukungan SVG di WordPress title=Cara Aman Mengaktifkan Dukungan SVG di WordPress>
</object>
Lalu, gantilah “This is your image alt” dan “Your image title tag” dengan alt text dan image title yang Kamu inginkan.
Penutup
SVG yakni tipe file gambar yang mempunyai banyak keunggulan. Salah satunya yakni ukuran filenya yang kecil, sehingga dapat mempercepat loading situs Kamu.
Upload file SVG tak diperbolehkan untuk pengguna WordPress. Namun ada dua cara yang dapat Kamu lakukan bagi mengaktifkan dukungan SVG:
- Meng-install plugin Safe SVG.
- Menambah fitur di file functions.php.
Semoga artikel ini bermanfaat untuk Kamu. Seandainya mempunyai pertanyaan mengenai topik ini, jangan sungkan bagi menuliskannya di kolom komentar.
Sumber https://niagahoster.co.id/