SVG ke ICO Tidak Berfungsi? Penyebab Umum (Font, Gambar Eksternal, ViewBox)

SVG adalah salah satu format sumber terbaik untuk menghasilkan file ICO. Karena SVG adalah format vektor, ia dapat diskalakan ke ukuran berapa pun tanpa kehilangan kualitas, yang membuatnya ideal untuk menghasilkan beberapa layer ukuran (16 hingga 256 piksel) yang dibutuhkan file ICO yang baik. Secara teori, Anda memasukkan SVG ke Any2ICO dan mendapatkan file ICO multi-ukuran yang tajam secara instan.

Dalam praktiknya, file SVG bisa rumit. Spesifikasi SVG besar dan kompleks, dan tool yang berbeda membuat SVG dengan asumsi berbeda tentang bagaimana file akan di-render. SVG yang terlihat sempurna di Adobe Illustrator atau Figma mungkin di-render dengan tidak benar, sebagian, atau tidak sama sekali ketika dibuka di Canvas API browser, yang merupakan mesin rendering yang digunakan konverter berbasis browser. Hasilnya mungkin berupa ikon kosong, ikon dengan teks yang hilang, ikon dengan skala yang salah, atau ikon dengan bagian yang hilang.

Kabar baiknya adalah masalahnya dipahami dengan baik dan perbaikannya sederhana. Artikel ini mencakup alasan paling umum konversi SVG-ke-ICO gagal atau menghasilkan hasil yang tidak diharapkan, dan memberikan perbaikan yang jelas untuk masing-masing. Jika Anda ingin jalur tercepat menuju kesuksesan, mulailah dengan checklist di bagian berikutnya.

Checklist Cepat: Perbaiki SVG Anda Sebelum Mengonversi

Sebelum menyelami penjelasan detail, berikut adalah checklist cepat yang menyelesaikan sebagian besar masalah SVG-ke-ICO. Jalankan item-item ini terlebih dahulu; jika masalah Anda terselesaikan, Anda tidak perlu membaca lebih lanjut.

1. Tambahkan atau perbaiki atribut viewBox. Buka SVG Anda di text editor dan periksa elemen root <svg>. Seharusnya memiliki atribut viewBox seperti viewBox="0 0 100 100" yang mendefinisikan sistem koordinat. Jika hilang, tambahkan dengan nilai yang sesuai dengan dimensi desain Anda.

2. Konversi semua teks menjadi outline (path). Pilih semua elemen teks di editor vektor Anda dan konversi menjadi outline atau path. Di Illustrator, ini adalah Type > Create Outlines. Di Figma, klik kanan dan pilih Flatten. Di Inkscape, gunakan Path > Object to Path. Ini menghilangkan ketergantungan font sepenuhnya.

3. Hapus atau sematkan referensi eksternal. Cari di file SVG Anda untuk referensi href, xlink:href, dan url() yang menunjuk ke file eksternal (gambar, font, CSS). Sematkan sumber daya ini langsung di SVG atau hapus jika tidak penting.

4. Ganti CSS eksternal dengan style inline. Jika SVG Anda mereferensikan stylesheet eksternal, salin aturan CSS yang relevan langsung ke dalam blok <style> di dalam SVG, atau konversi menjadi atribut style inline pada setiap elemen.

5. Atur width dan height eksplisit. Meskipun tidak selalu diperlukan, menambahkan atribut width dan height ke elemen root <svg> membantu Canvas API menentukan ukuran rendering yang benar. Gunakan nilai yang sesuai atau melebihi 256 piksel untuk hasil terbaik.

Font dan Rendering Teks

Teks adalah sumber terbesar masalah konversi SVG. Ketika SVG berisi elemen <text>, renderer membutuhkan akses ke font yang ditentukan untuk menampilkan teks dengan benar. Di aplikasi desain seperti Illustrator atau Figma, font terinstal di komputer Anda, jadi semuanya terlihat benar. Tetapi ketika SVG di-render di Canvas API browser untuk konversi ICO, situasinya sangat berbeda.

Canvas API hanya dapat menggunakan font yang tersedia untuk browser saat render. Jika SVG Anda menentukan font-family: "Proxima Nova" dan font tersebut tidak terinstal di sistem pengguna atau dimuat melalui web font, browser mengganti dengan font default (biasanya generic sans-serif atau serif). Ini mengubah tampilan teks: jarak huruf bergeser, karakter mungkin lebih lebar atau lebih sempit, dan tata letak keseluruhan dapat rusak. Dalam beberapa kasus, teks mungkin tidak di-render sama sekali jika SVG menggunakan fitur font lanjutan atau ligatur yang tidak didukung font fallback.

Perbaikan yang andal adalah konversi semua teks menjadi outline (juga disebut "mengonversi ke path" atau "meratakan teks"). Ini mengganti setiap karakter teks dengan path vektor yang menjelaskan bentuk tepatnya. SVG yang dihasilkan tidak lagi mereferensikan font apa pun karena bentuk huruf digambar sebagai path geometris. File SVG akan sedikit lebih besar, tetapi akan di-render identik di sistem apa pun, di browser apa pun, dan melalui Canvas API apa pun, terlepas dari font mana yang terinstal.

Di Illustrator: pilih semua teks, lalu buka Type > Create Outlines. Di Figma: pilih layer teks, klik kanan, dan pilih Flatten. Di Inkscape: pilih teks, lalu gunakan Path > Object to Path. Selalu simpan SVG asli yang dapat diedit secara terpisah sebelum mengonversi menjadi outline, karena teks yang di-outline tidak lagi dapat diedit sebagai teks.

Gambar dan Referensi Eksternal

File SVG dapat mereferensikan sumber daya eksternal: gambar yang dimuat melalui <image href="/id/logo.png">, font yang dimuat melalui @font-face dengan URL, file CSS yang ditautkan melalui <?xml-stylesheet?>, dan pattern atau gradient yang mereferensikan file SVG lain. Ketika SVG dibuka sebagai file standalone di konverter berbasis browser, referensi eksternal ini hampir selalu gagal dimuat.

Canvas API me-render SVG dalam konteks sandboxed di mana permintaan cross-origin diblokir karena alasan keamanan. Elemen <image> yang menunjuk ke https://example.com/logo.png tidak akan dimuat karena browser memblokir fetch cross-origin. Hasilnya adalah ruang kosong di mana gambar seharusnya muncul. Hal yang sama berlaku untuk font yang dihosting secara eksternal, stylesheet, dan sumber daya apa pun yang direferensikan oleh URL.

Bahkan path relatif seperti href="/id/logo.png" akan gagal karena SVG sedang diproses di memori oleh Canvas API, tidak disajikan dari direktori di mana path relatif dapat diselesaikan. Tidak ada konteks file system untuk SVG untuk direferensikan.

Perbaikannya adalah sematkan semua sumber daya eksternal langsung di SVG. Untuk gambar, konversi menjadi data URI base64: <image href="data:image/png;base64,iVBOR...">. Untuk font, gunakan deklarasi @font-face yang di-encode base64 di dalam blok <style> di dalam SVG (meskipun mengonversi teks menjadi outline biasanya lebih sederhana dan lebih andal). Untuk CSS, salin semua aturan ke dalam elemen <style> inline di dalam tag <svg>.

Masalah ViewBox, Width, dan Height

Atribut viewBox mendefinisikan sistem koordinat SVG. Ini memberi tahu renderer bagian mana dari canvas SVG tak terbatas yang akan ditampilkan dan cara menskalakan konten. Ketika viewBox hilang atau tidak benar, hasilnya berkisar dari output kosong hingga ikon yang hanya menampilkan sudut desain atau di-render dengan rasio aspek yang salah.

viewBox yang hilang: Jika SVG memiliki width dan height tetapi tidak ada viewBox, beberapa renderer akan menyimpulkan viewBox dari dimensi, tetapi Canvas API mungkin tidak. Pendekatan paling aman adalah selalu menyertakan viewBox eksplisit. Jika SVG Anda dirancang pada 100x100 unit, tambahkan viewBox="0 0 100 100" ke elemen root.

viewBox tidak sesuai dengan konten: Jika koordinat viewBox tidak mencakup semua konten SVG, bagian dari desain akan terpotong. Misalnya, jika ikon Anda memiliki elemen yang meluas hingga x=120 tetapi viewBox hanya mencakup 0 hingga 100, 20 unit paling kanan tidak terlihat. Buka SVG di text editor, periksa nilai viewBox, dan sesuaikan agar berisi semua elemen yang terlihat.

Width/height diatur ke 0 atau nilai yang sangat kecil: Beberapa tool ekspor SVG mengatur width dan height ke nilai yang sangat kecil seperti 1px atau 0, mengandalkan CSS untuk menskalakan SVG saat ditampilkan di halaman web. Ketika Canvas API membaca dimensi ini, ia mungkin me-render SVG pada 1x1 piksel dan kemudian menskalakannya, menghasilkan hasil yang sepenuhnya kosong atau sangat buram. Atur width dan height setidaknya 256 piksel untuk memberi Canvas API ukuran rendering yang wajar.

Dimensi berbasis persentase: SVG dengan width="100%" height="100%" tidak memiliki ukuran intrinsik. Canvas API memerlukan nilai piksel absolut untuk membuat permukaan rendering. Ganti dimensi persentase dengan nilai absolut seperti width="512" height="512".