Uyarlanabilir site simgesinin nasıl oluşturulacağına dair temel bir genel bakış.
Bu gönderide, kullanıcılarla uyarlanabilir site simgesi oluşturma SVG. Demoyu deneyin.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Genel Bakış
Özel site simgesi
bir web projesini geliştirmenin harika bir yoludur. Masaüstü tarayıcı sekmelerinde görüntülenir ve
"daha sonra kullanmak üzere kaydet" sitenize bağlantı veren diğer blog yayınları ve
daha fazla. Geleneksel olarak bu işlem .ico dosya türüyle yapılıyordu, ancak yakın zamanda
tarayıcı
Bir vektör biçimi olan SVG. Kullanım
progresif
geliştirme
iyi desteklenen .ico site simgeleri sunabilir ve aşağıdaki durumlarda .svg sürümüne geçebilirsiniz
kullanılabilir.
SVG, değişime gerek kalmadan yukarı ve aşağı ölçeklendirilebilir. çok küçük olabileceği için kalite kaybı da yerleştirilmiş medya sorguları bile olabilir. Bu, SVG site simgesi kullanıldığında yer işareti çubuklarına yerleştirilen bir kullanıcının görsel olarak takip ettiği bir tema sağlanan koyu renk tercih stilleri nedeniyle, alakalı (açık veya koyu) simge SVG. Daha sonra SVG, açık ve koyu renkli kullanıcılara göre yerleşik stilini kullanarak uyum sağlar. tercihler.
Brüt kar
SVG işaretlemesi:
XML:
Daha fazla dinamik türde dosya barındırmasına olanak tanıyan bir .svg dosya türü uzantısı
girin.
favicon.svg yaparak 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ı burada bulabilirsiniz. viewBox öğesini çizimimle alakalı olarak 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. Genellikle bu, SVG'nin bir kod düzenleyicide açılması anlamına gelir ancak o kod genellikle insanlar için uygun değildir. İşte size size yol gösterecek harika bir rehber dışa aktarıp optimize ederek tasarım araçları.
Bu GUI Meydan Okuması ile ilgili poster yayınlandı Adobe'de bunu yapan bir tasarımcıdan Illustrator. Çok fazla optimize etmeye başladım. SVGOMG üzerinden çalıştırdım. ve gereksiz olan kısmı manuel olarak düzenledim.
Benimki temizleme işleminden sonra skull poster yol grubu örneğini burada bulabilirsiniz
şunları sağlar:
<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>
İnsan tarafından okunabilen ID değerine dikkat edin
seçiciler
#eyes-and-nose ve
sınıflar gibi
.favicon-stroke. Bunlar, CSS hazırlığı için elle yaptığım düzenlemeler.
SVG'nizin uyarlanabilir site simgesi olması için sınıf ve kimlik eklemeniz gerekmez.
HTML'deki site simgesi SVG'sini bağla
HTML'nizin <head> etiketinde, .ico site simgesinin ardından 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 bunun
kullanılır. Geliştirici Araçları'nın Ağ panelini açın. Görsellere göre filtrele ve ara:
site simgesi:
Stiller
HTML gibi, buna karşı kullanmak üzere işaretlemeye bir <style> etiketi ekleyebilirsiniz
doküman kapsamı:
<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. İlgili içeriği oluşturmak için kullanılan çoğunlukla fırça ve dolgu renkleri olan stiller:
<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>
Sonraki en eğlenceli kısım olan site simgenizin koyu tema versiyonuna stil vermek. İlgili içeriği oluşturmak için kullanılan stil etiketi içindeki bir medya sorgusuna girecekse şunları içeren bir stil kullanabilirsiniz:
<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 şöyle çıktı:
<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ı güzel ve koyu bir griyle (#343a40) değiştirmeyi seçtim
kafatası kemiği rengi beyazdan açık griye (#adb5bd) değiştirildi, ancak
ve pembe vurgulu şapkayı bıraktım.
Sonuç
Şimdi bunu nasıl yaptığımı öğrendiğinize göre siz nasıl ‽ 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup beni tweet'le bağlantıları eklerim aşağıdaki topluluk remiksleri bölümüne gidin!