Terdapat 2 cara yang dapat dipakai untuk mengatasi gagal upload file SVG di WordPress. SVG file adalah format gambar berbasis XML (Extensible Markup Language) yang menjadi favorit para desainer dan pengembang website. Gambar ini merupakan komponen yang sangat penting untuk mendukung desain website yang menarik dan responsif.
Namun, terkadang gambar SVG sulit atau gagal diupload di website. Nah, berikut ini ulasan lengkap seputar SVG, cara upload, dan cara mengatasi file yang gagal upload di WordPress.
Apa Itu File SVG?
SVG atau Scalable Vector Graphics adalah format gambar atau file grafis berbasis XML. SVG file memungkinkan gambar yang scalable (bisa diperbesar atau diperkecil) pada resolusi yang diinginkan tanpa kehilangan kualitas.
Bagi orang awam jenis gambar ini mungkin masih terdengar asing dibandingkan format lain seperti JPG dan PNG. Padahal, gambar SVG sudah ada sejak tahun 1990an. Penggunaan file SVG baru mulai populer pada tahun 2019, meski jumlahnya masih sedikit sekitar 16,7% website saja yang menggunakan format gambar ini.
Web browser major seperti Google Chrome, Firefox, Microsoft Edge, dan Safari mendukung tampilan gambar SVG. Dengan dukungan web browser yang semakin banyak, membuat penggunaan SVG ini kian populer dalam beberapa tahun belakang Apabila file ini bermasalah, kemungkinan web browser yang digunakan belum diupdate.
Kelebihan SVG?
File gambar SVG ini memang masih belum terlalu familiar bagi banyak orang. Namun, bukan berarti SVG file buruk atau tidak berguna. Jenis format gambar ini punya banyak kelebihan untuk digunakan pada website seperti WordPress.
1. Resolusi gambar yang lebih tinggi
Format SVG adalah gambar berbasis vektor, artinya gambar terdiri dari garis dan matematika, bukan kumpulan dari pixel seperti raster. Oleh sebab itu, SVG file memiliki resolusi yang lebih tinggi. Gambar akan terlihat tajam, bahkan di layar beresolusi tinggi sekalipun seperti Retina Display.
2. Gambar yang scalable tanpa kehilangan kualitas
Skalabilitas tanpa menurunkan kualitas adalah salah satu keunggulan format SVG. Kemampuan gambar untuk diperbesar maupun diperkecil tanpa mengorbankan kualitas gambar aslinya. Gambar yang berbasis vektor ini akan tetap tajam meskipun dibuka pada layar dengan resolusi yang berbeda.
Keunggulan ini yang menawarkan pengalaman lebih baik untuk semua pengguna. Gambar pada website akan menyesuaikan dengan berbagai resolusi layar perangkat yang digunakan.
3. Ukuran file kecil namun kualitas tajam
Alasan banyak desainer website menggunakan file SVG adalah ukuran file yang lebih kecil jika dibandingkan gambar raster. Meski ukurannya kecil, tetapi tidak perlu khawatir kualitasnya berkurang. Selain itu, kecilnya ukuran file gambar SVG tidak akan membuat penyimpanan di web cepat habis.
Ukuran file gambar yang kecil juga mendukung website untuk bisa loading lebih cepat. Seperti yang diketahui bahwa waktu muat yang lebih cepat ini merupakan salah satu bagian penting dari SEO. Hanya saja, untuk kebutuhan gambar yang lebih mendetail, ukuran file ini bisa lebih besar dari JPG atau PNG sehingga lebih cocok untuk gambar logo atau ikon pada website.
4. Fleksibel dan kompatibel di banyak perangkat
Keunggulan lainnya adalah SVG file yang lebih fleksibel dan kompatibel di berbagai perangkat. Gambar SVG yang berbasis teks dapat dengan mudah diedit, seperti menyesuaikan warna, gambar, mengatur ulang elemen, dan lain sebagainya. SVG termasuk file standar W3C sehingga dapat bekerja dengan baik di CSS, JavaScript, dan HTML.
5. SEO Friendly
Penggunaan gambar dengan format SVG memberi kesempatan untuk website bisa dimuat dengan cepat karena ukuran file yang kecil. Inilah alasan gambar SVG lebih SEO friendly.
Cara Kerja SVG
SVG file menggunakan bahasa XML (Extensible Markup Language) untuk menerjemahkan sebuah gambar berbasis vektor. Grafik vektor ini tidak menggunakan piksel, melainkan peta dua dimensi yang mendefinisikan grafik. Oleh sebab itu, saat gambar diperbesar, gambar tidak akan berpiksel atau blur seperti gambar JPG dan PNG.
Format SVG akan bekerja dengan baik untuk gambar yang tidak terlalu membutuhkan banyak detail dan warna yang terlalu dalam, seperti gambar logo dan juga icon. Gambar SVG juga dapat digunakan di website sebagai gambar map, chart, infografis, dan sejenisnya.
SVG file dapat dibuka menggunakan web browser terbaru, aplikasi teks editor, dan aplikasi desain grafis berbasis vektor. Jika ingin menyimpan file ini, bisa langsung “Save as” dan pilih format SVG.
Namun, hati-hati ketika mendownload gambar SVG terutama dari sumber yang tidak diketahui. Bagi yang sudah tahu apa itu file SVG sebenarnya, mungkin sudah paham bahwa pada dasarnya SVG merupakan file teks.
Artinya, file ini bisa saja dimasuki kode berbahaya yang berpotensi membuat situs web rentan terhadap peretasan dan crashed. Gambar SVG bisa dimasukkan informasi metadata seperti nama creator, deskripsi, dan lain sebagainya ke dalam gambar tersebut.
Cara Upload File SVG
Gambar SVG dapat diambil dari berbagai sumber untuk diupload ke website. Baik website berbasis WordPress maupun Blogger.com tidak mendukung format gambar SVG. Cara upload SVG file sebagai header blog bisa dengan cara berikut.
Upload gambar dengan format SVG juga bisa melalui Github. Login terlebih dahulu ke akun Github, lalu pilih tab “Repositories” dan klik “New”. Isi nama yang diinginkan dan klik tombol “Create Repository”.
Masuk ke Repositories yang sudah dibuat, lalu pilih “Add File” dan “Upload File”. File sudah berhasil diupload. Apabila ingin memasang gambar SVG tersebut sebagai header website, salin dulu link address dari gambar SVG, kemudian paste di Statically.io.
Selanjutnya, copy link yang muncul dari hasil convert tersebut dan masukan pada bagian header. Jangan lupa klik Simpan, dan selesai mengupload gambar SVG.
Cara Mengatasi Gagal Upload File SVG di WordPress
Seperti yang sudah dijelaskan sebelumnya bahwa SVG file belum banyak digunakan. Alasannya karena upload gambar SVG ini terkadang cukup sulit untuk dilakukan di WordPress. Risiko keamanan dari format gambar SVG membuat file ini tidak menjadi bagian dari WordPress.
Cara mengatasi gagal upload file SVG di WordPress adalah dengan plugin SVG Support dan Safe SVG. Jika sudah memasang plugin tersebut, maka bisa upload SVG seperti tutorial berikut.
1. Upload File SVG dengan Plugin SVG Support
File SVG dibuka pakai apa? Jenis format gambar ini bisa dibuka langsung melalui browser, editor teks, dan aplikasi desain grafis yang support SVG. Sedangkan untuk upload SVG dapat menggunakan plugin yang mendukung format file ini, seperti plugin SVG Support.
Setelah instal dan aktivasi plugin, masuk ke menu “Settings” dan “SVG Support”. Di halaman pengaturan, beri tanda centang pada “Restrict to Administrators?”.
Selesai konfigurasi pengaturan plugin, aktifkan dengan klik tombol “Saves Changes”. Berikutnya, sudah bisa upload gambar SVG ke dalam WordPress.
2. Upload File SVG dengan Plugin Safe SVG
Plugin Safe SVG merupakan plugin akan membersihkan (sanitize) secara otomatis SVG file yang diupload. Plugin ini akan bekerja dengan menghapus kode yang mungkin membahayakan bagi keamanan situs.
Cara upload gambar SVG dengan plugin ini tidak jauh berbeda seperti cara sebelumnya. Cukup instal Save SVG dan aktivasi. Beri izin administrator situs untuk mengupload SVG di WordPress.
Klik menu “Settings”, lalu pilih “SVG Support” untuk konfigurasi pengaturan plugin di website. Setelah masuk ke halaman pengaturan, klik kolom “Restrict to Administrators?” untuk memberikan izin administrator menggunakan plugin.
Apabila plugin Save SVG ini sudah aktif, maka gambar SVG bisa diupload. Semua pengguna yang ada pada WordPress dapat mengupload gambar SVG tanpa izin Administrator.
Mengatasi SVG Gagal Upload di WordPress?
Alasan mengapa tidak bisa upload gambar SVG ke dalam WordPress adalah situs yang tidak mengizinkan pengunggahan file tersebut karena alasan keamanan. Oleh sebab itu, cara mengatasinya adalah dengan upload SVG menggunakan plugin.
Jika administrator sudah diizinkan untuk upload SVG menggunakan plugin, seharusnya gambar ini bisa diupload di WordPress. Namun, jangan khawatir apabila menemui kegagalan upload SVG file karena cara mengatasinya cukup mudah.
Silakan masuk ke pengaturan, dan temukan file function.php yang ada di WordPress. Selanjutnya, bisa langsung copy paste kode berikut.
function cc_mime_types($mimes) { $mimes[‘SVG’] = ‘image/SVG+xml’; return $mimes; } add_filter(‘upload_mimes’, ‘cc_mime_types’);
Silakan coba kode di atas untuk mengatasi gagal upload gambar SVG di WordPress. Apabila tidak bisa diupload, maka alternatifnya adalah SVG file dikonvert menjadi JPG atau PNG dulu sebelum diupload ke WordPress.
Apakah File SVG Bisa Diedit?
Sebuah gambar dengan format SVG dapat diedit melalui beberapa software seperti text editor dan graphic editor yang support SVG. Aplikasi text editor seperti Microsoft Word, Microsoft PowerPoint, Microsoft Excel, dan Microsoft Outlook (Microsoft 365) mendukung pengeditan grafik vektor seperti SVG file.
Gambar dengan format SVG juga dapat diedit melalui software pengolah grafis yang mendukung gambar vektor. Salah satunya adalah Adobe Illustrator yang sudah cukup populer dan banyak digunakan untuk editing.
Cara membuka file SVG tentu bisa langsung melalui Illustrator ini karena sudah mendukung gambar berbasis vektor. Silakan buka aplikasi Adobe Illustrator, lalu klik “File”, pilih “Open” dan cari gambar SVG yang ingin dibuka atau diedit.
Selain Adobe Illustrator, editing untuk gambar SVG juga bisa melalui InVision atau Vigma. Software tersebut bisa jadi pilihan untuk editing SVG dengan mudah dan gratis. Setelah selesai mengedit, file bisa disimpan atau dieksport.
Apabila ingin membuka SVG file di aplikasi seperti Photoshop atau Image Viewer, maka file harus dikonvert terlebih dahulu menjadi JPG. Ingat, gambar SVG ini berbasis vektor sehingga tidak bisa dibuka di aplikasi seperti image viewer pada umumnya.
Kesimpulan
Jadi, untuk mengatasi gagal upload gambar SVG yaitu dengan menggunakan plugin khusus. Plugin seperti Save SVG dan SVG Support menjadi pilihan yang paling direkomendasikan untuk keperluan upload SVG file di website atau WordPress. Jangan lupa untuk selalu cek sumbernya terlebih dahulu untuk memastikan keamanan gambar tersebut sebelum diupload.
Selain menggunakan gambar SVG, tentu masih banyak cara yang bisa dilakukan untuk meningkatkan tampilan website agar mendukung SEO. Omnirank akan membantu menentukan strategi SEO yang tepat agar peringkat website di hasil pencairan bisa lebih baik. Nikmati penawaran daftar gratis dan berbagai layanan service Omnirank untuk kebutuhan SEO website.
0 Komentar