Иконки

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

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

Когда речь идет о фотографических изображениях, существует множество вариантов формата изображения: 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"
/>

Для записи инструкций в SVG-файл используется XML. Это язык разметки, подобный 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 указывает на то, что изображение является презентационным.

Пустой атрибут alt - это не то же самое, что отсутствие атрибута alt. Всегда указывайте атрибут alt, даже если изображение является презентационным и атрибут 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>

Если на одной странице несколько раз используется один и тот же значок, то повторять всю SVG-разметку каждый раз будет неэффективно. В SVG существует элемент use, который позволяет "клонировать" часть SVG, даже из другого SVG-элемента.

Отдельные значки

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

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

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

Обычно атрибут alt описывает содержимое изображения ("Три горизонтальные линии."), но для самостоятельных пиктограмм атрибут 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, прочитайте статью Уны colorizing SVG backgrounds.
• Сара Суэйдан (Sara Soueidan) написала о доступных кнопках-иконках.
• Скотт О'Хара написал о контекстной разметке доступных изображений и SVG.
• Если вы используете инструмент графического дизайна для экспорта SVG, используйте SVGOMG для оптимизации вывода.

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

Комментарии