SVG, her piksel yoğunluğunda kenarları net tutar ve renkleri temaya uyarlayabilir. Bu esnekliğin bir koşulu vardır: dosya bağımsız, basit ve küçücük alanda okunabilir kalmalıdır.
viewBox ile bir kare oluşturun
0 0 64 64 gibi kare viewBox kullanın ve sembolün çevresinde boşluk bırakın. viewBox, fiziksel bir görüntüleme boyutu dayatmadan koordinat sistemini tanımlar.
Çizimi ayırt edici şekillerine indirgeyin. Vektör dosyası teknik olarak net kalsa bile ince ayrıntılar, harflerin küçük iç boşlukları ve tam sözcükler 16 pikselde çoğunlukla kaybolur.
| Öğe | Neden | Test |
|---|---|---|
| Kare viewBox | Öngörülebilir kırpma | 16×16 önizleme |
| Basit yollar | Okunabilirlik | Açık ve koyu sekmeler |
| Bağımlılık yok | Bağımsız yükleme | Çevrimdışı ağ |
| ICO yedeği | Eski istemciler | Kök URL |
Dosyayı bağımsız hâle getirin
Gerekli stilleri SVG içine gömün. Sembol bir yazı tipine bağlıysa metni yollara dönüştürün; çünkü bu bağlamda harici web yazı tipi güvenilir bir bağımlılık değildir.
Betikleri, uzak bağlantıları ve gereksiz düzenleyici üstverisini kaldırın. Basit şekiller ve stiller, güvenlik incelemesini de kolaylaştırır ve dosya boyutunu azaltır.
Son olarak dosyayı tarayıcıda tek başına açın ve çevrimdışı test edin. Çizim değişiyor veya kayboluyorsa hâlâ gömülmesi ya da değiştirilmesi gereken harici bir kaynağa bağlıdır.
SVG'yi yedekle birlikte tanımlayın
type image/svg+xml ve köke göre URL ile link rel icon ekleyin. SVG'yi seçmeyen veya doğrudan ICO isteyen istemciler için kökte favicon.ico dosyasını da tutun.
SVG, Apple Touch simgesi veya manifest simgelerinin yerini almaz. Bu arayüzler için opak veya maskelenebilir PNG dosyaları dışa aktarın.
Renkleri temaya uyarlayın
Style öğesi içindeki prefers-color-scheme kuralı, koyu modda fill veya stroke değerini değiştirebilir. Önce güvenilir bir varsayılan renk tanımlayın, sonra sürümü aşamalı iyileştirme olarak ekleyin.
Dosyayı gerçek sekmelerde ve birkaç yakınlaştırma düzeyinde test edin. SVG seçilmediğinde yedeği de inceleyin: koyu arka planda kaybolan ICO, bu istemciler için hâlâ sorundur.
Birincil kaynaklar
Sık sorulan sorular
SVG'de width ve height gerekli mi?
Ölçekleme için asıl gerekli olan kare viewBox'tır. Açık width ve height eklenebilir, ancak tarayıcı simgeyi bağlamına göre boyutlandırır.
Harici yazı tipi yükleyebilir mi?
Buna güvenmeyin. Bağımsız ve öngörülebilir bir dosya için yazıları yollara dönüştürün.
iOS için SVG yeterli mi?
Hayır. Ana ekran için ayrı, opak PNG Apple Touch simgesi sağlayın.