Uyarlanabilir site simgesi oluşturmaya ilişkin temel bir genel bakış.
Bu yayında, SVG ile uyarlanabilir site simgesinin nasıl oluşturulacağıyla ilgili düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.
Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:
Genel bakış
Özel site simgesi, web projelerini
iyileştirmenin harika bir yoludur. Masaüstü tarayıcı sekmelerinde, "daha sonra kullanmak için kaydet" okuyucularının içinde, sitenize bağlantı veren diğer blog yayınlarında ve çok daha fazlasında görüntülenir. Geleneksel olarak bu işlem .ico dosya türüyle yapılmaktaydı. Ancak son zamanlarda tarayıcılar, bir vektör biçimi olan SVG'nin kullanımına izin vermiştir. Progresif
geliştirmeyi
kullanarak iyi desteklenen .ico site simgelerini sunabilir ve
varsa bir .svg sürümüne geçebilirsiniz.
SVG, kalite kaybı olmadan yukarı ve aşağı ölçeklenebilir ve boyut olarak çok küçük olabilir. Ayrıca, yerleşik CSS'ye, hatta yerleştirilmiş medya sorgularına da sahip olabilir. Yani, okuyucu uygulamasında veya yer işareti çubuklarında SVG site simgesi kullanılıyorsa, SVG içinde sağlanan koyu tercih stilleri nedeniyle kullanıcının temayla alakalı (açık veya koyu) bir simge alma ihtimali vardır. Daha sonra SVG, açık ve koyu kullanıcı tercihleri için yerleşik stilini kullanarak uyum sağlar.
Markup
SVG işaretlemesi, daha dinamik kod türlerini barındırmasına olanak tanıyan .svg dosya türü uzantısı kullanan XML'dir.
favicon.svg yaparak başlayın
favicon.svg adlı yeni bir dosya oluşturup aşağıdakileri ekleyin:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
SVG dosyamı burada bulabilirsiniz. Çizimimle alakalı viewBox boyutunu ayarladım:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Şekil ve yol ekleme
Ardından, SVG yol kodunu ekleyin. Çoğunlukla bu, SVG'nin bir kod düzenleyicide açılması anlamına gelir, ancak bu kod genellikle kullanıcıların kullanımına uygun değildir. Burada, SVG'yi tasarım araçlarından dışa aktarma ve optimize etme konularında size yol gösterecek harika bir kılavuzu bulabilirsiniz.
Bu GUI Yarışması çizimi, Adobe Illustrator'da bunu yapan bir tasarımcıdan geldi. büyük ölçüde optimize ettim. SVGOMG'de çalıştırdım ve acele olmayan öğeleri elle düzenledim.
Temizledikten sonra benimki skull poster yol grubu örneğini aşağıda bulabilirsiniz:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
#eyes-and-nose gibi okunabilir kimlik seçicilere ve .favicon-stroke gibi sınıflara dikkat edin. Bunlar, CSS için hazırlık aşamasındaki elle yaptığım düzenlemelerdir.
SVG'nizin uyarlanabilir site simgesi olması için sınıf ve kimlik eklemeniz gerekmez.
HTML'den site simgesi SVG'sini bağla
HTML'nizin <head> etiketinde .ico site simgesinden sonra aşağıdakileri ekleyin:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Yeni simge, .ico sürümüyle aynı görünebileceğinden bu sürümün kullanıldığını doğrulayın. Geliştirici Araçları'nın Ağ panelini açın. Görsellere göre filtreleyin ve site
simgesini arayın:
Stiller
HTML'de olduğu gibi, bu doküman kapsamında kullanmak üzere işaretlemeye bir <style> etiketi ekleyebilirsiniz:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
Site simgemin SVG'sinin açık tema sürümü varsayılan renklendirme olarak kullanılır. Bunun için yazdığım stiller çoğunlukla fırça ve dolgu renklerinden oluşuyordu:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
En eğlenceli kısım ise site simgenizin koyu tema sürümünün tasarımı. Bunun stilleri, stil etiketi içindeki bir medya sorgusuna gider:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
Benimki şu şekilde sonuçlandı:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
Parlak mor kenarlıkları, hoş ve koyu bir gri (#343a40) ile değiştirmeyi tercih ettim, kafatası kemiği rengini beyazdan açık griye (#adb5bd) çevirdim (#adb5bd), ama pembe vurgulu şapkayı ise boş bıraktım.
Sonuç
Nasıl yaptığımı artık bildiğine göre siz de nasıl yapardınız? 🙂
Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Bir demo oluşturun, bana tweet atın bağlantıları, aşağıdaki topluluk remiksleri bölümüne ekleyeceğim.
Topluluk remiksleri
- Bu tekniği @tomayac ile blogumuzda öğrendim