https://www.halilbeycan.com/274.gif

SVG mi İcon Font (Web Font)’mu Karşılaştırma

447
8 ay önce
 0

Günümüz web site tasarımında icon’ların kullanımı çok yaygındır bu makalemde SVG mi İcon Font (Web Font)’mu bu iki grafik özelliğinin karşılaştırmasını yapacağız.

Simgelerin Gelişimi

Eskiden resimler kullanılırdı ama resim boyutları çok büyük olduğu için ve sitenin performansını düşürdüğü için geliştiriciler CSS Sprite adın’da bir yöntem geliştirdiler.

Bu yöntemi de şu şekilde kullanılıyordu kullanılacak bütün resimler bir resim haline getiriliyordu.

Ve CSS de background-position ile resim sağa sola kaydırılarak istenilen resmin gözükmesini sağlıyorlar’dı aşağıdaki örnekte görebilirsiniz.

CSS Sprite
CSS Sprite

2012 de ise icon fontlar’ı sahneye çıkıyor icon fontları kısaca css ile değiştirilebilen metinlerdir ve bu sayede resimlerden daha iyi ölçeklenirler yani istediğiniz boyuta getirebilirsiniz ve görüntü kalitesi bozulmaz. Örnek olarak font awesome kütüphanesi.

icon-font
icon-font

Tahminimce bu makaleyi okumaya gelen kişi svg’nin ve icon font’un ne olduğunu biliyordur o yüzden bunlara değinmek yerine direk karşılaştırmaya geçiyorum.

SVG vs İcon Font (Web Font)

Karşılaştırmamızı 7 kategori altında yapacağız bu kategoriler sırasıyla boyut, performans, esneklik, tarayıcı desteği, ölçeklenebilirlik, konumlandırma ve erişilebilirlik,

1-Boyut

SVG’leri satır içlerinde kullanılabilir ama çok fazla kullanılınca kodu karmaşık hale getirir ve SVG’ler tarayıcı tarafından ön belleğe alınamaz lakin harici SVG dosyaları tarayıcı tarafından ön belleğe alınabilir.

Eğer bir sayfada çok sayıda simge var ise icon fontları SVG’lere göre daha kullanışlı bir çözüm olacaktır.

Öte yandan icon fontlarının hepsini kullanmayacağınız için kullanmadığınız icon fontları boşa kaynak tüketimi yapacaktır.

Boyut konusuna açıklık getirecek olursak optimize edilmiş SVG dosyaları küçük bir alana ve kaynak tüketimine sahip olacaktır.

Lakin icon font’da ise sadece kullanacağınız iconları barındırıyor iseniz icon font kullanımı SVG’ye nazaran daha küçük bir alana ve kaynak tüketimine sahip olacaktır.

2-Performans

İcon fontlar tarayıcı tarafından ön belleğe alınabildiği için doğrudan hızlı bir yükleme gerçekleştirir ama ek bir HTTP isteği oluşturduğu için performansı biraz düşürecektir.

SVG’ler tarayıcı tarafından ön belleğe alınamaz ama satır içinde kullandığınız zaman ek bir HTTP isteği oluşturmaz.

Eğer SVG’lerinizi harici bir dosyada tutarsanız SVG’lerinizin’de tarayıcı tarafından ön belleğe alınmasını sağlayabilirsiniz.

Performans açısından olaya bakacak olursak hız konusunda etken olan nokta aralarındaki boyut farkı olacaktır.

3-Esneklik

Her iki simge türünü’de CSS ile şekillendirebilirsiniz ama İcon Fontlar satır içi SVG’lere göre size daha çok renk gölgelendirme gibi imkanlar sunabilir.

4-Tarayıcı Desteği

Hangi simge türünü seçerseniz seçin eski tarayıcılarda uyumlu çalışması biraz uğraşmalısınız. İcon Fontlar SVG’lere göre daha eskiye dayandığı için SVG’lere nazaran daha fazla desteklenir.

Tarayıcı Desteği
Tarayıcı Desteği

Detayları Can İ Use aracını kullanarak öğrenebilirsiniz.

5-Ölçeklenebilirlik.

Aslında ikisinin tabanı’da aynı yani vektör tabanlı olmasına rağmen tarayıcılar icon fontlarını metin olarak tanımlarlar ve bu yüzden kenar yumuşatma işlemine maruz kalırlar.

Bu sebeple sizde bu iconları tam net göremezsiniz SVG ler ise daha net ve daha canlı görünürler.

6-Konumlandırma

İcon Fontlar’ı SVG’lere kıyasla konumlandırmak biraz zor olabilir çünkü gerçek glifi(ne olduğunu merak ediyorsanız tıkayın) kusursuz bir şekilde yerleştirmek için sıra, çizgi yüksekliği, dikey hiza ve harf aralığını göz önünde bulundurmanız gerekir.

SVG’ler için ise sadece boyutu ayarlamanız yeterlidir.

7-Erişilebilirlik

İcon Fontlar’ından farklı olarak SVG’ler yerleşik olarak anlamsal algılanabilir öğelere sahiptir bu nedenle icon fontlarınız ekran okuyucularına erişilebilir kılmak için herhangi bir çözüm eklemeniz gerekmez.

Kaynaklar

Yazar
{beycan1532@gmail.com}

Merhaba ben Halil Front-end developer ve wordpress tema geliştiricisiyim bilgisayara olan ilgim 10. yaşlarıma dayanmakta. 15-16 yaşlarımda bilgisayar kullanmayı iyice çözdüm ve programlamaya ilgi duymaya başladım ilk olarak visualbasic.net ile kendi çapımda kendim için programlar geliştirdim zamanla web'e ilgi duydum ve internet sitesi kurmak istedim tabi hosting domain bilmediğim için bedavasitem ve wix gibi siteler ile yapmıştım bunu ama sürekli araştıran öğrenen ve kendini geliştiren biri olduğum için kısa süre sonra domain ve hosting'in ne olduğunu öğrendim sonra ilk .com'lu sitemi açtım o sırada wordpress ile tanıştım zaten programlamaya ilgimin olması sayesinde wordpress için tema geliştirmek istedim ve ilk wordpress temamı hazır bir html şablonu wordpress'e entegre ederek hazırlamıştım sonrasında ise html, css ve js öğrenerek kendimi geliştirdim ve şuan müşterilim için front-end development ve wordpress tema geliştirme işleri yapıyorum.

Yorumlar (Yorum yapılmamış)

    Yorum Yapmak İstemezmisiniz.

Bir cevap yazın

Zorunlu Alanlar "*" İle İşaretlenmiştir