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
Il file SVG può gestire qualsiasi densità di pixel con un singolo file o blocco di codice <svg>
.
.png
o .jpg
, il formato SVG non richiede alcun elemento srcset
o <picture>
.Quali vantaggi offre il codice SVG direttamente nel codice HTML?