Ikony

Większość obrazów jest częścią treści, ale ikony są częścią interfejsu. Powinny się one skalować i dostosowywać w taki sam sposób jak tekst w interfejsie.

Grafika SVG

W przypadku zdjęć masz do wyboru wiele formatów: JPG, WebP i AVIF. W przypadku obrazów innych niż zdjęcia możesz wybrać format Portable Network Graphics (PNG) lub format grafiki SVG (SVG).

Zarówno PNG, jak i SVG dobrze radzą sobie z obszarami o jednolitym kolorze i umożliwiają stosowanie przezroczystego tła. Jeśli używasz formatu PNG, prawdopodobnie będziesz musiał utworzyć kilka wersji obrazu w różnych rozmiarach i użyć atrybutu srcset w elemencie img, aby obraz był elastyczny. Jeśli używasz formatu SVG, obraz jest domyślnie elastyczny.

PNG (i JPG, WebP oraz AVIF) to obrazy bitmapowe. Obrazy bitmapowe przechowują informacje jako piksele. W formacie SVG informacje są przechowywane jako instrukcje rysowania. Gdy przeglądarka odczytuje plik SVG, instrukcje są przekształcane w piksele. Co najważniejsze, te instrukcje są względne. Niezależnie od wymiarów używanych do opisywania linii i kształtów wszystko jest renderowane z odpowiednią ostrością. Zamiast tworzyć wiele plików SVG w różnych rozmiarach, możesz utworzyć jeden plik SVG, który będzie działać w każdym rozmiarze. Nie musisz używać atrybutu srcset.

<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">

Do zapisywania instrukcji w pliku SVG używa się języka XML. Jest to język znaczników, podobnie jak HTML.

<?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>

Możesz nawet umieścić SVG w kodzie HTML.

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

Jeśli osadzisz SVG w ten sposób, przeglądarka będzie musiała wykonać o 1 żądanie mniej. Nie trzeba będzie czekać na pobranie obrazu, ponieważ jest on dostarczany razem z kodem HTML…w kodzie HTML. Ponadto, jak się wkrótce przekonasz, osadzanie plików SVG w ten sposób daje większą kontrolę nad ich stylizacją.

Ikony i tekst

Obrazy ikon często przedstawiają proste kształty na przezroczystym tle. Format SVG idealnie nadaje się do ikon.

Jeśli masz przycisk lub link z tekstem i ikoną, ikona ma charakter prezentacyjny. Najważniejszy jest tekst. Gdy używasz elementu img, pusty atrybut alt wskazuje, że obraz ma charakter prezentacyjny.

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

Ponieważ CSS służy do prezentacji, możesz umieścić ikonę w CSS jako obraz tła.

<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;
}

Jeśli umieścisz SVG w kodzie HTML, użyj atrybutu aria-hidden, aby ukryć go przed technologią wspomagającą osoby z niepełnosprawnością.

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

Samodzielne ikony

Jeśli chcesz, aby przeznaczenie przycisków i linków było jasne, używaj w nich tekstu. Możesz użyć ikony bez tekstu, ale nie zakładaj, że wszyscy rozumieją znaczenie danej ikony. W razie wątpliwości przeprowadź testy z prawdziwymi użytkownikami.

Jeśli zdecydujesz się użyć ikony bez tekstu, nie będzie ona już miała charakteru prezentacyjnego. Obraz tła w CSS nie jest odpowiednim sposobem wyświetlania ikony. Ikona musi mieć nazwę na potrzeby ułatwień dostępu w kodzie HTML.

Jeśli używasz elementu img, ikona pobiera nazwę na potrzeby ułatwień dostępu z atrybutu alt.

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

Inną opcją jest umieszczenie nazwy na potrzeby ułatwień dostępu w samym linku lub przycisku i zadeklarowanie, że obraz ma charakter prezentacyjny. Aby podać nazwę na potrzeby ułatwień dostępu, użyj atrybutu aria-label.

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

Jeśli umieścisz SVG w kodzie HTML, użyj atrybutu aria-label w linku lub przycisku, aby nadać mu nazwę na potrzeby ułatwień dostępu, oraz atrybutu aria-hidden w ikonie.

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

Stylizowanie ikon

Jeśli osadzisz ikony SVG bezpośrednio w kodzie HTML, możesz stylizować ich części tak jak każdy inny element na stronie. Nie możesz tego zrobić, jeśli do wyświetlania ikon używasz elementu img.

W poniższym przykładzie elementy rect w SVG mają wartość fill równą blue, aby pasowały do stylów tekstu przycisku.

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

Możesz też stosować style hover i focus.

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

Zasoby

• Jeśli musisz stylizować pliki SVG, które są obrazami tła w CSS, przeczytaj artykuł Uny o kolorowaniu tła SVG.
• Sara Soueidan napisała artykuł o dostępnych przyciskach z ikonami.
• Scott O'Hara napisał artykuł o kontekstowym oznaczaniu dostępnych obrazów i plików SVG.
• Jeśli używasz narzędzia do projektowania graficznego do eksportowania plików SVG, użyj SVGOMG, aby zoptymalizować dane wyjściowe.

Ikony są ważną częścią identyfikacji wizualnej witryny. Teraz dowiesz się, jak dzięki mocy motywów sprawić, by inne aspekty identyfikacji wizualnej były elastyczne.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ikonach