La plupart des images font partie de votre contenu, mais les icônes font partie de votre interface utilisateur. Elles doivent évoluer et s'adapter de la même manière que le texte de votre UI.
Graphiques vectoriels évolutifs
Pour les images, de nombreux formats s'offrent à vous: JPG, WebP et AVIF. Pour les images non photographiques, vous avez le choix entre le format PNG (Portable Network Graphics) et le format SVG (Scalable Vector Graphics).
Les fichiers PNG et SVG sont tous deux bons pour traiter les zones de couleur plate, et ils permettent tous deux à vos images d'avoir des arrière-plans transparents.
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 au niveau de l'é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. Cerise sur le gâteau, ces instructions sont relatives. Quelles que soient les dimensions que vous utilisez pour décrire les lignes et les formes, tout s'affiche avec la bonne netteté. Au lieu de créer plusieurs SVG de différentes tailles, vous pouvez en créer un seul qui fonctionne 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 rédiger 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 insérer le format 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 comme celui-ci, c'est une demande de moins que le navigateur doit faire. Il n'y a pas d'attente pour le téléchargement de l'image, car elle arrive avec le code HTML ...dans le code HTML ! De plus, comme vous le verrez bientôt, intégrer des SVG comme celui-ci vous donne également plus de contrôle sur leur style.
Icônes et texte
Les images d’icônes présentent souvent des formes simples sur un arrière-plan 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, cette icône est de présentation. C'est le texte qui compte. Lorsque vous utilisez un élément img, un attribut alt vide indique que l'image est présentation.
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
Le CSS étant destiné à la présentation, vous pouvez ajouter l'icône dans votre CSS 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 placez le SVG dans votre code HTML, utilisez l'attribut aria-hidden pour le masquer des 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 autonomes
Utilisez 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 la signification d'une icône particulière. En cas de doute, faites un test auprès d'utilisateurs réels.
Si vous décidez d’utiliser une icône sans texte d’accompagnement, elle n’a plus de valeur de présentation. Une image de fond au format CSS ne constitue pas un moyen approprié d'afficher l'icône. L'icône doit être nommée sous un nom HTML accessible.
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 une image de présentation. Utilisez l'attribut aria-label pour fournir 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 donner 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 styliser certaines parties de celles-ci comme n'importe quel autre élément de votre page. Cette opération n'est pas possible si vous utilisez un élément img pour afficher vos icônes.
Dans l'exemple suivant, les éléments rect du fichier 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 des styles hover et focus.
button:hover,
button:focus {
color: red;
}
button:hover rect,
button:focus rect {
fill: red;
}
Ressources
- Si vous avez besoin de styliser les SVG qui sont des images de fond dans votre CSS, consultez l'article d'Una sur la coloration des arrière-plans SVG.
- Sara Soueidan a rédigé un article sur les boutons d'icônes accessibles.
- Scott O'Hara a écrit des articles sur le balisage contextuel d'images et de SVG accessibles.
- Si vous exportez des fichiers SVG à l'aide d'un outil de conception graphique, optimisez la sortie à l'aide de SVGOMG.
Les icônes jouent un rôle important dans le branding de votre site. Vous allez maintenant découvrir comment rendre d'autres aspects de votre branding responsifs grâce à la thématisation.
Testez vos connaissances
Tester vos connaissances sur les icônes
Le format SVG peut gérer n'importe quelle densité de pixels avec un seul fichier ou bloc de code <svg>.
.png ou .jpg, le format SVG n'a pas besoin de srcset ni d'élément <picture>.Quels avantages le code SVG intégré au code HTML présente-t-il ?