Uyarlanabilir site simgesi oluşturma

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.

MacOS sistemindeki açık ve koyu tema değişikliklerine uyum sağlayan tarayıcı sekmeleri gösterilmektedir. 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 .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. 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.

Açık ve koyu renkli favicon örnekleri.

Her tarayıcıda, uyarlanabilir simgenin üstten alta genel görünümünü sunan açık ve koyu sekmeler: Safari, Firefox, Chrome.
Her tarayıcıda, uyarlanabilir simgenin üstten alta genel görünümünü sunan açık ve koyu sekmeler: Safari, Firefox, Chrome.

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'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:

favicon için arama yapılan bir filtrenin bulunduğu ve favicon.svg kaynağının vurgulandığı DevTools&#39;daki Ağ bölmesinin ekran görüntüsü.

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>

Açık temalı favicon önizlemesi örneği.

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>

Koyu tema medya sorgusunun, SVG&#39;nin göz ve burunlarının dolgu renginin üzerine yazdığını gösteren DevTools ekran görüntüsü.

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>

Koyu temalı favicon önizlemesi örneği.

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.

Hem açık hem de koyu renkli favicon&#39;ların yan yana önizlemesi.

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.

Topluluk remiksleri