Icone

La maggior parte delle immagini fa parte dei contenuti, ma le icone fanno parte dell'interfaccia utente. Devono essere scalate e adattate allo stesso modo del testo dell'interfaccia utente.

Scalable Vector Graphics

Per le immagini fotografiche, sono disponibili molte opzioni per il formato dell'immagine: JPG, WebP e AVIF. Per le immagini non fotografiche, puoi scegliere tra il formato Portable Network Graphics (PNG) e il formato Scalable Vector Graphics (SVG).

Sia i PNG sia gli SVG sono adatti per le aree di colore uniforme ed entrambi consentono alle immagini di avere sfondi trasparenti. Se utilizzi un PNG, probabilmente dovrai creare più versioni dell'immagine in diverse dimensioni e utilizzare l'attributo srcset sull'elemento img per rendere l'immagine adattabile. Se utilizzi un SVG, è adattabile per impostazione predefinita.

I PNG (e i JPG, WebP e AVIF) sono immagini bitmap. Le immagini bitmap memorizzano le informazioni come pixel. In un SVG, le informazioni vengono memorizzate come istruzioni di disegno. Quando il browser legge il file SVG, le istruzioni vengono convertite in pixel. La cosa migliore è che queste istruzioni sono relative. Indipendentemente dalle dimensioni utilizzate per descrivere linee e forme, tutto viene visualizzato con la nitidezza giusta. Anziché creare più SVG di dimensioni diverse, puoi creare un SVG che funzioni in tutte le dimensioni. Non è necessario utilizzare l'attributo 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 viene utilizzato per scrivere le istruzioni in un file SVG. Si tratta di un linguaggio di markup, come 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>

Puoi persino inserire SVG all'interno di 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>

Se incorpori un SVG in questo modo, il browser dovrà effettuare una richiesta in meno. Non dovrai attendere il download dell'immagine perché arriva con l'HTML…nell'HTML. Inoltre, come scoprirai a breve, l'incorporamento di SVG in questo modo ti offre un maggiore controllo anche sullo stile.

Icone e testo

Le immagini delle icone spesso presentano forme semplici su uno sfondo trasparente. SVG è ideale per le icone.

Se hai un pulsante o un link con testo e un'icona al suo interno, l'icona è di presentazione. È il testo che conta. Quando utilizzi un elemento img, un attributo alt vuoto indica che l'immagine è di presentazione.

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

Poiché CSS è per la presentazione, puoi inserire l'icona nel CSS come immagine di sfondo.

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

Se inserisci l'SVG all'interno dell'HTML, utilizza l'attributo aria-hidden per nasconderlo alle tecnologie per la disabilità.

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

Icone autonome

Utilizza il testo all'interno dei pulsanti e dei link se vuoi che il loro scopo sia chiaro. Puoi utilizzare un'icona senza testo, ma non dare per scontato che tutti comprendano il significato di una determinata icona. In caso di dubbi, esegui test con utenti reali.

Se decidi di utilizzare un'icona senza testo di accompagnamento, l'icona non è più di presentazione. Un'immagine di sfondo in CSS non è un modo appropriato per visualizzare l'icona. All'icona deve essere assegnato un nome accessibile in HTML.

Se utilizzi un elemento img, l'icona riceve il nome accessibile dall'attributo alt.

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

Un'altra opzione è inserire il nome accessibile sul link o sul pulsante stesso e dichiarare che l'immagine è di presentazione. Utilizza l'attributo aria-label per fornire il nome accessibile.

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

Se inserisci l'SVG all'interno dell'HTML, utilizza l'attributo aria-label sul link o sul pulsante per assegnargli un nome accessibile e utilizza l'attributo aria-hidden sull'icona.

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

Applicare lo stile alle icone

Se incorpori le icone SVG direttamente nell'HTML, puoi applicare lo stile a parti di esse come a qualsiasi altro elemento della pagina. Non puoi farlo se utilizzi un elemento img per visualizzare le icone.

Nell'esempio seguente, gli elementi rect all'interno dell'SVG hanno un valore fill di blue per corrispondere agli stili del testo del pulsante.

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

Puoi applicare anche gli stili hover e focus.

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

Risorse

• Se devi applicare lo stile agli SVG che sono immagini di sfondo nel CSS, leggi l'articolo di Una sulla colorazione degli sfondi SVG.
• Sara Soueidan ha scritto sui pulsanti delle icone accessibili.
• Scott O'Hara ha scritto sul markup contestuale di immagini e SVG accessibili.
• Se utilizzi uno strumento di progettazione grafica per esportare SVG, utilizza SVGOMG per ottimizzare l'output.

Le icone sono una parte importante del branding del tuo sito. Ora scoprirai come rendere adattabili altri aspetti del tuo branding grazie alla potenza dei temi.

Mettiti alla prova

Metti alla prova le tue conoscenze sulle icone