SVG (Scalable Vector Graphics) merupakan format gambar berbasis XML yang sangat ringan dan fleksibel digunakan pada berbagai keperluan desain web. Salah satu CMS terpopuler, WordPress, tidak secara bawaan mengizinkan upload file SVG karena alasan keamanan.
Namun, bagi pengguna Elementor, format ini sangat penting untuk mempertahankan kualitas grafis tanpa kehilangan kejernihan visual, terutama pada desain responsif.
Dalam artikel ini, kami akan membahas secara lengkap, teknis, dan aman mengenai cara mengaktifkan izin upload file SVG di Elementor, serta berbagai tips dan praktik terbaik untuk memastikan situs Anda tetap aman dan optimal.
Mengapa WordPress Melarang Upload SVG Secara Default?
WordPress tidak mengizinkan SVG secara bawaan karena file SVG dapat menyimpan kode JavaScript yang berpotensi digunakan untuk melakukan serangan XSS (Cross-site Scripting).
Oleh karena itu, sangat penting untuk memahami cara mengizinkan SVG dengan aman, bukan sekadar mengaktifkan izinnya. Selain wordpress, nyatanya elementor juga tidak mengizinkan secara laangsung untuk dukungan mengunggah file SVG.
Anda perlu mengaktifkan izin upload SVG terlebih dahulu di elementor jika ingin mengunggah file SVG. Bagaimana caranya? simak terus penjelasannya berikut ini ya.
Keuntungan Menggunakan SVG di Elementor
Ada beberapa keuntungan yanag diperoleh jika menggunakan format gambar XML dibandingkan dengan format gambar lain seperti PNG dan JPEG.
- Menggunakan SVG memiliki banyak keuntungan, antara lain:
- Resolusi tak terbatas – Cocok untuk logo dan ikon karena tidak pecah saat diperbesar.
- Ukuran file kecil – Lebih cepat dimuat dibanding PNG atau JPG.
- Dapat dianimasikan – SVG memungkinkan efek visual menarik langsung dengan CSS dan JavaScript.
- Kompatibilitas desain fleksibel – Terintegrasi sempurna dengan fitur Elementor Pro, termasuk widget ikon, lottie, dan lainnya.
Cara Aman Mengaktifkan Upload SVG di Elementor
Ada beberapa cara untuk mengaktifkan izin atau dukungan upload SVG di elementor, yaitu menggunakan plugin atau mengaktifkan pengaturan izin upload svg.
1. Menggunakan Plugin Khusus untuk SVG
Metode paling aman dan praktis adalah menggunakan plugin pihak ketiga. Berikut adalah rekomendasi plugin terbaik:
a. Safe SVG
Plugin ini sangat populer dan aman karena menyertakan fitur sanitasi file SVG secara otomatis.
Langkah-langkah:
- Masuk ke Dashboard WordPress Anda.
- Buka menu Plugins > Add New.
- Cari “Safe SVG”.
- Klik Install Now, lalu Activate.
- Setelah aktif, Anda bisa langsung mengupload file SVG ke media library.
Keunggulan:
- Otomatis menyaring elemen berbahaya dalam file SVG.
- Tidak memerlukan konfigurasi tambahan.
- Kompatibel dengan Elementor sepenuhnya.
b. SVG Support
Plugin lain yang juga mendukung inline rendering SVG, namun perlu konfigurasi tambahan.
Langkah-langkah:
- Install dan aktifkan plugin SVG Support.
- Masuk ke menu Settings > SVG Support.
- Aktifkan opsi “Enable Advanced Mode”.
- Centang “Force Inline SVG” untuk kompatibilitas optimal dengan Elementor.
2. Mengaktifkan Izin Upload SVG Elementor
Elementor memiliki pengaturan bawaan untuk mengaktifkan izin upload SVG tanpa menggunakan plugin ataupun kustom kode tambahan. Bagaimana caranya? Cukup mudah kok, klik pada element icon yang digunakan lalu pilih upload SVG. Lihat gambar dibawah ini untuk keterangan lebih detailnya,
Selanjutnya ada notifikasi pesan peringatan yang muncul untuk konfirmasi izin upload svg. Pesan berisikan pesan bahwa Anda menyetujui untuk menerima dan mengetahui resiko mengunggah file apapun dapat menimbulkan resiko keamanan untuk website.
Selanjutnya, klik tombol Enable atau setujui, jika Anda menyetujui. Perlu diketahui, pesan ini hanya muncul sekali saja dan setelah itu jika ingin upload SVG kembali maka pesan tadi tidak akan muncul lagi.
Selain dari halaman editor di element ikon yang digunakan, mengaktifkan izin upload file SVG juga dapat dilakukan melalui halaman dasboard. Silahkan masuk ke halaman dashboard wordpress, pilih Elementor » Settings » Advanced.
Pada bagian Enable Unfiltered File Uploads, klik dropdownnya dan pilih Enable.
Klik tombol Save untuk menyimpan perubahan yang dilakukan.
Masalah Umum Saat Upload SVG dan Solusinya
Ini dia beberapa masalah umum yang sering terjadi bagi pengguna elementor, lakukan cara ini jika salah satunya terjadi.
1. “Sorry, this file type is not permitted for security reasons”
Solusi: Aktifkan plugin Safe SVG atau tambahkan filter mime type di functions.php.
2. SVG Tidak Tampil di Frontend Elementor
Solusi:
- Pastikan inline rendering aktif jika menggunakan plugin SVG Support.
- Periksa apakah file SVG Anda memiliki viewBox.
3. SVG Tidak Terlihat di Editor Elementor
Solusi:
- Clear cache Elementor dan browser.
- Regenerasi file CSS Elementor dari menu Elementor > Tools.
Kesimpulan
Mengaktifkan izin upload SVG di Elementor sangat bermanfaat untuk mendukung tampilan visual modern dan profesional. Namun, keamanan tetap menjadi prioritas utama. Kami menyarankan menggunakan plugin Safe SVG sebagai solusi paling aman dan mudah, terutama untuk pengguna pemula.
Dengan memahami dan menerapkan panduan mengaktifkan izin upload svg Elementor, Anda dapat mengoptimalkan situs WordPress + Elementor Anda secara maksimal, baik dari sisi desain maupun performa.
