SVG inline in HTML per creare un’icona responsive con fallback accessibile

Introduzione

Integrare un SVG direttamente nel documento HTML è una soluzione molto pratica quando vuoi controllare al massimo l’aspetto di una grafica vettoriale, senza affidarti a immagini esterne. In questo tutorial vedremo un sotto-argomento utile e concreto: come usare SVG inline in HTML per realizzare un’icona responsive con testo alternativo e fallback accessibile.

Questo approccio è particolarmente utile per elementi come badge, indicatori di stato, pulsanti con simboli, piccoli loghi o illustrazioni tecniche. L’obiettivo non è solo far vedere un’icona nitida su qualsiasi schermo, ma anche renderla più robusta dal punto di vista dell’accessibilità e della manutenzione del codice.

Rispetto a un file immagine esterno, l’SVG inline offre diversi vantaggi:

• si può stilizzare con maggiore precisione tramite attributi e classi;
• si integra bene con il layout HTML;
• può adattarsi facilmente a dimensioni diverse;
• può includere elementi testuali utili ai lettori di schermo;
• riduce il bisogno di asset separati per icone semplici e riutilizzabili.

Vedremo un esempio reale: un pulsante “Salva” con un’icona a forma di dischetto, costruita in SVG inline, scalabile e accessibile.

Codice completo

<button class="btn-save" type="button">
  <svg
    class="btn-icon"
    viewBox="0 0 24 24"
    width="24"
    height="24"
    role="img"
    aria-labelledby="saveTitle saveDesc"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title id="saveTitle">Icona di salvataggio</title>
    <desc id="saveDesc">Rappresentazione stilizzata di un dischetto, usata per il pulsante salva</desc>

    <path
      d="M5 3h11l3 3v15H5V3zm2 2v4h8V5H7zm0 8v5h10v-5H7zm2-7h4v2H9V6z"
      fill="currentColor"
    />
  </svg>
  <span>Salva</span>
</button>

<p class="status">
  Stato del documento:
  <svg
    class="status-icon"
    viewBox="0 0 24 24"
    width="16"
    height="16"
    aria-hidden="true"
    focusable="false"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="12" cy="12" r="10" fill="currentColor" />
    <path d="M9.5 12.5l2 2 3.5-4" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
  Salvato correttamente
</p>

Spiegazione

Il primo elemento è un <button>, quindi ha già un significato semantico corretto: è un controllo interattivo. Dentro il pulsante abbiamo inserito l’SVG inline e un testo visibile. Questa combinazione è molto efficace perché il testo aiuta sia gli utenti sia i motori di ricerca, mentre l’icona migliora l’usabilità visiva.

1. Il ruolo di viewBox

L’attributo viewBox="0 0 24 24" definisce il sistema di coordinate interno dell’SVG. In pratica dice al browser come interpretare il disegno. Questo è fondamentale per la scalabilità: l’icona può essere ingrandita o rimpicciolita senza perdere qualità.

Nel nostro esempio, width="24" e height="24" impostano la dimensione visualizzata, ma il disegno resta vettoriale. Se in futuro vuoi usare la stessa icona in un header o in una lista, puoi cambiare queste dimensioni senza dover rifare il file.

2. Accessibilità con title e desc

Per rendere l’SVG comprensibile ai lettori di schermo, abbiamo usato role="img" e collegato due elementi interni:

• <title>: fornisce un nome sintetico all’icona;
• <desc>: aggiunge una descrizione più dettagliata.

L’attributo aria-labelledby collega l’SVG a questi due elementi tramite i loro ID. In questo modo lo screen reader può annunciare un contenuto significativo, invece di leggere il disegno come un insieme di forme senza contesto.

Nel secondo SVG, invece, l’icona è decorativa e accompagna un testo già sufficiente (“Salvato correttamente”). Per questo abbiamo usato aria-hidden="true" e focusable="false", così l’elemento non viene annunciato inutilmente e non interferisce con la navigazione da tastiera.

3. currentColor per un’integrazione pulita con il design

Una scelta molto pratica è usare fill="currentColor". Questo valore fa ereditare all’SVG il colore del testo del contenitore. Di conseguenza, se il pulsante ha testo blu, anche l’icona sarà blu senza bisogno di riscrivere il colore dentro l’SVG.

È una best practice molto utile perché rende l’icona coerente con il tema grafico del sito e semplifica la manutenzione. Se domani cambi palette, non devi modificare ogni singolo SVG.

4. Differenza tra icona funzionale e icona decorativa

Non tutte le icone hanno lo stesso ruolo. Nel nostro esempio:

• l’icona dentro il pulsante è funzionale, perché aiuta a capire l’azione del controllo;
• l’icona accanto al testo di stato è decorativa, perché il significato è già espresso dal testo.

Questa distinzione è importante: se un SVG comunica informazione, deve essere accessibile; se è solo ornamentale, è meglio nasconderlo agli assistive technologies per evitare rumore inutile.

Best practice

• Usa SVG inline quando l’icona deve seguire il tema del sito: è più facile controllare colore, dimensioni e stato hover rispetto a un file immagine esterno.
• Preferisci viewBox e dimensioni flessibili: così l’icona resta nitida su schermi retina e in layout responsive.
• Non dimenticare l’accessibilità: se l’SVG comunica un’informazione, aggiungi titolo e descrizione; se è decorativo, nascondilo con aria-hidden="true".
• Usa currentColor per armonizzare l’icona con testo, pulsanti e stati del componente.
• Evita SVG troppo complessi inline: per illustrazioni grandi o molto dettagliate, può essere più comodo usare un file separato o un simbolo riutilizzabile.
• Mantieni pulito il markup: un SVG ben organizzato è più facile da leggere, modificare e riutilizzare nel team.
• Controlla il focus: le icone decorative non devono diventare elementi focalizzabili con tastiera.

Riepilogo

Integrare SVG inline in HTML è una tecnica semplice ma molto potente, soprattutto quando vuoi creare icone responsive, coerenti con il design e accessibili. Nel tutorial abbiamo visto come costruire un pulsante con un’icona SVG scalabile, come usare viewBox per garantire la flessibilità visiva, e come distinguere tra elementi informativi e decorativi dal punto di vista dell’accessibilità.

Il punto chiave da ricordare è questo: un SVG inline non è solo un disegno vettoriale, ma un vero pezzo di markup HTML che può partecipare alla semantica della pagina. Se lo tratti con cura, ottieni componenti più puliti, più facili da mantenere e più inclusivi per tutti gli utenti.

Approfondisci con risorse ufficiali

• MDN Web Docs - SVG: documentazione completa su elementi, attributi e integrazione con HTML.
• MDN Web Docs - Accessibility: linee guida pratiche per rendere i contenuti web accessibili.
• W3C SVG Specification: specifica ufficiale del formato SVG e del suo modello di rendering.
• WAI-ARIA Authoring Practices: riferimento utile per capire ruoli, etichette e pattern accessibili.
• HTML Living Standard: per approfondire il comportamento semantico di button, span e attributi globali.