Icônes

La plupart des images font partie de votre contenu, mais les icônes font partie de votre interface utilisateur. Elles doivent être mises à l'échelle et s'adapter de la même manière que le texte de votre interface utilisateur.

Graphismes vectoriels évolutifs

En matière d'images photographiques, de nombreux formats sont disponibles: JPG, WebP et AVIF. Pour les images non photographiques, vous avez le choix entre le format PNG (Portable Network Graphics) et SVG (Scalable Vector Graphics).

Les fichiers PNG et SVG sont efficaces pour traiter les zones de couleur unie et permettent tous deux à vos images d'avoir un arrière-plan transparent. Si vous utilisez un fichier PNG, vous devrez probablement créer plusieurs versions de votre image dans différentes tailles et utiliser l'attribut srcset sur votre élément img pour rendre l'image responsive. Si vous utilisez un SVG, il est responsif par défaut.

Les fichiers PNG (et JPG, WebP et AVIF) sont des images bitmap. Les images bitmap stockent les informations sous forme de pixels. Dans un SVG, les informations sont stockées sous forme d'instructions de dessin. Lorsque le navigateur lit le fichier SVG, les instructions sont converties en pixels. Mieux encore, ces instructions sont relatives. Quelles que soient les dimensions que vous utilisez pour décrire les lignes et les formes, le rendu est très précis. Au lieu de créer plusieurs fichiers SVG de différentes tailles, vous pouvez en créer un seul qui fonctionnera dans toutes les tailles. Il n'est pas nécessaire d'utiliser l'attribut 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">

Le format XML est utilisé pour écrire les instructions dans un fichier SVG. Il s'agit d'un langage de balisage, comme 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>

Vous pouvez même placer le SVG dans le code 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>

Si vous intégrez un SVG de ce type, le navigateur n'a pas besoin d'envoyer de requête de moins. Il n'y a pas besoin d'attendre la fin du téléchargement de l'image, car elle arrive avec le code HTML ...dans le code HTML. De plus, comme vous le découvrirez bientôt, l'intégration de fichiers SVG comme celui-ci vous permet également de mieux contrôler leur style.

Icônes et texte

Les images d'icônes présentent souvent des formes simples sur un fond transparent. Le format SVG est idéal pour les icônes.

Si vous avez un bouton ou un lien avec du texte et une icône à l'intérieur, l'icône est de présentation. Ce qui compte, c'est le texte. Lorsque vous utilisez un élément img, un attribut alt vide indique que l'image est de présentation.

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

Comme le CSS est destiné à la présentation, vous pouvez y placer l'icône en tant qu'image de fond.

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

Si vous insérez le SVG dans votre code HTML, utilisez l'attribut aria-hidden pour le masquer aux technologies d'assistance.

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

Icônes indépendantes

Insérez du texte à l’intérieur de vos boutons et liens si vous souhaitez que leur fonction soit claire. Vous pouvez utiliser une icône sans texte, mais ne partez pas du principe que tout le monde comprend sa signification. En cas de doute, effectuez un test avec de vrais utilisateurs.

Si vous décidez d'utiliser une icône sans texte d'accompagnement, elle n'est plus de présentation. Une image de fond dans CSS ne constitue pas un moyen approprié d'afficher l'icône. Vous devez attribuer un nom accessible au format HTML à l'icône.

Si vous utilisez un élément img, le nom accessible de l'icône provient de l'attribut alt.

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

Une autre option consiste à placer le nom accessible sur le lien ou le bouton lui-même, et à déclarer que l'image est représentative. Utilisez l'attribut aria-label pour indiquer le nom accessible.

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

Si vous insérez le SVG dans votre code HTML, utilisez l'attribut aria-label sur le lien ou le bouton pour lui attribuer un nom accessible, et utilisez l'attribut aria-hidden sur l'icône.

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

Appliquer un style aux icônes

Si vous intégrez vos icônes SVG directement dans votre code HTML, vous pouvez appliquer leur style à certaines parties comme n'importe quel autre élément de votre page. Vous ne pouvez pas le faire si vous utilisez un élément img pour afficher vos icônes.

Dans l'exemple suivant, les éléments rect dans le SVG ont une valeur fill de blue pour correspondre aux styles du texte du bouton.

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

Vous pouvez également appliquer les styles hover et focus.

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

Ressources

• Si vous devez appliquer un style SVG aux images de fond de votre CSS, lisez l'article d'Una sur la coloration des arrière-plans SVG.
• Sara Soueidan a écrit au sujet des boutons d'icône accessibles.
• Scott O'Hara a écrit son article sur le balisage contextuel d'images et de fichiers SVG accessibles.
• Si vous utilisez un outil de conception graphique pour exporter des fichiers SVG, utilisez le format SVGOMG pour optimiser la sortie.

Les icônes jouent un rôle important dans l'image de marque de votre site. Vous allez maintenant découvrir comment rendre d'autres aspects de votre branding responsif grâce à la thématisation.

Testez vos connaissances

Tester vos connaissances sur les icônes