Simgeler

Çoğu resim içeriğinizin bir parçasıdır, ancak simgeler kullanıcı arayüzünüzün bir parçasıdır. Bunlar, kullanıcı arayüzünüzdeki metinler ile aynı şekilde ölçeklendirilip uyarlanmalıdırlar.

Ölçeklenebilir Vektör Grafiği

Fotoğrafik görüntüler söz konusu olduğunda resim biçimi için JPG, WebP ve AVIF gibi birçok seçenek mevcuttur. Fotografik olmayan görüntüler için Taşınabilir Ağ Grafiği (PNG) biçimi ve Ölçeklenebilir Vektör Grafiği (SVG) biçimi arasında seçim yapabilirsiniz.

Hem PNG'ler hem de SVG'ler, düz renkli alanlarla başa çıkmada başarılıdır ve resimlerinizin şeffaf arka planlarına sahip olmasını sağlar. PNG kullanırsanız muhtemelen resminizin farklı boyutlarda birden fazla sürümünü oluşturmanız ve resmi duyarlı hale getirmek için img öğenizde srcset özelliğini kullanmanız gerekir. SVG kullanırsanız varsayılan olarak yanıt verir.

PNG'ler (ve JPG'ler, WebP ve AVIF) bit eşlem resimlerdir. Bit eşlem resimleri, bilgileri piksel olarak depolar. SVG'de bilgiler, çizim talimatları olarak depolanır. Tarayıcı, SVG dosyasını okuduğunda talimatlar piksele dönüştürülür. En iyi yanı da, bu talimatların ilgili talimatlar olmasıdır. Çizgileri ve şekilleri tanımlamak için kullandığınız boyutlardan bağımsız olarak, her şey doğru netlikte oluşturulur. Farklı boyutlarda birden fazla SVG oluşturmak yerine, tüm boyutlarda çalışan bir SVG oluşturabilirsiniz. srcset özelliğini kullanmanıza gerek yoktur.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

SVG dosyasında talimatları yazmak için XML kullanılır. Bu, HTML gibi bir biçimlendirme dilidir.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

SVG'yi HTML içine bile yerleştirebilirsiniz.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

Bu şekilde bir SVG yerleştirirseniz tarayıcının yapması gereken istek bir kez daha az olur. Resim, HTML'nin içinde HTML ile birlikte geldiğinden resmin indirilmesi gerekmez. Ayrıca, yakında öğreneceğiniz gibi SVG'leri bu şekilde yerleştirmek, bunların stilini belirleme konusunda da size daha fazla kontrol sağlar.

Simgeler ve metin

Simge resimleri genellikle şeffaf bir arka plan üzerinde basit şekiller içerir. SVG, simgeler için idealdir.

Metin ve içinde simge bulunan bir düğme veya bağlantı varsa simge sunum amaçlıdır. Önemli olan metindir. Bir img öğesi kullanılırken boş alt özelliği, resmin sunulu olduğunu gösterir.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

CSS sunum amaçlı olduğundan, simgeyi CSS'nize arka plan resmi olarak yerleştirebilirsiniz.

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

SVG'yi HTML'nizin içine yerleştirirseniz, yardımcı teknolojiden gizlemek için aria-hidden özelliğini kullanın.

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

Bağımsız simgeler

Amaçlarının net olmasını istiyorsanız düğmelerinizin ve bağlantılarınızın içinde metin kullanın. Bir simgeyi metin olmadan kullanabilirsiniz, ancak herkesin belirli bir simgenin anlamını anladığını varsaymayın. Şüpheye düştüğünüzde gerçek kullanıcılarla test edin.

Yanında metin bulunmayan bir simge kullanmaya karar verirseniz simge artık gösterilemez. CSS'de arka plan resmi, simgeyi görüntülemek için uygun bir yol değildir. Simgeye HTML'de erişilebilir bir ad verilmesi gerekir.

img öğesi kullanırsanız simge, erişilebilir adını alt özelliğinden alır.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

Diğer bir seçenek de bağlantının veya düğmenin kendisine erişilebilir adı yerleştirmek ve resmin sunum amaçlı olduğunu beyan etmektir. Erişilebilir adı sağlamak için aria-label özelliğini kullanın.

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

SVG'yi HTML'nizin içine yerleştirirseniz, erişilebilir bir ad vermek için bağlantı veya düğmede aria-label özelliğini ve simgede aria-hidden özelliğini kullanın.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

Simgelerin stilini belirleme

SVG simgelerinizi doğrudan HTML'nizin içine yerleştirirseniz bunların bölümlerine, sayfanızdaki diğer öğeler gibi stil uygulayabilirsiniz. Simgelerinizi görüntülemek için img öğesi kullanırsanız bunu yapamazsınız.

Aşağıdaki örnekte, düğme metni stilleriyle eşleştirmek için SVG içindeki rect öğelerinde fill blue değeri bulunmaktadır.

button {
 color: blue;
}
button rect {
  fill: blue;
}

hover ve focus stillerini de uygulayabilirsiniz.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

Kaynaklar

• CSS'nizde arka plan resimleri olan SVG'lerin stilini ayarlamanız gerekiyorsa Una'nın SVG arka planlarını renklendirme ile ilgili makalesini okuyun.
• Sara Soueidan, erişilebilir simge düğmeleri hakkında yazmış.
• Scott O'Hara, erişilebilir resim ve SVG'leri içeriğe dayalı olarak işaretleme hakkında yazmıştır.
• SVG'leri dışa aktarmak için bir grafik tasarım aracı kullanıyorsanız sonucu optimize etmek üzere SVGOMG'yi kullanın.

Simgeler, sitenizin marka öğelerinin önemli bir parçasıdır. Ardından, temanın gücüyle markanızın diğer yönlerini duyarlı hale getirmeyi öğreneceksiniz.

Öğrendiklerinizi sınayın

Simgeler hakkındaki bilginizi test edin