SVG Font

Orijinal vektör font formatı — SVG yollarını font glif'lerine eşleyen insan tarafından okunabilir XML.

.svg SVG Font Formatı
TürXML tabanlı vektör
SıkıştırmaYok (düz metin)
Dosya BoyutuTüm formatlar arasında en büyük
DestekYalnızca Safari (diğerlerinde kullanımdan kaldırıldı)
En İyi KullanımHata ayıklama, kaynak format
BobcornHat kaynağı

SVG Font Nedir?

SVG fontları, W3C tarafından yayımlanan SVG 1.1 spesifikasyonunun bir parçası olarak tanımlanmıştır. Geleneksel ikili font formatlarının aksine, SVG fontları gliph konturlarını bir <font> öğesinin içinde SVG yol verisi olarak gömülü halde saklar. Her gliph, şekli tanımlayan vektör yolunu içeren d niteliğine sahip bir <glyph> öğesiyle temsil edilir.

Özünde, SVG fontları font olarak paketlenmiş SVG çizimleridir. Bir SVG dosyasında şekil çizmek için kullandığınız yol sözdiziminin aynısı, harf biçimleri ve ikon konturlarını tanımlamak için yeniden kullanılır. Bu, onları benzersiz biçimde incelenebilir kılar — bir SVG fontunu herhangi bir metin düzenleyicisinde açabilir ve her glifin gerçek geometrisini okuyabilirsiniz.

Nasıl Çalışır

Bir SVG font dosyası, gliph yollarını standart bir XML yapısı içinde sarmalar. İşte basitleştirilmiş bir örnek:

SVG Font yapısı 
<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

<font-face> öğesi, font ailesi adını ve koordinat sistemini (units-per-em) bildirir. Her <glyph>, bir Unicode kod noktasını vektör yoluyla eşleştirir. d niteliği, normal bir SVG <path> öğesiyle tamamen aynı yol sözdizimini kullanır.

Bu, Bobcorn'un hattındaki ara formattır. Bireysel SVG ikonları önce bu SVG font yapısında birleştirilir; bu yapı daha sonra ikili formatlara dönüştürülür: SVG Font → TTF → WOFF / WOFF2 / EOT.

Artılar ve Eksiler

    Artılar
  • İnsan tarafından okunabilir — herhangi bir metin düzenleyicisinde açılır
  • Gliph yollarını ve meta verileri hata ayıklamak kolay
  • Tamamen vektör tabanlı, sonsuz ölçeklenebilirlik
  • Kaynağı görüntülemek için derleme gerekmez
    Eksiler
  • Tüm font formatları arasında en büyük dosya boyutu
  • Chrome, Firefox ve Edge'de kullanımdan kaldırıldı
  • Hiçbir sıkıştırma yok
  • Hinting desteği yok
  • Windows'ta düşük oluşturma kalitesi

Tarayıcı Desteği

SVG font desteği çoğu büyük tarayıcıdan kaldırılmıştır. Chrome, SVG font desteğini 38. sürümde (2014) bıraktı. Firefox hiç uygulamadı. Chromium tabanlı Edge de desteklemiyor. Tek kalan istisna, SVG fontları hâlâ destekleyen Safari ve iOS Safari'dir.

Pratik web kullanımı için SVG Font esasen eski bir formattır. Son kullanıcılar için asla bir dağıtım formatı olarak güvenmemelisiniz. Bunun yerine WOFF2 kullanın.

SVG Font Ne Zaman Kullanılır

  • Font oluşturma sorunlarını hata ayıklarken — düz XML olduğundan, yol verilerini doğrudan okuyabilir ve sorunları teşhis etmek için orijinal SVG ikonlarıyla karşılaştırabilirsiniz.
  • Derleme hatlarında kaynak format olarak — birçok font oluşturma aracı (Bobcorn dahil) ikili formatlara dönüştürmeden önce SVG Font'u ara temsil olarak kullanır.
  • Eski iOS < 5 desteği — günümüzde son derece nadir, ancak WOFF desteğinden önceki eski iOS cihazları web fontları için yalnızca SVG fontları kullanabiliyordu.
Bobcorn
Bobcorn'da SVG Font, oluşturma hattının ilk adımıdır. SVG ikonlarınız bir SVG font yapısında bir araya getirilir, ardından TTF'e dönüştürülür ve oradan WOFF, WOFF2 ve EOT'a aktarılır. Hata ayıklama amacıyla SVG Font dosyasını dışa aktarabilirsiniz — bir gliph yanlış göründüğünde ve ham yol verilerini incelemeniz gerektiğinde özellikle kullanışlıdır.