Większość obrazów stanowi część materiałów, jednak ikony stanowią część interfejsu użytkownika. Powinny się skalować i dostosowywać w taki sam sposób jak tekst interfejsu użytkownika skaluje się i dostosowuje.
Skalowalna grafika wektorowa
Dostępnych jest wiele formatów zdjęć fotograficznych: JPG, WebP i AVIF. W przypadku zdjęć innych niż fotograficzne dostępne są formaty PNG (Portable Network Graphics) i Skalable Vector Graphics (SVG).
Zarówno pliki PNG, jak i SVG dobrze sprawdzają się w przypadku obszarów o płaskim kolorze. Oba obrazy pozwalają też na przezroczyste tło.
Jeśli używasz pliku PNG, prawdopodobnie konieczne będzie utworzenie kilku wersji obrazu w różnych rozmiarach i zastosowanie atrybutu srcset w elemencie img, aby obraz był elastyczny. Jeśli używasz formatu SVG, jest on domyślnie elastyczny.
Pliki PNG (oraz JPG, WebP i AVIF) są obrazami bitmapowymi. Obrazy bitmapy przechowują informacje w postaci pikseli. W przypadku SVG informacje są przechowywane jako instrukcje rysowania. Gdy przeglądarka odczytuje plik SVG, instrukcje są konwertowane na piksele. Przede wszystkim te instrukcje mają charakter względny. Niezależnie od wymiarów użytych do opisania linii i kształtów wszystko jest renderowane z odpowiednią ostrością. 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">
Kod XML służy do zapisywania instrukcji w pliku SVG. To język znaczników, taki 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 umieścisz taki element w formacie SVG, przeglądarka musi wysłać o 1 jedno żądanie mniej. Nie trzeba czekać na pobranie obrazu, ponieważ zawiera on kod HTML ...w kodzie HTML. Jak już wkrótce się dowiesz, umieszczanie plików SVG takich jak ten daje Ci również większą kontrolę nad ich stylem.
Ikony i tekst
Obrazy ikon często mają proste kształty na przezroczystym tle. Tryb SVG doskonale sprawdza się w przypadku ikon.
Jeśli masz przycisk lub link z tekstem i ikoną, ikona ma charakter prezentacji. Liczy się tekst. Gdy używasz elementu img, pusty atrybut alt wskazuje, że obraz jest prezentacyjny.
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
CSS służy do prezentowania danych, dlatego możesz umieścić ikonę w swoim kodzie 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 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>
Ikony samodzielne
Jeśli chcesz, aby przyciski i linki były czytelne, umieść w nich tekst. Możesz użyć ikony bez tekstu, ale nie zakładaj, że wszyscy rozumieją znaczenie konkretnej ikony. W razie wątpliwości przeprowadź test z udziałem prawdziwych użytkowników.
Jeśli zdecydujesz się użyć ikony bez towarzyszącego tekstu, nie będzie już ona prezentacyjna. Obraz tła w CSS nie jest odpowiednim sposobem wyświetlenia ikony. Ikona musi mieć nazwę dostępną w kodzie HTML.
Jeśli używasz elementu img, ikona pobiera nazwę dostępną z atrybutu alt.
<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>
Możesz też umieścić nazwę dostępną w linku lub przycisku i zadeklarować, że obraz ma charakter prezentacji. 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 plik SVG w kodzie HTML, użyj atrybutu aria-label w linku lub przycisku, aby nadać mu nazwę dostępną dla wszystkich, i użyj atrybutu aria-hidden do ikony.
<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 stylu
Jeśli umieścisz ikony SVG bezpośrednio w kodzie HTML, możesz zmieniać ich styl tak samo jak w przypadku każdego innego elementu na stronie. Nie możesz tego zrobić, jeśli do wyświetlania ikon używasz elementu img.
W poniższym przykładzie elementy rect wewnątrz SVG mają wartość fill o wartości blue, która pasuje 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 zmienić styl obrazów SVG, które są obrazami tła w kodzie CSS, przeczytaj artykuł Una na temat kolorowania tła SVG.
- Sara Soueidan pisze na temat przycisków z ułatwieniami dostępu.
- Scott O'Hara napisał o kontekście oznaczania dostępnych obrazów i plików SVG.
- Jeśli do eksportowania plików SVG używasz narzędzia do projektowania graficznego, skorzystaj z narzędzia SVGOMG, aby zoptymalizować dane wyjściowe.
Ikony to ważna część wizerunku marki witryny. Dowiesz się, jak sprawić, by inne aspekty Twojej marki były responsywne, stosując motywację.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ikonach
Plik SVG może obsługiwać dowolną gęstość pikseli za pomocą 1 pliku lub bloku kodu <svg>.
.png i .jpg elementy SVG nie muszą zawierać elementu srcset ani <picture>.Jakie są zalety kodu SVG umieszczonego bezpośrednio w kodzie HTML?