SVG Symbol

Font tabanlı ikonlara alternatif — ölçeklenebilir, çok renkli ikonları doğrudan HTML'ye gömmek için SVG sembol spriteleri kullanma.

SVG Sembol Spriteleri Nedir?

SVG sembol spriteleri birden fazla SVG ikonunu tek bir dosyada bir araya getirir. Her ikon, benzersiz bir id ile bir <symbol> öğesi içinde tanımlanır. Bir ikonu kullanmak için <use href="#icon-id"> ile ona başvurursunuz. Sprite bir kez yüklenir — satır içi veya harici dosya olarak — ve bireysel ikonlar sayfanın herhangi bir yerinde oluşturulur.

Bu, ikon fontlarından temelden farklı bir yaklaşımdır. Unicode kod noktalarını font glif'lerine eşlemek yerine yerel SVG öğelerini kullanırsınız. Her ikon tam SVG yeteneklerini korur: birden fazla renk, gradyanlar, filtreler ve ayrıntılı erişilebilirlik öznitelikleri. Bunun karşılığında font ikonlarının saf CSS yaklaşımıyla karşılaştırıldığında biraz daha karmaşık bir işaretleme ve stil kuralları söz konusudur.

Nasıl Çalışır

Sprite dosyası, bir veya daha fazla <symbol> öğesi içeren normal bir SVG belgesidir. Her sembol kendi viewBox'ına sahip bağımsız bir ikon tanımlar:

icons.svg (sprite dosyası) 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

Dış <svg>, sayfada yer kaplamaması için style="display:none" ile gizlenir. İçindeki semboller başvurulana kadar görünmez. Bir ikonu oluşturmak için <use> öğesini kullanın:

HTML'de sembolleri kullanma 
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

İkonları CSS ile stilleyin; font tabanlı color özelliği yerine fill ve stroke kullanın:

SVG ikonlar için CSS 
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

fill: currentColor kullanımı, ikonun ebeveyn öğenin metin rengini devralmasına olanak tanır; font ikonlarının color özelliğiyle çalışmasına benzer.

Semboller ve Font İkonları

    Sembollerin Artıları
  • Çok renk desteği — her yolun kendi dolgusu ve kontuру olabilir
  • Her ikon daha iyi erişilebilirliğe sahip gerçek bir SVG öğesidir
  • Unicode eşleştirmesi gerekmez — ikonlara okunabilir adlarla başvurulur
  • Daha keskin oluşturma — font hinting sorunları veya alt piksel artefaktları yok
  • Bireysel ikon parçaları bağımsız olarak canlandırılabilir
  • Herhangi bir SVG özelliğiyle çalışır: gradyanlar, filtreler, kırpma yolları, maskeler
    Sembollerin Eksileri
  • Daha ayrıntılı işaretleme (<svg><use> vs <i class="icon">)
  • CSS color ile kolayca stillenemez — fill/stroke gerektirir
  • Harici spritelerin çapraz kaynak yüklenmesinde CORS etkileri vardır
  • Sıkıştırılmış font formatlarından daha büyük toplam dosya boyutu
  • Her ikon kullanımında daha fazla HTML ağırlığı
  • ::before/::after sözde öğe desteği yok

Yükleme Stratejileri

SVG sembol spriteini sayfaya yüklemenin üç ana yolu vardır; her birinin farklı değiş tokuşları vardır:

Satır içi sprite

Sprite SVG'nin tamamını doğrudan HTML <body> etiketine yapıştırın. Bu en basit yaklaşımdır — CORS sorunu yok, ek HTTP isteği yok. Semboller sayfadaki herhangi bir <use> referansı için hemen kullanılabilir. Tek sayfalı uygulamalar veya küçük ikon setleri (~50'nin altında) için en iyi sonucu verir.

Harici sprite

Spriteyi <use href="icons.svg#home"> aracılığıyla harici dosya olarak yükleyin. Bu HTML'yi temiz tutar ve tarayıcının spriteyi sayfadan ayrı olarak önbelleğe almasına olanak tanır. Ancak CORS etkileri vardır: sprite aynı kaynaktan sunulmalıdır ya da sunucu uygun Access-Control-Allow-Origin başlıklarını ayarlamalıdır. Internet Explorer'ın harici <use> başvurularını desteklemediğine dikkat edin — IE desteğine ihtiyacınız varsa svg4everybody polyfill'ini kullanın.

JS enjeksiyonu

Sprite dosyasını fetch() ile yükleyin ve çalışma zamanında DOM'a enjekte edin. Bu, harici spritelerin önbelleklenebilirliğini satır içi spritelerin güvenilirliğiyle birleştirir — enjekte edilen SVG belgenin bir parçası haline gelir, dolayısıyla <use> başvuruları CORS kısıtlamaları olmadan çalışır. Bobcorn bu yaklaşımı oluşturur: yüklendiğinde tüm sembolleri getirip kaydeden bir JS dosyası.

JS enjeksiyon yaklaşımı (Bobcorn çıktısı) 
<!-- Oluşturulan JS spriteyi yükle -->
<script src="icons-symbol.js"></script>

<!-- Ardından normal şekilde kullan: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

JS dosyası, tüm <symbol> tanımlarını içeren gizli bir <svg> öğesi oluşturur ve belge gövdesine ekler. Yüklendikten sonra ikonlara satır içi yaklaşımla aynı şekilde başvurulur.

SVG Semboller Ne Zaman Kullanılır

SVG sembol spriteleri, projenizin font ikonlarının sağlayamayacağı yeteneklere ihtiyaç duyduğunda doğru seçimdir:

  • Çok renkli ikonlar — ikonlar birden fazla renk, gradyan veya tek glif fontun temsil edemeyeceği karmaşık dolgular kullandığında
  • Erişilebilirlik en önemli önceliktir — her ikon, ekran okuyuculara anlamlı açıklamalar sağlayan bir <title> öğesi ve aria-label özniteliği içerebilir
  • Animasyonlu ikon parçaları — bir ikon içindeki bireysel yolları veya grupları canlandırmanız gerektiğinde (örn. ayarlar ikonunun içinde dönen bir dişli)
  • SVG yoğun projeler — uygulamanız zaten satır içi SVG'yi kapsamlı biçimde kullanıyorsa semboller mevcut mimariye doğal olarak uyar
  • Maksimum oluşturma keskinliği — font hinting küçük boyutlarda hizalama sorunlarına neden olabilir; SVG sembolleri her boyutta piksel mükemmeliyetinde oluşturulur

Font İkonlarında Kalmak Ne Zaman Daha İyi

Font ikonları birçok yaygın senaryoda daha iyi seçim olmayı sürdürür:

  • Büyük ikon setleri (200+) — sıkıştırılmış bir WOFF2 font dosyası, aynı sayıda ikon içeren bir SVG spriteinden önemli ölçüde küçüktür
  • Tüm tek renkli ikonlar — her ikon tek renkse, font ikonları hiçbir ödün vermeden en basit entegrasyonu sağlar
  • Yalnızca CSS entegrasyonu — font ikonları için yalnızca bir stil sayfası bağlantısı ve CSS sınıfları gerekir; JavaScript veya ek işaretleme gerekmez
  • Eski sistemler — zaten ikon font kullanan projeler, geçişi haklı kılacak kadar fayda sağlamaz
  • Sözde öğe desteği — yalnızca font glif'leriyle çalışan ::before veya ::after sözde öğelerinde ikonlara ihtiyaç duyduğunuzda
Bobcorn'da
Bobcorn, ikonlarınızı font dosyalarının yanı sıra JS sembol sprite dosyası olarak dışa aktarabilir. Dışa aktarma iletişim kutusundaki JS seçeneğini etkinleştirin. Oluşturulan dosya, yüklendiğinde tüm sembolleri kaydederek satır içi bir SVG sprite oluşturur. Aynı projede her iki yaklaşımı da kullanabilirsiniz — basit UI ikonları için fontlar, karmaşık renkli illüstrasyonlar için semboller.
İpucu
Birini seçmek zorunda değilsiniz. Birçok tasarım sistemi, tek renkli UI ikonlarının büyük kısmı için font ikonlarını (düğmeler, gezinme, form öğeleri) ve bir avuç çok renkli illüstrasyon veya animasyonlu ikon için SVG sembollerini kullanır. Bobcorn'un dışa aktarma iletişim kutusu tek bir dışa aktarmada her ikisini de oluşturmanıza olanak tanır.