Simgeler

Resimlerin çoğu içeriğinizin bir parçasıdır, ancak simgeler kullanıcı arayüzünüzün parçasıdır. Bunların da kullanıcı arayüzünüzdeki metnin ölçeklendirildiği ve uyarlandığı gibi ölçeklendirilmesi ve uyum sağlaması gerekir.

Ölçeklenebilir Vektör Grafiği

Fotoğraf görüntüleri söz konusu olduğunda resim biçimi için pek çok seçenek vardır: JPG, WebP ve AVIF. Fotoğraf dışındaki görüntüler için, Taşınabilir Ağ Grafiği (PNG) biçimi ile Ö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 çıkmakta iyidir ve her ikisi de resimlerinizin şeffaf arka plana sahip olmasını sağlar. PNG kullanıyorsanı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ıyorsanız varsayılan olarak duyarlıdır.

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 göreceli olmasıdır. Çizgileri ve şekilleri açıklamak için kullandığınız boyutlardan bağımsız olarak, her şey istediğiniz netlikte oluşturulur. Farklı boyutlarda birden fazla SVG oluşturmak yerine, tüm boyutlarda çalışacak tek 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">

Talimatları SVG dosyasına 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 de 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>

Böyle bir SVG dosyası yerleştirirseniz, tarayıcının yapması gereken bu istek eksik olur. Resim, HTML'de ... olduğu için resmin indirilmesini beklemeniz gerekmez. Ayrıca, yakında öğreneceğiniz gibi, bu tür SVG'leri yerleştirmek size bunların stilini belirleme konusunda da 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.

İçinde metin ve simge bulunan bir düğme veya bağlantı varsa bu simge sunu amaçlıdır. Önemli olan metindir. Bir img öğesi kullanırken boş alt özelliği resmin sunu amaçlı olduğunu belirtir.

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

CSS sunum için 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 SVG'yi 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 anlaşılır olmasını istiyorsanız düğmelerinizin ve bağlantılarınızın içinde metin kullanın. Bir simgeyi metin olmadan kullanabilirsiniz, ancak belirli bir simgenin anlamını herkesin 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 sunu niteliğinde değildir. CSS'de arka plan resmi kullanmak, simgeyi görüntülemek için uygun bir yol değildir. Simgeye, HTML'de erişilebilir bir ad verilmesi gerekir.

Bir 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ıya ya da düğmenin kendisine erişilebilir adı koymak ve resmin tanıtım amaçlı olduğunu beyan etmektir. Erişilebilir özellikli 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 bağlantı veya düğmede aria-label özelliğini kullanarak erişilebilir bir ad verin 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'nize yerleştirirseniz bunların bölümlerine de sayfanızdaki diğer öğeler gibi stil kazandırabilirsiniz. Simgelerinizi görüntülemek için img öğesi kullanırsanız bunu yapamazsınız.

Aşağıdaki örnekte, SVG içindeki rect öğeler, düğme metninin stilleriyle eşleştirmek için fill blue değerine sahiptir.

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 hakkındaki makalesini okuyun.
• Sara Soueidan, erişilebilir simge düğmeleri hakkında yazmıştır.
• Scott O'Hara, erişilebilir resimleri 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, çıkışı optimize etmek için SVGOMG'yi kullanın.

Simgeler, sitenizin marka bilincinin önemli bir parçasıdır. Daha sonra, marka bilinci oluşturma stratejinizin diğer yönlerini tema oluşturma gücünden yararlanarak nasıl duyarlı hale getirebileceğinizi öğreneceksiniz.

Öğrendiklerinizi sınayın

Simgeler hakkındaki bilginizi test edin