Icone

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

Scalable Vector Graphics

Per quanto riguarda le immagini fotografiche, hai a disposizione un'ampia scelta di formati: JPG, WebP e AVIF. Per le immagini non fotografiche, puoi scegliere tra il formato PNG (Portable Network Graphics) e Scalable Vector Graphics (SVG).

Sia i file PNG sia i file SVG sono ideali per gestire le aree a colori piatti ed entrambi consentono alle immagini di avere sfondi trasparenti. Se utilizzi un'immagine PNG, probabilmente dovrai creare più versioni dell'immagine di dimensioni diverse e utilizzare l'attributo srcset nell'elemento img per rendere l'immagine adattabile. 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 come 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. Soprattutto, queste istruzioni sono relative. Indipendentemente dalle dimensioni utilizzate per descrivere linee e forme, tutto viene visualizzato con la giusta nitidezza. Invece di creare più file SVG di dimensioni diverse, puoi crearne uno solo 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">

Per scrivere le istruzioni in un file SVG viene utilizzato il linguaggio XML. Si tratta di un linguaggio di marcatura, come l'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 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 file SVG di questo tipo, il browser dovrà effettuare una richiesta in meno. Non dovrai attendere il download dell'immagine perché arriva con l'HTML... nel codice HTML. Inoltre, come scoprirai presto, incorporare file SVG come questo ti offre un maggiore controllo anche sull'applicazione di stili a questi file.

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 testo e un'icona al suo interno, l'icona rappresenta una forma di presentazione. È 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, 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 il file SVG nel codice 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 indipendenti

Se vuoi che il loro scopo sia chiaro, usa del testo all'interno dei pulsanti e dei link. 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 di accompagnamento, l'icona non è più rappresentativa. L'immagine di sfondo in CSS non è un modo appropriato per visualizzare l'icona. È necessario assegnare all'icona un nome accessibile in HTML.

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

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

Un'altra opzione è quella di inserire il nome accessibile sul link o sul 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 e usare 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>

Stili delle icone

Se incorpori le icone SVG direttamente nel codice HTML, puoi assegnare uno stile alle loro parti come per 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 del file SVG hanno un valore fill pari a blue per corrispondere 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 nel tuo CSS devi applicare uno stile agli SVG che sono immagini di sfondo, leggi l'articolo di Una su come colorare gli sfondi SVG.
• Sara Soueidan ha scritto dei pulsanti icona accessibili.
• Scott O'Hara ha scritto del markup contestuale di immagini accessibili e SVG.
• Se utilizzi uno strumento di progettazione grafica per esportare le immagini SVG, utilizza SVGOMG per ottimizzare l'output.

Le icone sono una parte importante del branding del tuo sito. Ora scoprirai come rendere reattivi altri aspetti del tuo branding sfruttando la potenza dei temi.

Verifica la tua comprensione

Verifica la tua conoscenza delle icone