İkon fontları mı, SVG ikonlar mı?

İkon fontları mı, SVG ikonlar mı?

Web arayüzlerinde vektörel ikonlar kullanmamızı sağlayan iki yöntem var: ikon font ve SVG kullanımı. Font ikonlar kullanımı son yıllarda oldukça yaygın bir yöntem. İster kendi oluşturduğunuz ikonları ister internetten elde edebileceğimiz ikonları derleyip, ikon font dosyalarına dönüştürmemizi sağlayan birçok araç var. Ancak son zamanlarda, tarayıcılardaki gelişmelerle birlikte SVG kullanımı daha yaygın hale gelmeye başladı. Bu yazımda, font tabanlı ve SVG formatlı ikonların kullanımlarındaki avantajları ve dezavantajları derledim.

İkonlar, bir dijital arayüz tasarımı sürecinin olmazsa olmazları arasında sayılabilir; hatta bazen yüzlercesiyle uğraşmak durumunda bile kalabilirsiniz. İkonları kullanıma hazırlamak için eski ya da yeni birkaç seçeneğimiz var. Önceleri, ikon kütüphaneleri oluşturmak için CSS Sprite yöntemine başvuruyorduk. Ancak ekran çözünürlükleri arasındaki farklılıkların neden olduğu sorunlar ve CSS-SVG kullanımındaki gelişmelerle, artık daha iyi sonuç elde edebilmek için imaj kullanımı yerini vektörel ikonlara bıraktı.

Vektörel ve imaj tabanlı ikonların farkları

Daha önceden sıkça kullanılan CSS Sprite yönteminin getirdiği zorlukları şu şekilde sıralayabiliriz:

  • İkonların farklı piksel oranlarına sahip cihazlarda bozuk görünmesi,
  • Farklı oranlara göre (@2x ve @3x gibi) görsellerin hazırlanması mecburiyeti,
  • Aynı ikonların farklı boyut ve renk alternatifleri için birden fazla versiyonunun hazırlanması ihtiyacı,
  • Herhangi bir güncelleme yapıldığında, yapılan işlemin ve/veya yeni eklenen ikonların, diğer tüm ikonları etkilemesi riski.

Bu ve buna benzer dezavantajlar, ekstra zaman harcamaya ya da iş gücü kaybına sebep oluyorlardı ve vektörel ikonlara göre, görüntü kalitesi açısından da çok daha kötü bir sonuç veriyordu.

Vektörel olarak hazırlanan ikonların ise birçok avantajı var:

  • Çözünürlük kaybı olmadan boyutlandırılabiliyor olması,
  • Retina ekranlarda yüksek kaliteli görünüm sağlaması,
  • Dosya boyutları çok daha küçük olması bunlardan bazıları.

Vektörel ikonlar nasıl hazırlanır ve kullanılır?

İkonlarınızı vektörel olarak hazırlamak istediğinizde, bunu yapmanızı sağlayacak iki yöntem var: İkon fontları ve SVG ikonlar. Kendi hazırladığınız ya da internetten bulduğunuz ikonları dilerseniz SVG formatında ayrı ayrı kullanabilir ya da kullanmak istediğiniz ikonların tümünü bir ikon font kütüphanesinde derleyebilirsiniz.

Bir ikon fontu oluşturmak için öncelikle ikonlarınızı SVG olarak hazırlamanız gerekiyor. Daha sonra da bunları, fontello, fontasticicomoon gibi bazı online araçlarla birer font dosyasına dönüştürebilirsiniz. Ancak dikkat etmeniz gereken önemli bir konu var: bir font dosyasında kullanmayı planladığınız ikonları SVG formatında oluşturmak, bazı problemlere yol açabiliyor. Kullandığınız SVG ikonları doğrudan arayüze eklediğinizde herhangi bir problem oluşturmasa bile, bu SVG’leri bir font dosyası haline dönüştürdüğünüzde, ikonlarda bazı şekil bozuklukları ortaya çıkabiliyor. Bu problemle karşılaşmamak için, daha SVG ikonlarınızı hazırlarken dikkat etmeniz gereken bazı noktalar var. Bu noktalarla ilgili detaylı bir anlatıma ulaşmak için buraya tıklayabilir, ikonlarınızı font dosyası olarak oluşturmak isterseniz, bu yönlendirmeleri takip edebilirsiniz.

SVG ve ikon fontu kullanımındaki farklılıklar

Görünüm problemleri ve CSS kullanımı

SVG kullanımı, font kullanımına göre ikonların görüntülenmesinde çok daha iyi bir sonuç verir. İkonları font haline dönüştürdüğünüzde, tarayıcılar bunu bir yazı dosyası olarak algılar ve buna göre tepki verir. İkon fontların boyutlandırılması için  font-size ve line-height gibi yazı alanları için geçerli olan CSS özelliklerini kullanmamızın nedeni de budur.

Ancak SVG kullanımı, CSS konusunda çok daha avantajlıdır. Bir ikon font kullanırken, bu bir yazı dosyası olduğu için, sadece tek renkli ikonlar elde edebilirsiniz. SVG ikonlar ise CSS ile kullanılırken, diğer CSS özelliklerinin tümünü kullanabilir; farklı renklerden oluşan ikonlar hazırlayabilirsiniz. Buna ek olarak, SVG ikonlar tercih ettiğinizde CSS animasyon özelliklerini de kullanabilirsiniz.

Tarayıcı uyumsuzlukları

Tarayıcılar bazen @font-face kullanımında problemlere neden olurlar. Özellikle fontların tanımlanmasında, bazen aynı tarayıcının farklı işletim sistemlerine göre farklı sonuçlar verdiğini görebilirsiniz. SVG ikon kullanımında ise, tarayıcılarda bu şekilde garip tepkiler almazsınız. SVG ikonlar kullandığınızda, ikonlarınızı SVG desteği olan IE9 ve üzerindeki tarayıcılarda sorunsuz bir şekilde görüntüleyebilirsiniz.

Semantik elementlerle tanımlanması

İkon font kullanımı, semantik açısından da anlamsız bir durum oluşturur. <div> ya da <span> tag’leri içerisine eklediğimiz ikonlar, bir vektör veya görsel olduğu halde, tarayıcılar tarafından ayırt edilemez. SVG ile eklenen ikonlar ise <svg> etiketiyle eklendiği için, tarayıcılar tarafından birer görsel olarak algılanır.

Erişilebilirlik sorunları

İkon fontları, engelli kullanıcıların kullandığı ekran okuyucular tarafından birer metin öğesi olarak algılanmalarına karşın içerikleri okunamadığı için, anlamsız birer element olarak tanımlanır. Bu durumda, ekran okuyucular, bu içeriği doğru şekilde seslendiremeyebilir. SVG ikonlarda ise böyle bir problem ortaya çıkmaz: SVG ikonlar, tarayıcılar tarafından birer görsel element olarak algılandığı için, ekran okuyucular tarafından okunmaya çalışılmazlar. Ayrıca SVG içerisine eklenebilen, <title> ve <desc> etiketleriyle görsel hakkında bilgiler eklenebilir.

Peki, hangisini tercih etmeli?

100$ indirim fırsatı! Springboard UX Design kurs programı 100$ indirimli! İndirim kodunu almak için giriş yap ya da kayit ol.

Bazı problemlere sebep olsa da, ikon fontları hala yaygın olarak kullanılıyor. Ancak eğer, tarayıcıların SVG içeriklerini gösterimine yönelik uyumluluk problemiyle ilgili herhangi bir kısıtınız yoksa, yukarıda saydığım riskler nedeniyle SVG kullanımı sizin için en ideal tercih olacaktır. Github’ın, sitede kullandığı ikonları neden SVG’ye dönüştürdüğüyle ilgili olarak yakın zamanda yayınladığı yazıyı da şuradan okumanızı öneririm. Yine SVG ikon kullanmayı tercih eden lonelyplanet.com ile ilgili şu yazı da bu kararı vermekte zorlananlar için faydalı olacaktır.

  • Serkan Avcı

    Güzel konu. Eline sağlık. Biz uzun düşünceler sonucu çoklu renk içeren imajlar için svg sprite, hover action, active state gibi durumları olan iconlar için ise icon-font kullanmaya karar verdik. Erişilebilirlik önemli ve büyük oranda ihmal edilen bir durum. Yüksek trafikli sitelerde öncelik genelde optimizasyonun oluyor. Sunucuya atılan sorgulardan 1 tane eksiltmek bayram havası yaratabiliyor yani doğru sprite hayat kurtarır. O mu bu mu konularında ise referans almamız gereken şey hareket değil yaklaşım, yani kendi içinde bulunduğunuz yapıya göre karar vermek ve uygulamak zorundasınız. Github’ın veya herhangi bir yapının uygulamasını sorgusuz sualsiz kabul edip uygulamak hata olur. Ölçmediğini düzgün biçemezsin.

    • Fatih Akgöze
      Fatih Akgöze

      Merhaba Serkan. Yorumun için teşekkürler. Sonda bahsettiğim iki örnek, farklı ihtiyaçlara göre izlenen iki farklı yolu örneklemek içindi. Lonelyplanet.com’da senin de bahsettiğin gibi, bir grup ikon için ikon font kullanılmışken, çoklu renk içeren ikonlarda svg sprite kullanma yoluna gidilmiş. Önemli olan önce sorunu belirlemek, sonrasında buna en uygun çözüm yolunu takip etmek her zaman çok daha iyi bir sonuç veriyor.

    • Fatih
      Fatih

      Merhaba Serkan. Yorumun için teşekkürler. Sonda bahsettiğim iki örnek, farklı ihtiyaçlara göre izlenen iki farklı yolu örneklemek içindi. Lonelyplanet.com’da senin de bahsettiğin gibi, bir grup ikon için ikon font kullanılmışken, çoklu renk içeren ikonlarda svg sprite kullanma yoluna gidilmiş. Önemli olan önce sorunu belirlemek, sonrasında buna en uygun çözüm yolunu takip etmek her zaman çok daha iyi bir sonuç veriyor.

  • Fatih Vural

    Güzel bir yazı..Elinize sağlık.. Yazının sonunda refleks olarak tabii ki hemen “bu yazıyı yayınlayan sitenin ikonları neymiş bakalım” dedim. Sonuç hüsran.. -css sprite- ve tekil png ler.. :/ Ayrıca yazının sonunda svg ye yönlendirme yerine Serkan Avcı’nın yorumundaki gibi.. -derdine göre ilaç- tavsiyesi beklerdim..

    • Fatih
      Fatih

      Merhaba. Yorumunuz için teşekkürler. Şu an blogla ilgili bir düzenleme üzerinde çalışıyoruz ve mevcut temadaki, kod kalitesi, erişilebilirlik problemleri, yüklenme sürelerinin optimizasyonu üzerine özellikle eğilerek, blogda da yazdığımız bu tavsiyeleri uygulayarak geliştiriyoruz. Geçtiğimiz aylarda websitemizi yenilemiş (http://sherpa.digital), orada da eski sitedeki css sprite kullanımından vazgeçip, font ikon kullanımını seçmiş, diğer görsellerin kullanımında da PNG-JPG veya SVG seçerken test ederek ilerlemiştik.

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

KEŞFETMEYE DEVAM ET
“Benim bugün burada olmamı bir ketçap sağladı.”

“Benim bugün burada olmamı bir ketçap sağladı.”

Gizle
İLGİNİ ÇEKEBİLİR
Düşük bütçeli online pazarlama mı?

Düşük bütçeli online pazarlama mı?

Gizle