Icone

La maggior parte delle immagini fa parte dei tuoi contenuti, ma le icone fanno parte dell'interfaccia utente. Devono scalare e adattarsi allo stesso modo in cui il testo della tua UI si adatta e si adatta.

Grafica vettoriale scalabile

Quando si tratta di 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 file PNG che SVG sono efficaci per gestire aree di colore piatto ed entrambi consentono alle immagini di avere sfondi trasparenti. Se utilizzi un file PNG, probabilmente dovrai creare più versioni dell'immagine di dimensioni diverse e utilizzare l'attributo srcset nell'elemento img per rendere l'immagine reattiva. Se utilizzi un file SVG, è adattabile per impostazione predefinita.

I file PNG (e JPG, WebP e AVIF) sono immagini bitmap. Le immagini bitmap memorizzano le informazioni sotto forma di pixel. In un file SVG, le informazioni vengono memorizzate come istruzioni di disegno. Quando il browser legge il file SVG, le istruzioni vengono convertite in pixel. L'aspetto migliore è che queste istruzioni sono relative. Indipendentemente dalle dimensioni utilizzate per descrivere linee e forme, ogni elemento viene visualizzato con la giusta nitidezza. Invece di creare più SVG di dimensioni diverse, puoi crearne uno adatto a 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, ad esempio 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 il file SVG all'interno del codice 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 aspettare che l'immagine venga scaricata perché arriva con il codice HTML... nel codice HTML. Inoltre, come scoprirai presto, l'incorporamento di SVG in questo modo ti offre anche un maggiore controllo sugli stili.

Icone e testo

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

Se è presente un pulsante o un link con del testo e un'icona, l'icona è rappresentativa. È il testo che conta. Quando utilizzi un elemento img, un attributo alt vuoto indica che l'immagine è rappresentativa.

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

Poiché il CSS è destinato alla presentazione, potresti 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 il file SVG nel codice HTML, utilizza l'attributo aria-hidden per nasconderlo dalle 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 del 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 il test con utenti reali.

Se decidi di utilizzare un'icona senza testo aggiuntivo, l'icona non è più rappresentativa. 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 nel link o pulsante stesso e dichiarare che l'immagine è rappresentativa. 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 il file SVG nel codice HTML, utilizza l'attributo aria-label sul link o sul pulsante per assegnargli un nome accessibile, mentre nell'icona usa l'attributo 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>

Stili delle icone

Se incorpori le icone SVG direttamente nel codice HTML, puoi applicare uno stile a parti di esse, proprio come per qualsiasi altro elemento della pagina. Non puoi farlo se utilizzi un elemento img per visualizzare le tue icone.

Nell'esempio seguente, gli elementi rect all'interno del file SVG hanno un valore fill pari a blue, che si abbina agli stili del testo del pulsante.

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

Puoi anche applicare gli stili hover e focus.

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

Risorse

• Se hai bisogno di applicare uno stile a SVG che siano immagini di sfondo nel tuo CSS, leggi l'articolo di Una su come colorare gli sfondi SVG.
• Sara Soueidan ha scritto a proposito dei pulsanti icona accessibili.
• Scott O'Hara ha scritto a proposito del markup contestuale di immagini e SVG accessibili.
• Se utilizzi uno strumento di progettazione grafica per esportare i file SVG, usa 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 sfruttando l'efficacia dei temi.

Verifica le tue conoscenze

Verifica le tue conoscenze delle icone