Uyarlanabilir bir favori simgesi oluşturmaya genel bakış.
Bu gönderide, SVG ile uyarlanabilir site simgesi oluşturma düşüncesini paylaşmak istiyorum. Demoyu deneyin.
Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:
Genel Bakış
Özel bir favicon, web projesini mükemmelleştirmenin mükemmel bir yoludur. Bu simge, masaüstü tarayıcı sekmelerinde, "sonra için kaydet" okuyucularında, sitenize bağlantı veren diğer blog yayınlarında ve daha birçok yerde gösterilir. Bu işlem geleneksel olarak .ico dosya türüyle yapılıyordu ancak son zamanlarda tarayıcılar vektör biçimi olan SVG'nin kullanımına izin veriyor. İlerlemeli geliştirme özelliğini kullanarak iyi desteklenen .icofavicon'lar yayınlayabilir ve varsa .svg'a geçebilirsiniz.
SVG'ler, kalite kaybı olmadan yukarı ve aşağı ölçeklendirilebilir. Ayrıca boyutları çok küçük olabilir, yerleşik CSS'ye ve hatta yerleşik medya sorgularına sahip olabilirler. Yani bir okuyucu uygulamasında veya yer işareti çubuklarında SVG favori simgesi kullanılıyorsa SVG'de sağlanan koyu tercih stilleri nedeniyle kullanıcının temaya uygun (açık veya koyu) bir simge görmesi mümkündür. Ardından SVG, açık ve koyu kullanıcı tercihleri için yerleşik stilini kullanarak uyum sağlar.
Brüt kar
SVG işaretleme, daha dinamik kod türleri barındırmasına olanak tanıyan bir .svg dosya türü uzantısı kullanan XML'dir.
favicon.svg oluşturarak başlayın
favicon.svg adlı yeni bir dosya oluşturun ve aşağıdakini ekleyin:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
SVG dosyam buradadır. viewBox öğesini posterimle alakalı şekilde boyutlandırdı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. Bu genellikle SVG'yi bir kod düzenleyicide açmak anlamına gelir ancak bu kod genellikle kullanıcı dostu değildir. Tasarım araçlarından SVG'yi dışa aktarma ve optimize etme konusunda size yol gösterecek mükemmel bir kılavuz burada verilmiştir.
Bu GUI yarışması için hazırlanan poster, Adobe Illustrator'da tasarlandı. Çok optimize ettim. Dosyayı SVGOMG üzerinden çalıştırdım ve ardından gereksiz öğeleri manuel olarak düzenledim.
Benimkini temizledikten sonra skull poster yol grubu örneğini burada 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 kullanıcı tarafından okunabilen kimlik seçicileri ve .favicon-stroke gibi sınıfları fark edin. Bunlar, CSS'ye hazırlanırken manuel olarak yaptığım düzenlemelerdir.
SVG'nizin uyarlanabilir bir simge olması için sınıf ve kimlik eklemeniz gerekmez.
HTML'den site simgesi SVG'sini bağlama
HTML'nizin <head> etiketine, .ico favori simgesi etiketinden 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üne benzeyebileceğinden, kullanıldığını doğrulayın. Geliştirici Araçları'nın Ağ panelini açın. Resimlere göre filtreleyin ve simge araması yapın:
Stiller
HTML gibi, söz konusu 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>
Açık tema sürümü, site simgesi SVG'min varsayılan renklendirmesi olacak. Yazdığım stiller çoğunlukla fırça ve dolgu renkleriydi:
<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>
Ardından, en eğlenceli kısma geçiyoruz: simgenizin koyu tema sürümüne stil uygulama. Bu stil, stil etiketindeki bir medya sorgusuna eklenir:
<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 oldu:
<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 kenarları güzel ve koyu bir gri (#343a40) ile değiştirdim, kafatası kemiği rengini beyazdan açık ve soğuk bir griye (#adb5bd) çevirdim ancak pembe vurgulu şapkayı bıraktım.
Sonuç
Şimdi bunu nasıl yaptığımı öğrendiğinize göre siz nasıl ‽ 🙂
Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Demo oluşturup beni tweet'le bağlantıları oluşturduğumda bunu aşağıdaki topluluk remiksleri bölümüne ekleyeceğim.