Aktifkan Dukungan SVG di WordPress

WordPress memungkinkan pengguna untuk mengunggah beberapa jenis file gambar yang berbeda. Anda mungkin akan mengenali tersangka yang biasa, seperti PNG dan JPG. Menampilkan jenis file lain, seperti grafik vektor, bisa lebih bermasalah.

Untungnya, ada beberapa cara untuk memasukkan file vektor ke situs web Anda. Meskipun bukan fitur asli, file Scalable Vector Graphics (SVG) dapat digunakan untuk menampilkan gambar dua dimensi di situs WordPress. Dengan sedikit konfigurasi ulang, Anda akan dapat mengoptimalkan beberapa logo dan grafik lainnya menggunakan jenis file ini.

Catatan: Jika Anda menghosting dengan WP Engine, kami secara bawaan mendukung kompresi GZIP pada file SVG.

Pada artikel ini, kita akan mempelajari lebih lanjut tentang apa itu file SVG dan mengapa Anda mungkin ingin menggunakannya. Kemudian kami akan membahas dua cara untuk mengaktifkan penggunaannya di situs web Anda. Kami juga akan membahas beberapa tindakan pengamanan penting yang mungkin ingin Anda lakukan. Mari kita mulai!

Apa itu SVG?

File SVG adalah jenis gambar vektor. File vektor disusun berbeda dari jenis file gambar yang lebih umum. Misalnya, JPG terdiri dari ribuan piksel. Sebaliknya, dengan file SVG, bukan itu masalahnya.

Gambar vektor lebih seperti sekumpulan instruksi tertulis. Mereka tidak mengandung piksel yang membentuk gambar yang lebih besar. Sebagai gantinya, mereka menyertakan kumpulan data seperti skema yang membuat gambar dua dimensi. Ini berarti ada beberapa manfaat unik menggunakan file SVG.

Mengapa Menggunakan SVG?

SVG memiliki sejumlah fasilitas. Karena sangat dapat diskalakan, Anda dapat memanipulasi ukuran sesuai kebutuhan tanpa memengaruhi kualitas gambar. Seperti yang mungkin Anda ketahui dengan sangat baik, jika Anda mencoba memperbesar ukuran JPG, kualitasnya menurun ke tingkat yang tidak dapat digunakan dengan sangat cepat.

Di situlah SVG bisa berguna. Meskipun tidak dimaksudkan untuk menampilkan foto tradisional, ini adalah pilihan tepat untuk logo bisnis, ikon, dan grafik sederhana lainnya di situs web Anda.

Selain itu, file SVG cenderung jauh lebih kecil daripada jenis gambar lainnya. Ini berarti situs Anda tidak akan macet oleh grafik. Terlebih lagi, file SVG diindeks oleh Google, dan sudah cukup lama. Ini bisa menjadi keuntungan nyata untuk Search Engine Optimization (SEO) situs Anda.

Cara Mengunggah SVG ke WordPress

Karena WordPress tidak menyertakan dukungan untuk SVG di luar kotak, Anda harus bekerja sedikit lebih keras untuk menyertakannya di situs web Anda. Di beberapa bagian selanjutnya, kita akan membahas cara menambahkan file SVG ke situs web Anda dengan plugin dan melalui proses manual.

Metode 1: Gunakan Plugin

Seperti banyak tugas WordPress lainnya, plugin dapat mempermudah pengaktifan dukungan SVG. Yang harus Anda lakukan adalah memilih alat yang tepat dan mengonfigurasi beberapa pengaturan.

Langkah 1: Unduh Plugin

Pertama, Anda harus mengunduh dan memasang plugin SVG. Kami merekomendasikan Dukungan SVG:

Setelah Anda menginstal dan mengaktifkan plugin, Anda akan memiliki opsi menu baru di dasbor WordPress Anda di bawah Settings > SVG Support . Di sana, Anda akan menerima petunjuk tentang cara menata file SVG untuk situs web Anda:

Selain itu, Anda dapat mengonfigurasi beberapa setelan administratif penting. Ini termasuk membatasi hak istimewa pengunggahan SVG hanya untuk administrator:

Setelah itu, Anda dapat mengunggah file SVG langsung ke Media Library Anda. Namun, ada beberapa item penting lainnya yang harus diurus terlebih dahulu.

Langkah 2: Aktifkan dukungan GZip untuk File SVG di Server Anda

Bagaimana Anda mendekati langkah ini akan bergantung pada host web dan penyiapan server Anda. Misalnya, di WP Engine, GZip sudah diaktifkan untuk daftar jenis file tertentu. Dengan demikian, "image/svg+xml" bukan salah satunya.

Menambahkan jenis ini ke daftar situs web Anda akan memastikan bahwa file SVG Anda dioptimalkan dengan tepat dan cepat. Anda harus menyertakan jenis file ini di file .htaccess Anda, agar semuanya berjalan lancar.

Langkah 3: Pastikan Plugin Mengamankan File dengan Benar

Salah satu kelemahan menggunakan file SVG, dan alasan utama jenis file ini belum dimasukkan ke dalam inti WordPress, adalah karena masalah keamanan. Karena file SVG berbasis XML, file tersebut rentan terhadap serangan Entitas Eksternal, di antara risiko lainnya.

Saat Anda mengonfigurasi plugin SVG, sebaiknya batasi akses unggah SVG hanya untuk administrator. Namun, pendekatan yang lebih aman adalah 'membersihkan' file SVG Anda sebelum mengunggahnya. Ini menghilangkan salah satu kode XML yang tidak perlu yang mungkin membuat situs Anda terbuka untuk serangan.

Plugin Dukungan SVG tidak menyertakan sanitasi otomatis, tetapi ada plugin lain yang melakukannya. Safe SVG adalah salah satunya:

Atau, Anda juga dapat memasang pembersih sendiri dan menggunakannya secara mandiri. Pembuat Safe SVG telah menyediakan kode pembersih plugin di GitHub, untuk digunakan siapa saja.

Memiliki pembersih Anda sendiri juga merupakan opsi yang baik jika Anda berencana menggunakan metode selanjutnya untuk mengaktifkan SVG di situs web WordPress Anda.

Metode 2: Aktifkan Pengunggahan File SVG Secara Manual

Jika Anda lebih suka menggunakan plugin, Anda dapat secara manual mengaktifkan situs WordPress Anda untuk menerima file SVG. Selanjutnya, kita akan melihat bagaimana proses itu bekerja.

Langkah 1: Edit File Functions.php Situs Anda

Untuk memulai, Anda harus mengedit file functions.php situs web Anda. Untuk melakukan ini, Anda bisa pergi ke Appearance > Edit Themes di dashboard Anda, dan pilih file functions.php :

Alternatifnya, Anda dapat mengakses file situs Anda menggunakan aplikasi File Transfer Protocol (FTP) seperti FileZilla.

Apa pun itu, sebaiknya buat tema anak atau beralih ke lingkungan pengembangan sebelum melakukan pekerjaan besar apa pun di situs web Anda. Ini akan membuat situs aktif Anda aman dari bahaya saat Anda membuat perubahan.

Langkah 2: Tambahkan Cuplikan Kode

Selanjutnya, Anda harus menambahkan potongan kode berikut ke file functions.php Anda:

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

Setelah itu, Anda dapat mengunggah gambar SVG ke Media Library Anda. Di sana, Anda dapat melihat dan berinteraksi dengan mereka seperti jenis file gambar lainnya.

Langkah 3: Akses Aman dan Batasi Izin Pengunggahan SVG

Seperti yang kami sebutkan sebelumnya, mengaktifkan file SVG melibatkan risiko tertentu. Agar situs Anda tetap aman, Anda dapat menyetel izin unggah untuk SVG dengan membuat peran pengguna khusus. Anda dapat menggunakan plugin seperti Editor Peran Pengguna atau Editor Peran Pengguna WPFront untuk melakukannya.

Plugin ini memungkinkan Anda menyesuaikan tingkat akses dan izin untuk peran pengguna yang ada. Dengan kata lain, mereka akan mengizinkan Anda menentukan pengguna mana yang memiliki izin untuk mengunggah SVG. Ini akan membantu Anda mengawasi keamanan file-file itu.

Tetap Aman Dengan Mesin WP

Secara alami, WordPress tidak mengaktifkan penggunaan file SVG. Sangat disayangkan, karena file ini cenderung menjadi pilihan terbaik untuk menampilkan logo dan grafik lainnya. Kabar baiknya adalah dengan bantuan beberapa sumber daya pengembang favorit kami, Anda akan dapat mengaktifkan dan mengamankan penggunaan file SVG di situs Anda.

Plus, perlu diingat bahwa pada paket hosting WordPress kami, Anda akan mendapatkan akses ke dukungan profesional dan solusi keamanan situs web yang dikembangkan dengan baik. Amankan situs Anda bersama kami hari ini!