Alışveriş sepetiniz şu an boş
Tüm eğitimlere göz atarak ilgi duyduklarını sepetine ekleyebilirsin.
Makaleler
İ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ı derledik.
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 içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç.
Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
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.
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.
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.
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..
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.
Tebrik ederim güzel bir yazı olmuş. Yukarıda iki kullanımın arasındaki farklılıklardan bahsetmişsiniz, artılar ve eksiler. Bizlere de kullanacağımız yere göre seçim yapmak kalıyor.