Cara Upload SVG ke WordPress Dengan Aman dan Mudah

SVG adalah salah satu format gambar yang paling sering digunakan oleh programmer, mahasiswa IT, serta web developer modern. Format ini fleksibel, ringan, tidak pecah saat di-zoom, dan sangat ideal untuk kebutuhan UI seperti ikon, ilustrasi, dan animasi web. Namun, WordPress sebagai CMS populer secara default memblokir upload SVG untuk alasan keamanan. Kondisi ini sering membuat pengguna pemula bingung ketika mencoba upload file SVG tetapi muncul pesan error.

Oleh karena itu, pada artikel ini kita akan membahas cara upload SVG ke WordPress secara aman, baik menggunakan plugin maupun secara manual. Setiap langkah dijelaskan dengan detail, teknis, dan mudah dipahami, sehingga cocok untuk pelajar, mahasiswa IT, hingga developer yang ingin mengintegrasikan SVG ke proyek WordPress mereka.

Apa Itu SVG?

SVG atau Scalable Vector Graphics adalah format gambar berbasis vector yang menggunakan markup XML untuk menggambarkan bentuk seperti garis, kurva, dan warna. Berbeda dengan gambar raster seperti PNG atau JPG, SVG bisa diperbesar tanpa kehilangan kualitas. Artinya, ilustrasi, logo, atau ikon dalam format SVG akan tetap tajam meskipun ditampilkan di layar resolusi tinggi seperti retina display atau monitor 4K. Format ini sangat populer dalam pengembangan web modern karena ukurannya kecil, bisa dikustomisasi dengan CSS, dan dapat dianimasikan menggunakan JavaScript.

SVG juga memiliki struktur yang mudah dibaca oleh manusia, karena isinya hanya berupa tag XML. Misalnya, kamu bisa membuat bentuk lingkaran, mengubah warna, atau memodifikasi ukuran hanya dengan mengedit beberapa baris kode. Hal ini membuat SVG sangat ramah bagi programmer yang terbiasa bekerja dengan kode. Namun, struktur berbasis XML ini juga yang membuat SVG bisa berpotensi membawa script berbahaya jika file tersebut dibuat atau dimodifikasi oleh orang tidak bertanggung jawab. Inilah alasan WordPress memblokirnya secara default. Meski begitu, dengan sanitasi yang tepat, SVG tetap aman digunakan.

Kelebihan SVG untuk Website

Berikut beberapa kelebihan utama SVG yang perlu kamu pahami sebelum mulai menggunakannya di WordPress:

1. Skalabilitas Tanpa Kehilangan Kualitas

Salah satu kekuatan terbesar SVG adalah sifatnya yang scalable. Artinya, gambar SVG bisa diperbesar sekecil atau sebesar apa pun tanpa terlihat pecah. Hal ini karena SVG tidak menggunakan pixel seperti PNG atau JPEG, tetapi menggunakan matematika vector untuk membentuk garis dan bentuk. Bagi kamu yang mengembangkan UI responsif, keunggulan ini sangat membantu karena tampilan ikon tetap tajam di berbagai resolusi, termasuk layar HD, retina display, hingga layar ultra-wide.

2. Ukuran File Sangat Kecil

SVG biasanya memiliki ukuran file jauh lebih kecil dibandingkan PNG atau JPG, terutama untuk ikon, logo, maupun ilustrasi sederhana. Ukuran yang kecil ini membuat website lebih ringan dan cepat. Kecepatan website merupakan faktor penting untuk SEO dan pengalaman pengguna. Dibandingkan ikon PNG 500 kb, SVG hanya beberapa kb saja. Keuntungan ini sangat cocok bagi kamu yang menggunakan WordPress dengan banyak elemen visual.

3. Mudah Dikustomisasi Menggunakan CSS

Karena SVG terdiri dari markup XML, setiap elemen di dalamnya bisa kamu manipulasi menggunakan CSS. Misalnya, kamu bisa mengganti warna ikon saat hover, mengubah ukuran secara dinamis, atau bahkan membuat efek transisi tanpa harus mengedit file gambar. Hal ini membuka banyak kemungkinan kreatif dalam desain antarmuka. Programmer front-end sering memanfaatkan kemampuan ini karena memberikan fleksibilitas yang sulit dicapai dengan format raster.

4. Mendukung Animasi yang Kompleks

SVG dapat dianimasikan menggunakan CSS maupun JavaScript. Hal ini menjadikannya pilihan ideal untuk membuat animasi ringan seperti loading icon, ilustrasi bergerak, hingga diagram interaktif. Keunggulan ini sangat bermanfaat untuk mahasiswa IT yang sedang mengerjakan tugas web development atau proyek UI modern.

Kekurangan SVG untuk Website

Meskipun SVG punya banyak keunggulan, format ini juga memiliki beberapa kelemahan yang perlu kamu pertimbangkan sebelum digunakan di WordPress.

1. Risiko Keamanan Jika Tidak Disanitasi

SVG berupa kode XML, sehingga sangat mungkin disisipi JavaScript berbahaya, seperti XSS (Cross-Site Scripting). Jika kamu asal upload SVG dari sumber yang tidak terpercaya, file tersebut bisa membawa payload berbahaya yang mengancam keamanan website. Inilah sebabnya WordPress memblokir SVG secara default. Namun tenang, masalah ini dapat diatasi dengan sanitasi file terlebih dahulu.

2. Tidak Cocok untuk Foto

SVG tidak ideal untuk gambar kompleks seperti foto atau tekstur. Format ini lebih cocok untuk bentuk sederhana seperti ikon atau ilustrasi. Jika kamu menggunakan SVG untuk foto, file malah bisa menjadi sangat besar dan membebani website. Karena itu, gunakan SVG hanya pada elemen vector.

3. Butuh Pengetahuan Teknis untuk Modifikasi

Berbeda dari JPG atau PNG yang bisa kamu edit dengan aplikasi desain sederhana, SVG memerlukan kemampuan membaca kode XML untuk modifikasi lanjutan. Untuk programmer mungkin ini mudah, tapi untuk pengguna non-teknis, bisa jadi cukup membingungkan. Namun, buat kamu yang berasal dari dunia IT, belajar memahami struktur SVG justru bisa menambah skill.

Kenapa WordPress Tidak Mengizinkan SVG Secara Default

WordPress secara default memblokir upload SVG, dan ini bukan tanpa alasan. SVG memang fleksibel, powerful, dan sangat ramah untuk web modern, tetapi justru karena sifatnya yang berbasis XML, format ini membawa risiko keamanan yang jauh lebih tinggi dibanding gambar biasa seperti PNG atau JPG. Ketika kamu mengunggah file SVG tanpa proses sanitasi, file tersebut bisa saja berisi script berbahaya seperti JavaScript tersembunyi, payload XSS, atau manipulasi DOM yang dapat mencuri data pengguna maupun mengubah tampilan website kamu tanpa terdeteksi. Bagi website berbasis WordPress yang banyak digunakan oleh pemula, risiko ini cukup besar karena banyak pengguna hanya “upload dan pakai” tanpa memeriksa isi file.

WordPress sebagai CMS yang digunakan lebih dari 40% website di dunia harus menjaga keamanan pengguna. Dengan memblokir SVG secara default, WordPress mencegah potensi serangan yang memanfaatkan celah ini. Format lain seperti PNG atau JPG tidak bisa menjalankan script, sehingga aman digunakan tanpa perlu sanitasi. Inilah kondisi yang membuat WordPress memutuskan bahwa kemampuan upload SVG hanya boleh dilakukan oleh pengguna yang sadar risiko dan tahu cara mengamankannya.

Namun, kabar baiknya adalah kamu tetap bisa memakai SVG secara aman di WordPress dengan melakukan sanitasi atau menggunakan plugin yang sudah memiliki fitur pembersihan otomatis. Dengan cara ini, kamu bisa menikmati fleksibilitas SVG tanpa mengorbankan keamanan website.

Cara Upload SVG ke WordPress Menggunakan Plugin

Cara paling mudah dan aman untuk mengaktifkan upload SVG di WordPress adalah dengan menggunakan plugin. Plugin seperti Safe SVG atau SVG Support sudah dilengkapi fitur sanitasi otomatis, sehingga setiap SVG yang kamu unggah akan dibersihkan dari script berbahaya sebelum disimpan ke media library. Berikut langkah-langkah yang bisa kamu ikuti:

1. Install Plugin Safe SVG

Masuk ke dashboard WordPress > Plugins > Add New, kemudian ketik “Safe SVG”. Plugin ini ringan, gratis, dan terkenal memiliki sistem sanitasi yang aman. Setelah muncul, klik Install Now lalu Activate.

2. Aktifkan Fitur Upload SVG

Setelah plugin aktif, kamu tidak perlu melakukan pengaturan tambahan. Safe SVG langsung membuka akses upload untuk semua file SVG di media library. Plugin juga otomatis melakukan sanitasi setiap kali kamu mengunggah file baru.

3. Unggah File SVG ke Media Library

Masuk ke Media > Add New lalu pilih file SVG yang ingin kamu unggah. Jika file sudah dibersihkan oleh plugin, SVG akan muncul sebagai preview sesuai bentuk aslinya.

4. Gunakan SVG pada Post, Page, atau Template

SVG yang sudah diunggah bisa langsung kamu gunakan di dalam editor Gutenberg, Elementor, atau builder lainnya. Kamu bisa menampilkan ikon, ilustrasi, atau logo sesuai kebutuhan.

Menggunakan plugin adalah solusi paling ideal jika kamu ingin keamanan tambahan tanpa repot melakukan sanitasi manual. Untuk kamu yang masih belajar atau sedang mengerjakan proyek cepat, cara ini aman dan efisien.

Cara Upload SVG Tanpa Plugin

Jika kamu lebih suka pendekatan teknis tanpa bergantung pada plugin, kamu bisa membuka akses upload SVG secara manual melalui file functions.php pada theme atau child theme. Metode ini lebih cocok untuk programmer atau mahasiswa IT yang ingin memahami mekanisme dasar WordPress dan bagaimana sistem upload bekerja di backend. Namun, perlu kamu ingat bahwa metode manual tidak memiliki sanitasi otomatis, jadi kamu tetap harus memastikan file SVG sudah aman sebelum diunggah. Berikut langkah-langkah yang bisa kamu ikuti:

1. Buka File Functions.php di Theme atau Child Theme

Masuk ke dashboard WordPress > Appearance > Theme File Editor. Pilih functions.php pada theme yang aktif. Jika kamu menggunakan child theme, lebih direkomendasikan untuk mengubah file pada child theme agar perubahan tidak hilang ketika theme di-update.

2. Tambahkan Kode Izin Upload SVG

Salin kode berikut dan tempelkan di bagian paling bawah file functions.php:

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

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

Kode ini menambahkan ‘svg’ ke daftar MIME type yang diperbolehkan oleh WordPress. Setelah kode disimpan, kamu sudah bisa mengupload file SVG langsung dari Media Library.

3. Uji Upload File SVG

Masuk ke Media > Add New, kemudian unggah file SVG. Jika tidak ada pesan error, berarti konfigurasi berhasil. Kamu bisa langsung menyisipkannya ke dalam post atau page seperti file gambar biasa.

4. Perhatikan Risiko Keamanan

Karena metode manual ini tidak memiliki sistem sanitasi, kamu harus memastikan file SVG bebas dari script mencurigakan. Gunakan SVG dari sumber terpercaya atau lakukan sanitasi manual sebelum upload.

Metode manual sangat ideal jika kamu ingin hasil yang ringan tanpa plugin tambahan dan ingin kontrol penuh terhadap sistem WordPress. Namun, tetap perhatikan aspek keamanan saat menggunakannya.

Perbandingan: Menggunakan Plugin vs Manual

Tabel berikut bisa membantu kamu menentukan pilihan berdasarkan kebutuhan dan tingkat skill teknis.

Cara Mengamankan SVG Sebelum Upload

Berikut beberapa cara mengamankan SVG sebelum upload:

1. Sanitasi Menggunakan SVG Sanitizer Online

Ada banyak tool sanitasi SVG online seperti SVGOMG, SVG-Sanitizer, hingga fitur bawaan dari plugin tertentu. Kamu cukup mengunggah file SVG lalu tool akan menghapus atribut atau script mencurigakan tanpa mengubah bentuk visual. Sanitasi ini penting jika kamu menerima SVG dari designer atau pihak eksternal.

2. Periksa Struktur SVG Secara Manual

Jika kamu terbiasa membaca XML, kamu bisa membuka file SVG menggunakan teks editor seperti VSCode. Pastikan tidak ada tag mencurigakan seperti <script>, onload=, onmouseover=, atau event handler lainnya. Proses ini mungkin memakan waktu, tetapi sangat efektif untuk memahami isi file secara mendalam.

3. Gunakan Plugin Safe SVG (Jika Tidak Ingin Manual)

Plugin seperti Safe SVG menyediakan sanitasi otomatis setiap kali kamu mengunggah file. Ini solusi terbaik jika kamu sering menggunakan SVG tetapi tidak mau repot melakukan sanitasi manual.

4. Simpan File SVG dari Sumber Terpercaya

Hindari mengunduh SVG dari situs tidak jelas. Gunakan sumber terpercaya seperti Figma, Illustrator, atau library resmi open-source. File SVG dari sumber tidak dikenal sering kali mengandung payload tersembunyi.

Cara Mengoptimasi SVG untuk Performa Website

Optimasi SVG membantu menurunkan ukuran file agar website memuat lebih cepat hingga sangat berpengaruh terhadap SEO, terutama jika kamu menggunakan plugin seperti Rank Math.

1. Menghapus Metadata yang Tidak Dibutuhkan

SVG hasil export dari Adobe Illustrator atau Figma sering mengandung banyak metadata seperti comment, layer info, dan ID yang sebenarnya tidak diperlukan. Kamu bisa menghapusnya menggunakan tools seperti SVGOMG atau plugin optimizer di build tools.

2. Menghapus Atribut yang Berulang

Atribut seperti fill, stroke, atau opacity sering muncul berulang di berbagai node. Optimasi bisa menggabungkan atribut menjadi CSS inline sehingga ukuran file lebih kecil tanpa mengubah tampilan visual.

3. Menggabungkan Bentuk yang Sejenis

Kadang SVG berisi banyak node yang bisa digabung menggunakan tools “Optimize Path”. Hasilnya adalah path yang lebih sederhana dan file lebih ringan. Tips ini cocok bagi kamu yang membuat animasi berbasis SVG.

4. Gunakan SVG Sprites untuk Banyak Ikon

Jika website menggunakan banyak ikon, kamu bisa menggabungkannya menjadi satu file SVG Sprite. Cara ini mengurangi permintaan HTTP dan mempercepat loading, terutama untuk website dengan traffic tinggi.

Dengan optimasi yang benar, SVG tidak hanya aman tetapi juga sangat efektif meningkatkan performa website WordPress kamu.

Cara Menggunakan SVG di Gutenberg Editor

Berikut langkah lengkap menggunakan SVG di Gutenberg:

1. Upload SVG ke Media Library

Setelah akses upload SVG aktif, buka Media > Add New dan unggah file SVG kamu. Pastikan file sudah tampil dalam bentuk preview, bukan sebagai ikon dokumen. Jika preview muncul, itu tanda bahwa WordPress sudah mengenali SVG dengan benar.

2. Masukkan SVG ke Dalam Post atau Page

Buka Gutenberg Editor dan pilih blok Image atau Media & Text. Pada halaman upload, klik “Media Library” lalu pilih SVG yang ingin kamu gunakan. Gutenberg akan menampilkan SVG layaknya gambar biasa, sehingga mudah untuk dilihat dan diedit.

3. Sesuaikan Ukuran pada Sidebar Editor

SVG tidak bekerja seperti PNG atau JPG yang punya resolusi tetap. Karena itu, ketika kamu mengubah ukuran di Gutenberg, hasilnya tetap terlihat tajam. Kamu bisa menyesuaikan ukuran menggunakan panel “Image Size” atau menulis angka secara manual untuk menghasilkan proporsi yang tepat.

4. Tambahkan CSS Tambahan Jika Dibutuhkan

Karena SVG berbasis vector, kamu bisa memberikan class tambahan pada blok gambar kemudian mengubah warnanya melalui CSS Theme Customizer. Misalnya untuk mengganti warna ikon saat hover. Ini memberi kamu level kontrol yang jauh lebih fleksibel dibanding format gambar lain.

Cara Menggunakan SVG di Elementor

Berikut langkah-langkah yang bisa kamu ikuti:

1. Buka Elementor Editor dan Tambahkan Widget Image

Drag widget Image ke area canvas. Elementor menyediakan banyak pilihan pengaturan untuk gambar, termasuk SVG.

2. Upload SVG atau Pilih dari Media Library

Klik pada area gambar, lalu pilih Media Library. Pilih SVG yang sebelumnya kamu unggah. Setelah dipilih, Elementor akan menampilkan SVG secara penuh tanpa kehilangan kualitas.

3. Atur Ukuran dan Alignment

Kamu bisa mengatur ukuran SVG menggunakan slider, angka manual, atau pengaturan responsif untuk tablet dan mobile. Karena SVG scalable, kamu bisa memperbesarnya tanpa kehilangan ketajaman visual.

4. Tambahkan Efek Hover atau Animasi

Elementor memungkinkan kamu menambahkan efek seperti grow, shrink, rotate, atau opacity transition ke SVG. Efek ini sangat ringan karena SVG tidak terdiri dari pixel.

5. Tambahkan CSS Custom (Opsional)

Jika kamu ingin membuat style lebih spesifik, Elementor Pro menyediakan tab Custom CSS. Kamu bisa memanipulasi fill, stroke, bahkan path tertentu dalam SVG.

Cara Mengintegrasikan SVG ke Theme WordPress

Mengintegrasikan SVG langsung ke theme memberikan fleksibilitas lebih besar bagi kamu yang ingin menaruh ikon pada header, footer, menu, atau elemen UI lainnya. Integrasi ini bisa dilakukan melalui HTML, CSS, atau PHP tergantung struktur theme.

1. Menyisipkan SVG Langsung dalam HTML Theme

Jika kamu membuka file header.php atau footer.php, kamu bisa langsung mem-paste kode SVG (inline SVG) ke dalam markup HTML. Keuntungan cara ini adalah SVG bisa dikustomisasi dengan CSS secara penuh.

2. Menggunakan SVG sebagai File Terpisah

Jika kamu tidak ingin menyisipkan SVG secara inline, kamu bisa memanggilnya menggunakan tag <img src="...">. Cara ini lebih sederhana, tetapi kontrol styling lebih terbatas.

3. Menaruh SVG sebagai Background CSS

Jika ingin menggunakan SVG sebagai background, kamu bisa menambahkannya lewat CSS:

background-image: url('path-to-file.svg');

background-image: url('path-to-file.svg');

4. Integrasi dengan PHP dan WordPress Hooks

Jika theme kamu mendukung hooks, kamu bisa memasukkan SVG sebagai bagian dari action tertentu, misalnya untuk menambahkan ikon ke menu melalui filter nav menu.

Masalah Umum Saat Upload SVG & Solusinya

1. Tidak Bisa Upload SVG (MIME Type Error)

Ini adalah error paling sering terjadi. WordPress menolak upload SVG dengan pesan seperti “Sorry, this file type is not permitted”.
Penyebab: WordPress memblokir SVG secara default.
Solusi:

• Install plugin Safe SVG atau SVG Support, atau
• Tambahkan kode izin MIME type pada functions.php.

2. SVG Tidak Tampil di Media Library (Preview Blank)

Beberapa pengguna melaporkan SVG hanya muncul sebagai ikon dokumen, bukan preview bentuk aslinya.
Penyebab: SVG tidak dikenali dengan benar oleh WordPress atau plugin sanitasi menonaktifkan preview.
Solusi:

• Pastikan menggunakan plugin Safe SVG, karena plugin tersebut mendukung preview.
• Jika manual, tambahkan filter tambahan untuk preview SVG.

3. SVG Terlihat Rusak atau Terpotong Saat Ditampilkan

Kadang SVG terlihat tidak lengkap atau posisinya tidak pas ketika ditampilkan di Gutenberg atau Elementor.
Penyebab: SVG memiliki atribut width, height, atau viewbox yang tidak proporsional.
Solusi:

• Periksa file SVG di editor XML.
• Sesuaikan atribut viewBox, karena atribut ini mengontrol proporsi keseluruhan.

4. SVG Tidak Bisa Diubah Warnanya dengan CSS

Ini masalah umum ketika kamu mencoba mewarnai ulang ikon.
Penyebab: SVG menggunakan atribut fill atau stroke yang hardcoded pada setiap path.
Solusi:

• Hapus atribut fill pada SVG dan gunakan CSS seperti:

.svg-icon path {
    fill: #000;
}

.svg-icon path {
    fill: #000;
}

5. SVG Lambat Dimuat atau Berat

Meskipun biasanya ringan, SVG hasil export aplikasi desain kadang terlalu kompleks.
Penyebab: Banyak metadata, path berlebihan, atau efek yang tidak diperlukan.
Solusi:

• Optimasi dengan SVGOMG.
• Gabungkan path serupa.
• Pastikan file tidak mengandung data raster.

Masalah-masalah ini umum terjadi, tetapi semuanya bisa diselesaikan dengan mudah jika kamu memahami struktur SVG dan cara kerja WordPress.

Kesimpulan

Pada pemabahasan kita di atas dapat kita simpulkan bahwa SVG adalah format yang sangat powerful dan fleksibel untuk kebutuhan website modern, terutama bagi kamu yang berkecimpung di dunia IT, programming, atau desain antarmuka. WordPress yang secara default memblokir SVG bukan berarti format ini tidak aman, tetapi karena memerlukan sanitasi yang tepat agar tidak menjadi celah keamanan. Namun, dengan teknik yang benar baik menggunakan plugin seperti Safe SVG atau mengaktifkannya secara manual melalui functions.php kamu bisa mengunggah, menampilkan, dan mengoptimasi file SVG dengan aman.

Dalam artikel ini, kamu sudah mempelajari seluruh aspek penting terkait penggunaan SVG: mulai dari definisi, kelebihan dan kekurangan, alasan WordPress memblokir SVG, cara upload menggunakan plugin atau fungsi manual, hingga cara mengamankan dan mengoptimasi SVG. Selain itu, kamu juga belajar bagaimana menggunakan SVG di Gutenberg, Elementor, serta bagaimana menerapkannya langsung ke theme melalui HTML, CSS, dan PHP.

Artikel ini merupakan bagian seri artikel WordPress dari KantinIT.com dan jika ada ide topik yang mau kami bahas silahkan komen di bawah ya..