{"id":10026,"date":"2020-07-20T14:02:27","date_gmt":"2020-07-20T14:02:27","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=10026"},"modified":"2025-12-18T23:32:30","modified_gmt":"2025-12-18T16:32:30","slug":"cara-upload-svg-wordpress","status":"publish","type":"post","link":"\/id\/tutorial\/cara-upload-svg-wordpress\/","title":{"rendered":"Cara upload SVG ke WordPress: 2 metode aman &#038; mudah"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Apabila menangani pengelolaan dan desain web, Anda pasti sering menggunakan berbagai format file media. Nah, SVG adalah salah satu format terpopuler saat ini, yaitu file vektor berbasis XML. Sayangnya, tidak semua browser dan platform mendukung SVG sehingga Anda perlu mengaktifkan dukungannya dulu secara manual.<\/p><p class=\"wp-block-paragraph\">Tenang, di artikel ini kami akan membahas cara upload file SVG di WordPress menggunakan plugin SVG Support. Kami juga akan menjawab beberapa pertanyaan mengenai masalah keamanan format file ini dan kelebihan SVG.<\/p><p class=\"wp-block-paragraph\">Sebelum lanjut ke cara mengunggah file SVG di WordPress, mari cari tahu dulu apa itu SVG dan cara kerjanya. Yuk, scroll ke bawah!<\/p><h2 class=\"wp-block-heading\" id=\"h-apa-itu-svg\">Apa Itu SVG?<\/h2><p class=\"wp-block-paragraph\">Scalable Vector Graphics atau SVG adalah format gambar grafis vektor berbasis teks XML. Sementara format gambar umum seperti JPG dan PNG tersusun dari banyak kotak kecil yang disebut piksel, SVG menggunakan bahasa markup XML untuk mendeskripsikan atribut gambar.<\/p><p class=\"wp-block-paragraph\">Sejak Januari 2022, <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/w3techs.com\/technologies\/details\/im-svg\">42%<\/a> dari semua website di seluruh dunia sudah menggunakan SVG. Persentase ini meningkat dibandingkan dengan Januari 2021, dengan hanya <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/w3techs.com\/technologies\/history_overview\/image_format\/all\">29,4% <\/a>website yang menggunakannya.<\/p><p class=\"wp-block-paragraph\">Mirip dengan PNG dan JPG, SVG banyak digunakan di website dengan traffic tinggi seperti Google, Wikipedia, dan YouTube.<\/p><p class=\"wp-block-paragraph\">Hal keren lainnya tentang SVG adalah format ini didukung oleh hampir semua browser utama. Berikut adalah <a href=\"https:\/\/caniuse.com\/svg\" target=\"_blank\" rel=\"noreferrer noopener\">daftar browser<\/a> yang mendukung SVG:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>Browser<\/strong><\/td><td><strong>Dukungan Sebagian<\/strong><\/td><td><strong>Dukungan Penuh<\/strong><\/td><\/tr><tr><td>Edge<\/td><td>&ndash;<\/td><td>Versi 12-18, 79-96, 97<\/td><\/tr><tr><td>Firefox<\/td><td>Versi 2<\/td><td>Versi 3-94, 95, 96-97<\/td><\/tr><tr><td>Firefox Android<\/td><td>&ndash;<\/td><td>Versi 95<\/td><\/tr><tr><td>Chrome<\/td><td>&ndash;<\/td><td>Versi 4-96, 97, 98-100<\/td><\/tr><tr><td>Chrome Android<\/td><td>&ndash;<\/td><td>Versi 96<\/td><\/tr><tr><td>Safari<\/td><td>Versi 3.1<\/td><td>Versi 3.2-15.1, 15.2, TP<\/td><\/tr><tr><td>Opera<\/td><td>&ndash;<\/td><td>Versi 10-81, 82<\/td><\/tr><tr><td>Opera Mini<\/td><td>&ndash;<\/td><td>Semua versi<\/td><\/tr><tr><td>Opera Mobile<\/td><td>&ndash;<\/td><td>Versi 12-12.1, 64<\/td><\/tr><tr><td>Safari di iOS<\/td><td>&ndash;<\/td><td>Versi 3.2-15.1, 15.2<\/td><\/tr><tr><td>Browser Android<\/td><td>Versi 3-4.3<\/td><td>Versi 4.4-4.4.4, 96<\/td><\/tr><tr><td>UC Browser Android<\/td><td>&ndash;<\/td><td>Versi 12.12<\/td><\/tr><tr><td>Samsung Internet<\/td><td>&ndash;<\/td><td>Versi 4-14.0, 15.0<\/td><\/tr><tr><td>QQ Browser<\/td><td>&ndash;<\/td><td>Versi 10.4<\/td><\/tr><tr><td>Baidu Browser<\/td><td>&ndash;<\/td><td>Versi 7.12<\/td><\/tr><tr><td>KaiOS Browser<\/td><td>&ndash;<\/td><td>Versi 2.5<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-cara-kerja-svg\">Cara Kerja SVG<\/h2><p class=\"wp-block-paragraph\">SVG menggunakan XML untuk menghasilkan gambar vektor dua dimensi. Berbeda dengan JPG dan PNG, grafis vektor tidak terdiri dari piksel. Sebaliknya, perilakunya dijelaskan dalam file teks XML.<\/p><p class=\"wp-block-paragraph\">Oleh karena itu, file SVG bisa dicari, diindeks, diprogram, diedit, dan dikompresi seperti kode. Jadi, siapa pun bisa membuatnya menggunakan editor teks atau software grafis vektor.<\/p><h2 class=\"wp-block-heading\" id=\"h-apakah-wordpress-mendukung-svg\">Apakah WordPress Mendukung SVG?<\/h2><p class=\"wp-block-paragraph\">Tidak, WordPress tidak mendukung SVG secara default karena risiko keamanan yang mungkin timbul. Kami akan membahas lebih lanjut tentang masalah keamanan SVG nanti di bagian lain dalam artikel ini.<\/p><p class=\"wp-block-paragraph\">Berikut adalah pesan error yang muncul saat mengupload file SVG di WordPress:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"164\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/error-svg-wordpress.png\/public\" alt=\"error svg wordpress\" class=\"wp-image-32903\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/error-svg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/error-svg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/error-svg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/error-svg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Memang, sudah ada <a href=\"https:\/\/core.trac.wordpress.org\/ticket\/24251\" target=\"_blank\" rel=\"noreferrer noopener\">pembahasan<\/a> untuk mengintegrasikan SVG sebagai bagian dari fitur inti WordPress. Namun, untuk saat ini, user perlu mencari solusi lain guna mengupload gambar SVG ke WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-mengapa-perlu-menggunakan-svg-wordpress\">Mengapa Perlu Menggunakan SVG WordPress<\/h2><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"274\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/perbandingan-svg.png\/public\" alt=\"perbandingan svg\" class=\"wp-image-32904\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/perbandingan-svg.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/perbandingan-svg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/perbandingan-svg.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Meskipun rentan masalah keamanan, banyak user yang suka menggunakan format gambar ini karena memiliki banyak manfaat. Berikut adalah beberapa kelebihan file SVG:<\/p><ul class=\"wp-block-list\">\n<li><strong>Mudah diatur sesuai kebutuhan<\/strong> &ndash; karena SVG adalah format gambar vektor, kualitasnya akan tetap sama di semua resolusi layar, termasuk saat diubah ukurannya. Karena itulah, banyak orang yang memanfaatkannya untuk ikon dan logo.<\/li>\n\n\n\n<li><strong>Ukuran file yang lebih kecil<\/strong> &ndash; menggunakan file SVG akan membantu meningkatkan performa website karena hanya membutuhkan sedikit ruang penyimpanan web dan bisa dimuat jauh lebih cepat daripada gambar raster.<\/li>\n\n\n\n<li><a href=\"\/id\/tutorial\/cara-seo-wordpress\/\">SEO-friendly<\/a> &ndash; Google mengindeks file SVG, memungkinkannya muncul di Pencarian Gambar Google dan memaksimalkan strategi SEO Anda. Dengan gambar raster, Anda hanya bisa mengoptimasi alt attribute file media di website.<\/li>\n\n\n\n<li><strong>Berbasis kode<\/strong> &ndash; SVG bisa dimodifikasi menggunakan editor teks atau software editing grafik vektor. Anda bisa mengoptimalkan file gambar SVG untuk website, atau bahkan menambahkan animasi agar gambar menjadi interaktif.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-svg-wordpress-dan-keamanannya\">SVG WordPress dan Keamanannya<\/h2><p class=\"wp-block-paragraph\">Karena pada dasarnya SVG adalah file teks XML, format ini memiliki kerentanan yang bisa dieksploitasi, tidak seperti format gambar lainnya. Akibatnya, hacker bisa dengan mudah meretasnya dengan kode jahat untuk melancarkan serangan XSS (cross-site scripting) dan XXE (XML external entity) pada sistem Anda.<\/p><p class=\"wp-block-paragraph\">Jadi, Anda perlu berhati-hati saat menangani file SVG dan menambahkannya ke WordPress.<\/p><p class=\"wp-block-paragraph\">Untuk meminimalkan risiko keamanan, pastikan Anda membersihkan file SVG sebelum menguploadnya ke media library WordPress. Dalam proses ini, Anda akan menghilangkan kode yang mencurigakan dan error sehingga file menjadi lebih aman untuk website.<\/p><p class=\"wp-block-paragraph\">Untuk melakukannya, Anda bisa menggunakan plugin SVG, yang caranya akan kami bahas nanti. Namun, kami merekomendasikan agar Anda membersihkannya dua kali dengan <a href=\"https:\/\/svg.enshrined.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener\">SVG Sanitizer Test<\/a>, tool online yang dikembangkan oleh developer WordPress, Darryll Doyle.<\/p><p class=\"wp-block-paragraph\">Cara lain untuk <a href=\"\/id\/tutorial\/cara-mengamankan-wordpress\/\">mengamankan website WordPress<\/a> adalah dengan membatasi upload SVG hanya untuk user tertentu. User yang dipilih harus cermat terhadap masalah keamanan format SVG agar tidak asal-asalan memasukkan file SVG dari sumber yang tidak tepercaya.<\/p><h2 class=\"wp-block-heading\" id=\"h-cara-upload-svg-ke-wordpress-2-metode-aman\">Cara Upload SVG ke WordPress (2 Metode Aman)<\/h2><p class=\"wp-block-paragraph\">Secara teknis, ada dua cara upload SVG ke WordPress: menggunakan plugin atau mengaktifkannya secara manual. Mana pun pilihan Anda, sangat disarankan untuk membatasi hak upload hanya bagi administrator dan user terpercaya guna mengurangi risiko file berbahaya.<\/p><h3 class=\"wp-block-heading\" id=\"h-menggunakan-plugin\">Menggunakan Plugin<\/h3><p class=\"wp-block-paragraph\">Di tutorial ini, kami menggunakan plugin <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/svg-support\/\">SVG Support<\/a>. Plugin ini menggunakan library pembersih SVG yang akan otomatis aktif saat upload file SVG ke WordPress di media library. Selain itu, plugin ini mudah diatur dan tersedia gratis.<\/p><p class=\"wp-block-paragraph\">Berikut adalah langkah-langkah setup plugin SVG Support:<\/p><ol class=\"wp-block-list\">\n<li><a href=\"\/id\/tutorial\/cara-install-plugin-wordpress\/\">Install dan aktifkan plugin WordPress<\/a> ini.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"577\" height=\"272\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/plugin-svg-support.png\/public\" alt=\"plugin svg support\" class=\"wp-image-32905\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/plugin-svg-support.png\/w=577,fit=scale-down 577w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/plugin-svg-support.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/plugin-svg-support.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 577px) 100vw, 577px\" \/><\/figure>\n<\/div><ol class=\"wp-block-list\" start=\"2\">\n<li>Buka <strong>Settings<\/strong> (Pengaturan) -&gt; <strong>SVG<\/strong> <strong>Support<\/strong> dari dashboard WordPress.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"341\" height=\"310\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/svg-support-di-dashboard-wp.png\/public\" alt=\"svg support di dashboard wp\" class=\"wp-image-32906\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/svg-support-di-dashboard-wp.png\/w=341,fit=scale-down 341w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/svg-support-di-dashboard-wp.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/svg-support-di-dashboard-wp.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 341px) 100vw, 341px\" \/><\/figure>\n<\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Centang kotak di sebelah opsi <strong>Restrict to Administrator <\/strong>untuk membatasi hak upload. Lakukan hal yang sama pada opsi <strong>Enable Advanced Mode<\/strong> kalau Anda ingin mengakses fitur-fitur tingkat lanjut, seperti rendering SVG inline dan CSS styling.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"310\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/konfigurasi-svg-support.png\/public\" alt=\"konfigurasi svg support\" class=\"wp-image-32907\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/konfigurasi-svg-support.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/konfigurasi-svg-support.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/konfigurasi-svg-support.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Setelah menyimpan perubahan, Anda bisa mulai upload file SVG ke media library dengan aman.<\/li>\n<\/ol><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Tips Berguna                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Opsi untuk merender featured image (gambar unggulan) secara inline akan muncul pada postingan WordPress yang menggunakan file SVG sebagai featured image kalau Anda mengaktifkan mode tingkat lanjut.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-menambahkan-dukungan-svg-wordpress-secara-manual\">Menambahkan Dukungan SVG WordPress secara Manual<\/h3><p class=\"wp-block-paragraph\">Dengan metode ini, Anda perlu mengedit file <strong>functions.php<\/strong> website WordPress. Sebaiknya hanya lakukan langkah-langkah ini kalau Anda sudah sering <a href=\"\/id\/tutorial\/belajar-wordpress\/\">belajar WordPress<\/a>, familiar dengan PHP, dan sepenuhnya memahami masalah keamanan SVG.<\/p><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Penting!<\/strong> Pastikan untuk <a href=\"\/id\/tutorial\/cara-backup-wordpress\/\">backup website WordPress<\/a> sebelum melakukan perubahan apa pun untuk menghindari kehilangan data kalau-kalau terjadi kesalahan konfigurasi.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Langkah-langkah berikut akan menjelaskan cara mengaktifkan SVG di WordPress secara manual melalui <a href=\"\/id\/tutorial\/cara-menggunakan-file-manager-hostinger\/\">File Manager Hostinger<\/a>. Namun, Anda juga bisa menggunakan klien FTP seperti <a href=\"\/id\/tutorial\/cara-menggunakan-filezilla\/\">FileZilla<\/a> sebagai tool alternatif.<\/p><ol class=\"wp-block-list\">\n<li>Akses hPanel dan buka <strong>File<\/strong> -&gt; <strong>File Manager<\/strong>.<\/li>\n\n\n\n<li>Cari folder <strong>public_html<\/strong> -&gt; <strong>wp-includes<\/strong>. Scroll ke bawah sampai Anda menemukan <strong>functions.php<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1159\" height=\"414\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/functions-php-di-file-manager-hpanel-baru.png\/w=1024,h=1024,fit=scale-down\" alt=\"functions.php di file manager hostinger\" class=\"wp-image-27450\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/functions-php-di-file-manager-hpanel-baru.png\/w=1159,fit=scale-down 1159w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/functions-php-di-file-manager-hpanel-baru.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/functions-php-di-file-manager-hpanel-baru.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/functions-php-di-file-manager-hpanel-baru.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/functions-php-di-file-manager-hpanel-baru.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/figure>\n<\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Klik ganda file untuk membukanya, lalu paste (tempel) potongan kode berikut ke dalam file:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">function add_file_types_to_uploads($file_types){\n$new_filetypes = array();\n$new_filetypes['svg'] = 'image\/svg+xml';\n$file_types = array_merge($file_types, $new_filetypes );\nreturn $file_types;\n}\nadd_filter('upload_mimes', 'add_file_types_to_uploads');<\/pre><ol class=\"wp-block-list\" start=\"4\">\n<li>Simpan perubahan dan coba upload file SVG. Apabila prosesnya berhasil, media library Anda kini bisa menerima upload file SVG.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/id\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-37614\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p class=\"wp-block-paragraph\">File SVG memiliki berbagai keunggulan dan manfaat yang membuatnya cukup populer digunakan. Sayangnya, file teks XML rentan terhadap injeksi kode, yang merupakan alasan utama WordPress tidak menyertakan dukungan SVG secara default.<\/p><p class=\"wp-block-paragraph\">Meski begitu, ada dua cara agar file SVG bisa diupload ke WordPress: menggunakan plugin atau memodifikasi file <strong>functions.php<\/strong> website. Jangan lupa untuk membatasi hak upload agar Anda bisa mengunggah file SVG ke media library website dengan aman.<\/p><p class=\"wp-block-paragraph\">Semoga <a href=\"\/id\/tutorial\/wordpress\/\">tutorial WordPress<\/a> ini bisa membantu Anda memahami cara upload SVG ke WordPress beserta manfaat dan risikonya, ya. Semoga sukses selalu!<\/p><h2 class=\"wp-block-heading\" id=\"h-pertanyaan-umum-seputar-mengupload-svg-ke-wordpress\">Pertanyaan Umum seputar Mengupload SVG ke WordPress<\/h2><p class=\"wp-block-paragraph\">Berikut adalah jawaban atas beberapa pertanyaan umum mengenai file SVG di WordPress.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69442c9ea9d91\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Apakah SVG Lebih Baik dari PNG untuk Website?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Tergantung kebutuhan Anda. SVG akan lebih baik untuk gambar yang bisa diubah ukurannya sesuai kebutuhan, file berukuran kecil, dan grafik animasi, sedangkan PNG lebih baik untuk gambar dengan banyak detail dan transparansi.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442c9ea9d95\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Perlukah Menggunakan Logo SVG di Website WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ya, menggunakan logo SVG di website WordPress bisa meningkatkan skalabilitas, mengurangi ukuran file, memungkinkan penyesuaian, dan menjamin kompatibilitas dengan semua perangkat dan browser modern.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69442c9ea9d96\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Kenapa Tidak Bisa Upload File SVG ke WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>WordPress mungkin tidak mengizinkan upload SVG karena alasan keamanan. File SVG bisa mengandung kode berbahaya yang bisa merusak website Anda. Solusinya, gunakan plugin atau ubah SVG menjadi PNG atau JPG sebelum menguploadnya.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Apabila menangani pengelolaan dan desain web, Anda pasti sering menggunakan berbagai format file media. Nah, SVG adalah salah satu format terpopuler saat ini, yaitu file vektor berbasis XML. Sayangnya, tidak semua browser dan platform mendukung SVG sehingga Anda perlu mengaktifkan dukungannya dulu secara manual. Tenang, di artikel ini kami akan membahas cara upload file SVG [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-upload-svg-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"%title%","rank_math_description":"SVG adalah salah satu format file gambar terbaik untuk website, tapi bisa berbahaya. Baca cara upload SVG ke WordPress dengan aman yuk!","rank_math_focus_keyword":"cara upload svg ke wordpress, apa itu svg, file svg","footnotes":""},"categories":[4859],"tags":[9132,9131,9133,9135,9134,9137,9136,9138],"class_list":["post-10026","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-apa-itu-svg","tag-file-svg","tag-format-svg","tag-gambar-svg","tag-svg","tag-svg-wordpress","tag-upload-svg-ke-wordpress","tag-wordpress-svg"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/upload-svg-to-wordpress\/","default":1},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/televerser-fichier-svg-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-upload-svg-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/cargar-en-wordpress-svg\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/10026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=10026"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/10026\/revisions"}],"predecessor-version":[{"id":47190,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/10026\/revisions\/47190"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=10026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=10026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=10026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}