Bir web projesi aldınız. Tasarım rehberinde bulunan ikonlar size bırakılmış. Hazır bir set, ikon web servisleri yada kendinize ait bir tasarım seti kullanabilirsiniz. Fakat bunları hangi formatta siteye ekleyeceksiniz? Eskiden olsa cevabı basitti, resim dosyası olarak. Bir JPG, PNG yada GIF yaparak ekleyebilirdiniz. Hatta sprite yaparak ikonlarınızın tek bir dosya ile yada birkaç dosya ile tüm site ikonlarının yüklenmesini sağlayabilirdiniz. Fakat artık hayatımıza giren iki güzel teknoloji var; ikon yazı tipleri (icon fonts) ve ölçeklenebilir vektör grafikleri (SVG). Peki hangisini kullanmalıyız?
Her iki teknolojinin kullanıldığı yere göre artıları ve eksileri var. Bunları sıralayacak olursak;
Geliştirme Süreci
İkon Yazı Tipleri: Geliştirme sürecinde en hızlı kullanılabilecek teknolojidir. Tek bir yazı tipi dosyası -font dosyası- ile tüm ikonları siteye eklemiş olursunuz. Bu işlemi ister @font-face ile yapmış olun, istersenizde bir web servisinden faydalanarak yapın, her iki yöntemde de tek bir dosya ile tüm ikonlarınızı yüklemiş olursunuz. Örnek vermek gerekirse, Font Awesome servisi en iyi örnek olacaktır buna.
SVG: Aynı imaj dosyası ekler gibi, CSS arkaplanlarında, taglar aracılığı ile, img ile yada direkt HTML içine ekleyerek çalıştırabiliyoruz. Çağırılan dosya boyutuna göre -ki genelde düşük boyutlu olurlar- bir istek gönderilmesi gerekir her ikon yüklenmek istenildiğinde. Eklediğiniz ikonlara göre bu dosya sayısı çok artabilir. Bu da size bir çok dosya eklemeniz anlamına gelebilir. Klasik imaj ekleme yöntemine oldukça benzer bir yapıdan bahsediyoruz ne yazık ki.
Burada kazanan: İkon Fontlar – Hızlı geliştirme.
Çok Yönlü Kullanım
İkon Yazı Tipleri: Tek tip ikon kullanımlarında uygun olan ikon yazı tipleri ile rengarenk bir ikon yapmanız mümkün değildir. Sadece basit ikonların kullanımı için uygun olan ikon yazı tipleri, size alabildiğine bir özgürlük sunmaz ne yazık ki. Yapılabilecek olan ikonlar önceden bellidir, bunlardan birini seçer kullanırsınız. Gradyanlı, içi içe geçmiş rengarenk ikonlar yapmanıza olanak tanımaz.
SVG:
Ayrı ayrı dosyalar halinde yüklenildiklerinden, her dosyanın kendi tasarımı olabiliyor. Her dosyaya yani ikona ayrı renkler, gradyanlar ve imajlar ekleyebilirsiniz. Birden fazla renk, degradeler, CSS özellikleri ve SVG filtreleri uygulamanıza izin verirler. Bu sayede büyük bir özgürlüğümüz vardır. İstenilen tasarım her neyse onu kullanabilir, özgün tasarımlar kullanabiliriz.
Burada kazanan: SVG – Özgür tasarımlar.
Performans
İkon Yazı Tipleri: Yazı tipi dosyası olduklarından çok küçük bir dosyayı yükleyerek tüm sitenin fontlarını yüklemiş olursunuz. Sürekli olarak bir HTTP isteği gerekmez. İkon yazı tiplerinin belkide en büyük artısı performansdır.
SVG: Boyutuna ve sayfadaki sayılarına göre yüklenme süreleri değişir. Fakat her halükarda birden fazla dosya yükleneceğinden, bu dosyaların boyutlarınında yazı tipi dosyasının boyutundan daha yüksek olacağından ve bir tane değil, birkaç tane dosya gerekeceğinden, performansda düşmeler yaşanacaktır.
Burada kazanan: İkon Yazı Tipleri – Büyük performans farkı
Render Aşaması
İkon Yazı Tipleri: Yazı tipi olduklarından, tarayıcılar tarafından yazı tipi olarak görüntülenirler. Bunun hiçbir zararı yoktur fakat bazı durumlarda anti-aliasing değerlinin kontrol edilip, gerekli ise normalize edilmelidir. Render aşamasında yüklenen boyut çok düşük olacağından istek çok hızlı bir şekilde cevaplanır.
SVG: Tarayıcılar tarafından, vektör çizimi olarak algılanır. Bu sebeple anti-aliasing ile ilgili bir ayara gerek olmaz. Tabi SVG desteği olan tarayıcılarda geçerli bu bahsettiğimiz. Eğer tarayıcı SVG’nin ne olduğundan bi haberse işler değişebilir.
Burada kazanan: İkon Yazı Tipleri – Hızlı yüklenme.
Tarayıcı Desteği
İkon Yazı Tipleri: İkon yazı tipleri birer font yani yazı tipi olduklarından, tüm tarayıcılar tarafından desteklenir ve hiçbir sorun çıkartmaz. Cross-browser için biçilmiş kaftandır. Düşünün IE6 da bile desteklenmektedir. Sadece Opera Mini ile desteklenmemekte fakat yakın bir zamanda Opera Mini tarafından da desteklenmesi beklenmektedir. Opera Mini kullanan kaç kişi olduğunuda hesaba katarsak, bunun çok sorun olmadığını düşünüyorum.
SVG: Ne yazık ki SVG için aynı şeyleri söyleyemeyeceğiz. SVG, sadece modern tarayıcılarda desteklenen bir teknolojidir. Yeniliğe açık olmayan, sürekli kendi tarayıcısını kullandırtmaya çalışan sistemlerde sorun çıkartır. ie6, ie7, i8 ve daha aşağısı sürümlerde SVG desteklenmemektedir. Mobil sürümlerde ise Android 4.3 versiyonu altında desteklenmemektedir.
Burada kazanan: İkon Yazı Tipleri – Tüm tarayıcılar tarafından desteklenme
Sonuç olarak
Her iki teknolojininde artıları ve eksileri var. En önemli ve belirleyici fark ise, teknolojilerin kullanım yerleri ve amaçları. Örneğin, eğer orjinal bir tasarım yapıyorsanız, klasik ikonlar değil, tüm ikonları siz tasarlıyorsanız ve bu ikonlar tek renk değilse tercihiniz SVG’den yana olmalı. SVG size çok yönlü, özgür ve esnek bir tasarım şansı sunacaktır. Fakat çok fazla kullanmamanız gerekebilir çünkü performans sorunları yaşanabilir. Aynı zamanda tarayıcı desteğinide unutmamalıyız. Eğer ie8 ve altındaki ie sürümlerine destek verilmesi gerekiyorsa, SVG’yi unutun.
Eğer ikonlarınızda ekstra renkler, degradeler ve ekstra özel tasarımlar yapmayacaksanız, sizin için önemli olan performans ise doğru yerdesiniz ikon yazı tipleri tam size göre. Özgür tasarımlar yapabilmeniz için font yapmak uygulamalarını kullanarak kendi özgün tasarımlarınızı yapabilir, ardından bunları font yapabilirsiniz fakat bu uzun bir süreç demektir. O yüzden çok özgür değilsiniz diyebiliriz. Fakat çok hızlı bir şekilde sisteme ekler, çok hızlı kullanabilir ve çok performanslı çalıştırabilirsiniz sitenizi.
Kısacası, eğer renkli, degradeli ikonlar istiyorsanız SVG, yok ben tek renk ikonlar kullanacağım diyorsanız ikon yazı tipi kullanmalısınız. İkon yazı tiplerinde gradyan yapabilmek için CSS gradient ile gradyan yapabilirsiniz fakat birçok tarayıcı tarafından desteklenmeyebilir.
Ben ne yapıyorum?
Ben projelerde ikon yazı tipi kullanmaya özen gösteriyorum. Hem performans açısından çok iyi hemde sürekli güncellenebilen web servisleri var. Web projesine bir ikon yazı tipi ekledikten sonra, istenen yerlere ikonları yerleştiriyorum. Eğer bana ekstradan bir tasarım gelmişse, örneğin birkaç yerde kullanılmak üzere bir ikon yada logo, işte bunları SVG yada sprite olarak kullanıyorum. Bu yöntemi tavsiye ederim. Bu sayede sadece istenen yerde bir yada iki dosya yükletmiş oluyorum. Diğer standart tüm ikonlarım için ise tek bir dosya yükletmiş oluyorum.
İkon Yazı Tipi mi SVG mi
Metin Yılmaz