Иконки

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

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

Когда дело доходит до фотографических изображений, существует множество вариантов формата изображения: JPG, WebP и AVIF. Для нефотографических изображений у вас есть выбор между форматом переносимой сетевой графики (PNG) и форматом масштабируемой векторной графики (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;
}

Ресурсы

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

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

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

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