Uyarlanabilir bir favori simgesi oluşturmaya genel bakış.
Bu yayında, SVG ile uyarlanabilir bir simge oluşturma konusundaki 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 bir favicon, web projesini mükemmelleştirmenin mükemmel bir yoludur. Bu simge, masaüstü tarayıcısı 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 .ico
favicon'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. Bu, 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örebileceği anlamına gelir. 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ğıdakileri 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.
Aşağıda, temizledikten sonra kendi skull
poster yolu grubuma dair bir örnek verilmiştir:
<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 yaptığım manuel düzenlemelerden alınmıştır.
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 şunları 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'de olduğu gibi, işaretlemeye ilgili belge kapsamıyla kullanılacak 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ü, favicon SVG'min varsayılan rengi olacaktır. Bunun için 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 şapkayla ilgili bir değişiklik yapmadım.
Sonuç
Bunu nasıl yaptığımı öğrendiğinize göre, siz ne yapardınız? 🙂
Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturun, bağlantılarını bana tweetleyin. Ardından, aşağıdaki topluluk remiksleri bölümüne ekleyeceğim.