Blog

Tips Aman Mengunggah File SVG (Scalable Vector Graphics) ke WordPress

SVG telah menjadi salah satu ekstensi grafik berbasis vektor yang paling populer dan banyak digunakan untuk tujuan desain UI web dalam beberapa tahun terakhir. SVG sendiri merupakan gambar yang dibentuk oleh kombinasi titik dan garis berdasarkan perhitungan matematis, berbeda dengan grafik raster atau bitmap yang dibentuk dari susunan piksel. Namun, demi alasan keamanan, WordPress tidak mengizinkan pengguna mengunggah file jenis ini. Akan tetapi, masih ada cara untuk hal tersebut.

Apa itu SVG ?

SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format gambar vektor berbasis teks XML. Gambar yang Anda lihat atau unduh di Internet biasanya dalam format JPG atau PNG. Kedua format tersebut terdiri dari “kotak” kecil yang disebut piksel. Sebaliknya, gambar dalam format SVG mengandalkan markup XML yang digunakan untuk menggambar bentuk, garis, dan atribut gambar lainnya.

Perlu Anda ketahui bahwa SVG telah ada sejak tahun 90an. Namun SVG mungkin baru dikenal beberapa tahun saja. Ada alasan Anda perlu menggunakan SVG. Salah satu keunggulan SVG adalah format gambar ini didukung oleh berbagai platform. Anda bisa melihat sendiri bahwa browser populer seperti Google Chrome, Safari, Firefox, dan Chrome untuk Android sudah menggunakan SVG. Namun, jika Anda menggunakan IE8 (Internet Explorer) atau versi Chrome dan Safari yang belum diperbarui, Anda mungkin mengalami masalah. Pasalnya ketiga browser tersebut belum mendukung gambar dalam format SVG. Oleh karena itu, sebaiknya gunakan browser Anda versi terbaru.

Mengapa Perlu Menggunakan SVG?

Tidak bisa dipungkiri masih banyak orang yang masih asing dengan file SVG. Ini karena file-file ini tidak dibuat dengan cara yang sama seperti grafik berbasis piksel. Namun, bukan berarti Anda tidak menggunakannya. File ini memiliki banyak manfaat untuk website Anda. Salah satu alasan Anda harus menggunakan SVG adalah skalabilitas. SVG adalah file berbasis vektor, sehingga kualitas gambar yang ditampilkan tetap sama pada resolusi layar yang berbeda. Sebaliknya, gambar dalam format JPG bisa menjadi kurang tajam atau buram jika dilihat di perangkat tertentu. Hal ini dikarenakan ukuran filenya tidak terlalu besar. SVG dapat diedit dengan dengan mudah hanya dengan cara mengubah teks di dalamnya menggunakan aplikasi text editor apapun (termasuk Notepad) tanpa memerlukan aplikasi editor grafis.

Sebaliknya, gambar SVG memiliki kualitas yang sama di perangkat apa pun. Anda juga dapat memperbesar, memperkecil, dan memperkecil ukuran gambar tanpa khawatir akan penurunan kualitas. Manfaat ini jelas terlihat jika Anda ingin membangun situs web yang berfokus pada penyediaan pengalaman pengguna yang luar biasa. SVG menjadi semakin populer karena ukurannya yang kecil. Ini berarti Anda tidak akan kehabisan ruang penyimpanan di situs web Anda dengan cepat. Selain itu, ukuran file yang lebih kecil membuat website Anda memuat lebih cepat.

Pengunjung website Anda pasti akan puas karena tidak perlu menunggu lama untuk proses loading. Namun file SVG juga memiliki kekurangan. Jika Anda membuat gambar detail lalu mengonversinya ke format SVG, ukurannya akan lebih besar dari JPG atau PNG. Hal ini karena ukuran file SVG bergantung pada kompleksitas gambar. Semakin detail gambarnya, maka akan semakin besar. Dengan kata lain, format SVG tidak cocok untuk ikon dan logo. Untuk membuat SVG sebenarnya Anda dapat hanya dengan menggunakan text editor seperti Notepad, akan tetapi Anda juga dapat menggunakan software desain grafis berbasis vektor seperti Adobe Ilustrator dan Corel Draw.

Penggunaan SVG

Ilustrasi dan Diagram
Menggunakan SVG adalah salah satu cara terbaik untuk membuat ilustrasi dan diagram. Menambahkan CSS atau Javascript ke grafik yang dibuat dengan SVG menjadikannya lebih interaktif.
Logo dan Ikon
SVG sangat ideal untuk membuat gambar yang tajam dan tajam, seperti logo dan ikon, karena skalabilitasnya. Logo Identips dan semua ikon juga dibuat di SVG.
Animasi
Anda dapat membuat Animasi SVG dengan memanfaatkan CSS, Javascript dan SMIL
Desain Interaktif
Kemampuan SVG untuk merepresentasikan data dan memperbaruinya secara dinamis berdasarkan tindakan pengguna atau peristiwa tertentu menjadikannya ideal untuk membuat desain interaktif.
Special Effect
SVG juga dapat digunakan untuk membuat efek khusus seperti shape morphing atau Gooey Effect
Membangun Interface Aplikasi
SVG dapat digunakan untuk membangun interface aplikasi web yang canggih dan dapat diintegrasikan langsung dengan HTML5.

Cara Mengunggah File SVG ke WordPress dengan Aman

Saat ini, Anda harus menggunakan plugin untuk mengunggah file SVG ke WordPress. Berikut ini adalah dua plugin yang perlu Anda instal untuk mengunggah file SVG.

1. Mengunggah FIle SVG dengan Plugin SVG Support

Yang pertama anda dapat menggunakan plugin SVG support, Cukup install plugin SVG Support. Kemudian aktivasi plugin tersebut. Setelah aktivasi, pergi ke halaman Settings » SVG Support untuk mengonfigurasi pengaturan plugin. Centang opsi Restrict to Administrators ? Pada halaman pengaturan. Ini akan mengijinkan administrator situs untuk mengunggah file SVG di WordPress. Setelah di aktifkan Klik Save Changes. Berikutnya anda dapat mengupload FIle SVG ke dalam wordpress anda.

2. Mengunggah FIle SVG dengan Plugin Safe SVG

Cara ini juga menggunakan plugin untuk mengunggah file SVG ke WordPress. Prosesnya sama persis, cukup instal plugin Safe SVG dan ingat untuk mengaktifkannya. Plugin ini tidak memiliki konfigurasi tambahan, sehingga Anda dapat langsung memasukkan file SVG ke WordPress setelah mengaktifkan plugin. Setelah plugin ini aktif maka semua user yang ada pada wordpress anda sudah bisa mengupload file SVG tanpa ijin Admin.

Tips Aman Upload SVG ke WordPress

Menggunakan gambar SVG dapat membuat situs web Anda terkena masalah keamanan, namun ada beberapa cara untuk memperbaiki masalah tersebut.

Membersihkan SVG dengan tool

Tool online yang dapat Anda gunakan untuk “membersihkan” file SVG Anda adalah SVG Sanitizer. Untuk menggunakan alat sederhana ini, cukup salin kode dari file XML Anda ke kolom yang ditentukan di bagian atas halaman. Kemudian klik saja tombol “Sanitize”. Kode untuk file XML yang “dibersihkan” ditampilkan di kolom bawah.

Batasi wewenang pengaturan SVG

SVG adalah file berisi kode yang mudah dimanipulasi. Untuk mencegah seseorang memasukkan skrip berbahaya, Anda dapat membatasi kemampuan mengunggah file jenis ini.

Menggunakan plugin yang aman

Ada juga beberapa plugin yang mengaktifkan dukungan SVG. Namun jangan terburu-buru menggunakannya. Dalam kebanyakan kasus, Anda hanya perlu mengubah pengaturan jenis MIME untuk memungkinkan pengguna mengunggah file SVG. Cara ini tidak disarankan.

VG merupakan jenis file gambar dengan banyak keunggulan. Salah satunya adalah ukuran file yang lebih kecil sehingga membuat website Anda bisa dimuat lebih cepat. Sayangnya, WordPress SVG rentan terhadap masalah keamanan dan tidak dapat diunggah. Namun, Anda dapat menghindari masalah ini dengan mengaktifkan dukungan SVG di WordPress.