Ikony

Większość obrazów stanowi część Twojej treści, ale ikony stanowią część interfejsu użytkownika. Powinny one skalować i dostosowywać się tak samo jak tekst interfejsu użytkownika.

Grafika wektorowa skalowalna

Dostępnych jest wiele formatów graficznych: JPG, WebP i AVIF. W przypadku zdjęć innych niż zdjęcia możesz wybrać format PNG (Portable Network Graphics) lub Scalable Vector Graphics (SVG).

Zarówno pliki PNG, jak i SVG dobrze radzą sobie z obszarami o płaskim kolorze, ponieważ oba umożliwiają użycie przezroczystego tła. Jeśli używasz pliku PNG, prawdopodobnie konieczne będzie utworzenie wielu wersji obrazu w różnych rozmiarach i użycie atrybutu srcset w elemencie img, aby ustawić responsywność obrazu. Jeśli używasz pliku SVG, jest on domyślnie elastyczny.

Pliki PNG (oraz pliki JPG, WebP i AVIF) to obrazy bitmapowe. Obrazy bitmapy przechowują informacje w pikselach. W pliku SVG informacje są przechowywane jako instrukcje rysowania. Podczas odczytywania pliku SVG przez przeglądarkę instrukcje są konwertowane na piksele. Co najważniejsze, te instrukcje są względne. Niezależnie od wymiarów użytych do opisania linii i kształtów wszystko renderuje się idealnie ostre. Zamiast tworzyć wiele plików SVG o różnych rozmiarach, możesz utworzyć jeden plik SVG, który będzie działał we wszystkich rozmiarach. 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">

XML służy do zapisywania instrukcji w pliku SVG. Jest to język znaczników podobny do 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ć grafikę 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 umieścisz taki element SVG, przeglądarka musi przesłać jedno żądanie mniej. Nie trzeba czekać na pobranie obrazu, bo pojawia się on w kodzie HTML w kodzie HTML. Wkrótce się też przekonasz, że osadzanie elementów SVG takich jak ten daje również większą kontrolę nad ich stylem.

Ikony i tekst

Obrazy ikon często mają proste kształty na przezroczystym tle. Format SVG doskonale sprawdza się w przypadku ikon.

Jeśli masz przycisk lub link z tekstem i ikoną, ikona ma charakter prezentacji. Liczy się tekst. Jeśli używasz elementu img, pusty atrybut alt wskazuje, że obraz ma charakter prezentacji.

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

CSS służy do prezentacji, więc 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 umieszczasz plik 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 przyciski i linki były zrozumiałe, używaj tekstu wewnątrz przycisków i linków. Możesz użyć ikony bez tekstu, ale nie zakładaj, że wszyscy rozumieją znaczenie danej ikony. W razie wątpliwości przeprowadź test na rzeczywistych użytkownikach.

Jeśli zdecydujesz się użyć ikony bez towarzyszącego jej tekstu, nie będzie ona już prezentować funkcji. Obraz tła w CSS nie jest odpowiedni do wyświetlenia ikony. Ikona musi mieć nazwę na potrzeby ułatwień dostępu w kodzie HTML.

Jeśli używasz elementu img, ikona otrzymuje nazwę, która zawiera ułatwienia dostępu, korzystając z atrybutu alt.

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

Inną możliwością jest umieszczenie nazwy ułatwień dostępu w linku lub przycisku i zadeklarowanie, że obraz ma charakter prezentacji. Użyj atrybutu aria-label, aby podać nazwę na potrzeby ułatwień dostępu.

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

Jeśli umieszczasz plik SVG w kodzie HTML, użyj atrybutu aria-label w linku lub przycisku, aby nadać mu dostępną nazwę, i użyj atrybutu aria-hidden na 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>

Ikony stylów

Jeśli umieścisz ikony SVG bezpośrednio w kodzie HTML, możesz zmieniać styl ich części tak samo jak każdego innego elementu na stronie. Nie można tego zrobić, jeśli do wyświetlania ikon używasz elementu img.

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

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

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

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

Zasoby

• Jeśli chcesz dostosować styl obrazów SVG, które są obrazami tła w CSS, przeczytaj artykuł Uny na temat kolorowania tła SVG.
• Sara Soueidan napisała o przyciskach z ikonami ułatwień dostępu.
• Scott O'Hara napisał o kontekstowym oznaczaniu dostępnych obrazów i plików SVG.
• Jeśli do eksportowania plików SVG używasz narzędzia do projektowania graficznego, zoptymalizuj plik wyjściowy za pomocą SVGOMG.

Ikony są ważną częścią budowania marki Twojej witryny. Z tej lekcji dowiesz się, jak sprawić, by inne aspekty Twojej marki były elastyczne dzięki wykorzystaniu motywów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ikonach