Kenapa SVG Kamu Tidak Muncul di Browser? Ini Penyebab Umumnya
Kenapa SVG Kamu Menampilkan Ikon Gambar Rusak (atau Tidak Sama Sekali)
File SVG seharusnya mudah. Sebagai alternatif format raster yang dapat diskalakan tanpa batas, biasanya SVG sangat bisa diandalkan. Tapi ketika SVG menolak untuk muncul, kegagalannya seringkali tidak terlihat dan membingungkan. Kamu akan melihat ikon gambar rusak, persegi panjang putih kosong, atau hanya ruang kosong di mana seharusnya grafis kamu berada. JPEG yang rusak setidaknya terlihat jelas bermasalah; SVG yang buruk bisa terlihat sempurna di editor teks tapi tetap tidak menampilkan apa-apa di Chrome, Firefox, atau Safari. Masalahnya biasanya bermuara pada beberapa isu berbeda: tipe MIME yang salah dari server web, XML yang tidak terbentuk dengan baik di dalam file, kebijakan keamanan yang memblokir kode inline, atau masalah ukuran yang membuat SVG muncul dengan ukuran nol yang terlihat. Setiap masalah punya solusi berbeda, dan mencampuradukkannya hanya akan membuang-buang waktu berjam-jam. Panduan ini akan membahas setiap penyebab dengan pengaturan dan atribut spesifik yang perlu kamu periksa, bukan hanya saran samar untuk 'validasi file kamu'. Satu perbedaan penting sebelum kita mulai: beberapa masalah SVG bermula dari alat desain (Illustrator, Figma) saat ekspor, sementara yang lain terjadi selama konversi file. Jika kamu menggunakan alat online untuk mengonversi file ke SVG dan rusak, itu adalah jenis masalah yang berbeda dari SVG sempurna yang salah dikonfigurasi oleh server kamu. Kami akan memastikan untuk membedakan keduanya.
Tipe MIME Salah: Masalah Sisi Server yang Sering Terlewatkan oleh Banyak Developer
Ketika kamu menggunakan tag `<img>` atau CSS `background-image` untuk menampilkan SVG, browser akan memeriksa header Content-Type yang dikirim oleh server. Jika header tersebut terbaca `text/plain` atau `application/octet-stream` alih-alih `image/svg+xml` yang benar, sebagian besar browser akan menolak untuk menampilkan gambar. Padahal file-nya sendiri bisa saja sempurna. Ini adalah salah satu penyebab paling umum SVG yang rusak dalam produksi, dan ini adalah 'hantu' dalam pengembangan lokal. Kenapa? Karena secara lokal, kamu mungkin hanya membuka file dari disk, bukan menyediakannya dari server. Masalah ini baru muncul setelah kamu melakukan deployment. Untuk mendiagnosis ini, buka DevTools browser kamu (F12), beralih ke tab Network, dan muat ulang halaman. Temukan SVG kamu di daftar permintaan, klik, dan lihat Response Headers. Baris `Content-Type` harus bertuliskan `image/svg+xml`. Jika tertulis hal lain, kamu telah menemukan masalahnya. Perbaikannya ada di server, bukan di file. Di Apache, kamu bisa memperbaikinya dengan menambahkan `AddType image/svg+xml .svg .svgz` ke file `.htaccess` kamu. Untuk pengguna Nginx, tambahkan `image/svg+xml svg svgz;` di dalam blok `types` dari `nginx.conf` kamu. Jika kamu menggunakan IIS, kamu perlu menggunakan Internet Information Services Manager untuk menambahkan pemetaan tipe MIME untuk ekstensi `.svg` ke `image/svg+xml`. Jika kamu menggunakan platform terkelola seperti Netlify atau Vercel, ini ditangani dalam file konfigurasi (`netlify.toml` atau `vercel.json`). Sintaks Netlify, misalnya, menggunakan blok `[[headers]]` untuk mengatur `Content-Type` untuk jalur tertentu. Ini adalah perbaikan lima menit yang bisa menghemat jam-jam frustrasi kamu, tapi hanya jika kamu tahu untuk melihat di panel jaringan.
XML yang Rusak: Ketika File SVG Itu Sendiri yang Bermasalah
SVG adalah dokumen XML, yang berarti ia mengikuti aturan parsing yang ketat. Satu tag penutup yang hilang, satu ampersand yang tidak di-escape, atau `id` yang duplikat dapat membuat seluruh file gagal tanpa pesan di beberapa browser. Ini tipsnya: jika SVG kamu muncul di Chrome tapi tidak di Firefox, XML yang rusak adalah tersangka utamanya. Firefox jauh lebih eksplisit tentang kesalahan XML. Untuk melihat sendiri, seret file SVG langsung ke jendela Firefox. Jika XML-nya rusak, Firefox akan menampilkan pesan kesalahan yang jelas, lengkap dengan nomor baris dan kolom: 'XML Parsing Error: not well-formed at line 47, column 12.' Itu peta harta karun kamu. Buka file di editor teks seperti VS Code dan pergi ke lokasi persis itu. Apa yang kamu cari? Seringkali itu adalah ampersand (`&`) dalam tautan yang seharusnya ditulis sebagai `&`. Atau kamu mungkin menemukan elemen `<path>` atau `<g>` yang tidak tertutup. Masalah encoding adalah masalah klasik lainnya, di mana alat desain mengekspor karakter di luar rentang ASCII standar tanpa mendeklarasikan UTF-8. File SVG kamu harus selalu dimulai dengan `<?xml version="1.0" encoding="UTF-8"?>` jika berisi karakter non-ASCII. Versi lama Adobe Illustrator suka mengekspor file dengan namespace XML proprietary. Meskipun secara teknis tidak tidak valid, ini menambah beban yang tidak perlu dan terkadang bisa membingungkan parser. Menjalankan file-file ini melalui optimizer seperti SVGO biasanya akan menghilangkan namespace tersebut, yang bagus. Bahayanya adalah jika tampilan grafis entah bagaimana bergantung pada atribut proprietary tersebut, dalam hal ini membersihkan file mungkin secara tak terduga akan merusaknya. Jika kamu mengonversi file ke SVG menggunakan CocoConvert dan hasilnya memiliki kesalahan XML, harap beritahu kami melalui tombol umpan balik di halaman hasil. Kami secara aktif mencari dan memperbaiki jenis artefak konversi ini.
Konflik SVG Inline dan Content Security Policy
Menempelkan markup SVG langsung ke HTML kamu adalah teknik yang ampuh, tetapi ada masalah besar: SVG menjadi bagian dari DOM. Ini berarti sekarang ia tunduk pada Content Security Policy (CSP) halaman kamu. CSP yang ketat dapat secara diam-diam menonaktifkan bagian-bagian SVG kamu, menyebabkan kebingungan. Ini terutama berlaku untuk SVG yang berisi elemen `<script>`, blok `<style>` untuk animasi, atau elemen `<use>` yang mereferensikan definisi simbol eksternal. Direktif CSP umum seperti `script-src 'self'` akan memblokir skrip inline apa pun di dalam SVG kamu agar tidak berjalan. Direktif seperti `img-src 'self'` mungkin mencegah SVG memuat gambar eksternal yang direferensikan melalui `<image href="https://external-domain.com/...">`. Kabar baiknya? Browser akan memberi tahu kamu dengan tepat apa yang salah. Buka konsol pengembang browser (tab Console, bukan Network) dan cari pesan kesalahan berwarna merah. Pelanggaran CSP sangat eksplisit, menyatakan sumber daya mana yang diblokir dan direktif kebijakan mana yang bertanggung jawab, seperti: 'Refused to load the script because it violates the following Content Security Policy directive: script-src self.' Cara kamu memperbaikinya tergantung pada kebutuhan SVG kamu. Kamu bisa menambahkan `'unsafe-inline'` ke direktif `style-src` kamu, tetapi ini melemahkan kebijakan keamanan kamu, jadi saya sangat tidak menyarankan itu. Solusi yang jauh lebih baik untuk SVG animasi adalah memindahkan CSS ke stylesheet eksternal dan menautkannya dengan `<?xml-stylesheet type="text/css" href="styles.css"?>`. Untuk elemen `<use>` yang menunjuk ke file eksternal, kamu perlu meng-inline simbol-simbol tersebut atau menyesuaikan kebijakan `img-src` kamu untuk mengizinkan (whitelist) asalnya. SVG yang dibuat oleh CocoConvert atau alat serupa tidak akan memiliki skrip, jadi kamu tidak akan melihat konflik script-src dengannya. Namun, konflik style-src masih mungkin terjadi jika SVG yang dikonversi menggunakan CSS inline untuk warna atau font.
Kesalahan Konfigurasi Viewport dan ViewBox yang Membuat SVG Tidak Terlihat
Ini adalah jenis masalah SVG yang paling menjengkelkan. Browser menampilkan SVG dengan sempurna, tapi menampilkannya dengan ukuran nol atau di luar layar. Kamu tidak melihat ikon gambar rusak; kamu tidak melihat apa-apa. Siapa pun yang pernah menatap ruang kosong di DevTools, melihat elemen `<svg>` ada di sana tapi tidak ada apa-apa di layar, tahu betul rasa sakit yang satu ini. Kuncinya adalah hubungan antara atribut `viewBox`, yang mendefinisikan sistem koordinat internal grafis, dan atribut `width` serta `height`, yang mendefinisikan seberapa banyak ruang yang ditempati SVG di halaman. Ketika mereka hilang atau tidak cocok, kekacauan pun terjadi. Kamu akan sering melihat ini pada ekspor Figma: SVG diberi `width="100%"` dan `height="100%"` tapi tidak memiliki `viewBox`. Jika kamu menempatkan SVG itu dalam kontainer yang tidak memiliki tinggi eksplisit, SVG akan runtuh menjadi tinggi nol. Perbaikannya adalah menambahkan `viewBox` yang cocok dengan dimensi artboard asli (misalnya, `viewBox="0 0 800 600"`) atau memberikan tinggi pada elemen penampung di CSS kamu. Masalah klasik lainnya adalah SVG di mana data jalur digambar pada koordinat yang jauh di luar `viewBox`. Jika `viewBox` kamu adalah `"0 0 100 100"` tetapi data jalur kamu dimulai pada `M 500 500`, grafis tersebut digambar 400 unit di luar layar. Ini terjadi ketika kamu memindahkan bentuk-bentuk di alat desain tanpa mengatur ulang titik asal artboard. Untuk memperbaikinya, kembali ke alat desain kamu, pilih semua objek, dan gunakan perintah 'Reset Bounding Box' atau yang setara, lalu ekspor ulang. Untuk mendiagnosis ini, periksa SVG di DevTools. Jika lebar atau tinggi terhitungnya adalah 0, masalahnya ada pada ukuran. Kamu juga bisa memaksakan masalah ini dengan sementara menambahkan `style="border: 1px solid red; width: 200px; height: 200px;"` langsung ke tag `<svg>`. Ini akan membuat kotak yang terlihat dan mengungkapkan apakah ada bagian dari grafis kamu yang muncul.
Kegagalan Memuat Font dan Sumber Daya Eksternal di Dalam SVG
SVG tidak selalu berdiri sendiri. Ia dapat mereferensikan sumber daya eksternal seperti font, gambar, gradien, dan filter. Ketika panggilan eksternal ini gagal, SVG mungkin muncul sebagian atau terlihat sepenuhnya salah, tergantung seberapa kritis bagian yang hilang itu. Kegagalan font seringkali menjadi masalah yang menjengkelkan. SVG yang menentukan font kustom dalam elemen `<text>` akan kembali ke default sistem jika font tersebut tidak tersedia. Ini biasanya tidak sepenuhnya merusak tampilan, tetapi dapat menyebabkan teks meluap dari wadahnya dan mengacaukan seluruh tata letak. Saran saya: selalu konversi teks menjadi outline (jalur) sebelum mengekspor SVG untuk penggunaan web. Di Illustrator, itu adalah Type > Create Outlines; di Inkscape, itu adalah Path > Object to Path. Ini sepenuhnya menghilangkan ketergantungan font dan seluruh kelas masalah. Gambar eksternal di dalam SVG bahkan lebih rewel. Tag `<image>` yang menunjuk ke URL bisa gagal karena URL tidak aktif, karena server gambar tidak memiliki header CORS yang benar, atau karena CSP memblokir asal. Browser tidak akan menampilkan ikon kesalahan; ia hanya akan menampilkan ruang kosong di mana seharusnya gambar berada. Periksa tab Network kamu untuk permintaan dengan status 404 atau status 0, yang seringkali menunjukkan blokir CORS atau CSP. Jika kamu mengonversi file PDF atau AI yang berisi gambar raster, CocoConvert akan menyematkan gambar-gambar tersebut langsung ke dalam SVG sebagai URI data base64. Ini menyelesaikan masalah referensi eksternal tetapi dapat membuat file SVG menjadi sangat besar. PDF dengan beberapa foto dapat dengan mudah menjadi SVG berukuran 5MB+. Dalam kasus-kasus tersebut, kami akan mengatakannya dengan jelas: mengonversi ke PNG atau WebP adalah pilihan yang lebih praktis. Kami tidak akan berpura-pura SVG selalu menjadi jawaban yang tepat.
Ketika Konversi Menjadi Sumber Masalah (dan Apa yang Harus Dilakukan)
Terkadang masalahnya bukan browser kamu atau server kamu. File SVG itu sendiri sudah rusak sejak awal, korban dari proses konversi yang buruk. Penting untuk mengenali kemungkinan ini, karena itu berarti kamu harus berhenti men-debug lingkungan kamu dan mulai memeriksa file tersebut dengan cermat. Artefak konversi umum meliputi data jalur dengan presisi sangat tinggi (15+ desimal), yang membuat file membengkak dan dapat menyebabkan parser kehabisan waktu; konversi ruang warna yang salah dari CMYK ke nilai RGB yang tidak didukung; dan encoding teks yang rusak jika file sumber menggunakan skrip non-Latin. Kamu mungkin juga melihat deklarasi namespace yang hilang saat mengonversi dari format yang mengandalkan XML proprietary. Jika kamu mencurigai konversi yang buruk, cara tercepat untuk memeriksanya adalah dengan membuka SVG di Inkscape. Ini gratis, lintas platform, dan memiliki parser SVG yang sangat pemaaf. Jika file terlihat benar di Inkscape tetapi rusak di Chrome, masalahnya kemungkinan besar spesifik browser. Jika rusak di Inkscape juga, maka proses konversi itu sendiri gagal dan hasilnya rusak. CocoConvert menggunakan pustaka konversi yang tangguh, tetapi tidak ada alat otomatis yang sempurna. File AI yang sangat kompleks dengan ratusan lapisan, atau PDF yang sangat bergantung pada efek transparansi, dapat menghasilkan output SVG yang tidak sempurna. Dalam situasi ini, cara paling andal seringkali adalah membuka file sumber di aplikasi aslinya, mengekspor ke SVG secara langsung, dan menggunakan CocoConvert untuk pasangan format yang kami kuasai, seperti mengonversi PNG sederhana ke SVG atau SVG ke PDF untuk dicetak. Jika kamu mendapatkan SVG yang rusak dari konversi, harap laporkan menggunakan formulir umpan balik di halaman hasil, dan sertakan file aslinya jika kamu bisa. Contoh spesifik adalah bagaimana kami meningkatkan jalur konversi untuk semua orang, dan kami menanggapi laporan tersebut dengan serius.