Иконки

Большинство изображений являются частью вашего контента, но иконки — частью вашего пользовательского интерфейса. Они должны масштабироваться и адаптироваться так же, как и текст в вашем пользовательском интерфейсе.

Масштабируемая векторная графика

Что касается фотографических изображений, существует множество вариантов форматов: JPG, WebP и AVIF. Для нефотографических изображений можно выбрать формат Portable Network Graphics (PNG) или Scalable Vector Graphics (SVG).

И PNG, и SVG хорошо подходят для работы с однотонными областями, и оба формата позволяют создавать изображения с прозрачным фоном. При использовании PNG вам, вероятно, потребуется создать несколько версий изображения разных размеров и использовать атрибут srcset для элемента img , чтобы сделать изображение адаптивным . При использовании SVG изображение адаптивно по умолчанию.

PNG (а также JPG, WebP и AVIF) — это растровые изображения. Растровые изображения хранят информацию в пикселях. В SVG информация хранится в виде инструкций для рисования. Когда браузер считывает файл SVG, инструкции преобразуются в пиксели. И самое главное, эти инструкции являются относительными. Независимо от размеров, используемых для описания линий и фигур, всё отображается с нужной чёткостью. Вместо создания нескольких SVG-файлов разных размеров вы можете создать один SVG-файл, который будет работать со всеми размерами. Нет необходимости использовать атрибут 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 используется для записи инструкций в SVG-файл. Это язык разметки, похожий на 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>

Вы даже можете вставлять SVG-файлы в 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>

Если вы встроите SVG-файл таким образом, это на один запрос меньше для браузера. Не будет ожидания загрузки изображения, потому что оно поступает вместе с HTML-кодом… прямо в HTML! Кроме того, как вы скоро узнаете, встраивание SVG-файлов таким образом дает вам больше контроля над их оформлением.

Иконки и текст

Изображения иконок часто представляют собой простые фигуры на прозрачном фоне. Формат SVG идеально подходит для иконок.

Если у вас есть кнопка или ссылка с текстом и иконкой внутри, то иконка является презентационной. Важен сам текст. При использовании элемента img пустой атрибут alt указывает на то, что изображение является презентационным.

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

Поскольку CSS предназначен для оформления, вы можете использовать иконку в качестве фонового изображения в своих CSS-кодах.

<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-изображение внутри HTML-кода, используйте атрибут aria-hidden , чтобы скрыть его от вспомогательных технологий.

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

Автономные значки

Используйте текст внутри кнопок и ссылок, если хотите, чтобы их назначение было понятным. Вы можете использовать иконку без текста, но не предполагайте, что все понимают значение той или иной иконки. В случае сомнений, протестируйте с реальными пользователями.

Если вы решите использовать иконку без сопровождающего текста, она перестанет быть презентабельной. Фоновое изображение в CSS — неподходящий способ отображения иконки. Иконке необходимо присвоить доступное имя в HTML.

Если используется элемент img , имя значка, доступное для его отображения, определяется атрибутом alt .

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

Другой вариант — указать доступное имя непосредственно в ссылке или кнопке и обозначить изображение как презентационное. Для указания доступного имени используйте атрибут aria-label .

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

Если вы вставляете SVG-файл в HTML-код, используйте атрибут aria-label для ссылки или кнопки, чтобы присвоить им доступное имя, и атрибут aria-hidden для значка.

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

Иконки стиля

Если вы встраиваете SVG-иконки непосредственно в HTML-код, вы можете стилизовать их отдельные части так же, как и любой другой элемент на странице. Это невозможно сделать, если вы используете элемент img для отображения иконок.

В следующем примере элементы rect внутри SVG имеют значение fill blue , соответствующее стилю текста кнопки.

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

Вы также можете применять стили hover и focus .

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

Ресурсы

• Если вам нужно стилизовать SVG-изображения, используемые в качестве фоновых, с помощью CSS, прочтите статью Уны о раскрашивании SVG-фонов .
• Сара Суэйдан написала статью об доступных иконочных кнопках .
• Скотт О'Хара писал о контекстной разметке доступных изображений и SVG-файлов .
• Если вы используете графический редактор для экспорта SVG-файлов, воспользуйтесь программой SVGOMG для оптимизации выходного результата.

Иконки — важная часть фирменного стиля вашего сайта. Далее вы узнаете, как сделать другие элементы вашего фирменного стиля адаптивными с помощью тем оформления .

Проверьте свое понимание

Проверьте свои знания иконок.