SVG mengekalkan tepi tajam pada semua ketumpatan piksel dan boleh menyesuaikan warna dengan tema. Fleksibiliti ini datang dengan satu syarat: fail mesti kekal berdikari, ringkas dan jelas dalam ruang yang amat kecil.
Bina segi empat sama dengan viewBox
Gunakan viewBox segi empat sama, seperti 0 0 64 64, dan tinggalkan ruang di sekeliling simbol. viewBox mentakrifkan sistem koordinat tanpa menetapkan saiz fizikal paparan.
Ringkaskan grafik kepada bentuk yang membezakannya. Butiran halus, ruang kecil dalam huruf dan perkataan penuh sering hilang pada 16 piksel walaupun fail vektor masih tajam secara teknikal.
| Perkara | Sebab | Ujian |
|---|---|---|
| viewBox segi empat sama | Pangkasan yang boleh dijangka | Pratonton 16×16 |
| Laluan ringkas | Kejelasan | Tab cerah dan gelap |
| Tiada kebergantungan | Pemuatan berdikari | Rangkaian luar talian |
| Sandaran ICO | Klien lama | URL akar |
Jadikan fail berdikari
Benamkan gaya yang diperlukan dalam SVG. Tukar teks kepada laluan apabila simbol bergantung pada rupa huruf, kerana fon web luaran bukan kebergantungan yang boleh diharap dalam konteks ini.
Buang skrip, pautan jauh dan metadata penyunting yang tidak diperlukan. Bentuk serta gaya ringkas turut memudahkan semakan keselamatan dan mengurangkan saiz fail.
Akhir sekali, buka fail itu sendiri dalam pelayar dan uji di luar talian. Jika grafik berubah atau hilang, ia masih bergantung pada sumber luaran yang perlu dibenamkan atau digantikan.
Isytiharkan SVG dengan sandaran
Tambah link rel icon dengan type image/svg+xml dan URL relatif kepada akar. Kekalkan juga favicon.ico di akar untuk klien yang tidak memilih SVG atau meminta ICO secara terus.
SVG tidak menggantikan ikon Apple Touch atau ikon manifes. Eksport fail PNG legap atau maskable untuk antara muka tersebut.
Sesuaikan warna dengan tema
Peraturan prefers-color-scheme dalam elemen style boleh menukar fill atau stroke dalam mod gelap. Tetapkan warna lalai yang kukuh terlebih dahulu, kemudian tambah varian sebagai penambahbaikan progresif.
Uji fail dalam tab sebenar dan pada beberapa tahap zum. Periksa juga sandaran apabila SVG tidak dipilih: ICO yang hilang pada latar gelap masih menjadi masalah bagi klien tersebut.
Sumber utama
Soalan lazim
Adakah SVG memerlukan width dan height?
viewBox segi empat sama ialah bahagian penting untuk penskalaan. width dan height yang jelas boleh disertakan, tetapi pelayar menentukan saiz ikon mengikut konteksnya.
Bolehkah ia memuatkan fon luaran?
Jangan bergantung padanya. Tukar huruf kepada laluan untuk fail berdikari yang memberikan hasil boleh dijangka.
Adakah SVG mencukupi untuk iOS?
Tidak. Sediakan ikon Apple Touch PNG legap yang berasingan untuk skrin utama.