SVG inline in HTML per creare una grafica di stato accessibile e responsive

Introduzione

Quando si parla di SVG integrato in HTML, molti pensano subito alle icone o ai loghi. In realtà, uno degli usi più utili e pratici è la creazione di una grafica di stato: un piccolo elemento visivo che comunica un’informazione precisa, come caricamento completato, errore, attività in corso, connessione attiva o servizio offline.

Questo tipo di grafica è molto comune in dashboard, pannelli di controllo, applicazioni web e interfacce amministrative. Usare SVG inline in HTML per questo scopo ha diversi vantaggi:

• è scalabile senza perdere qualità;
• può essere stilizzato con CSS;
• può includere testo accessibile per lettori di schermo;
• si integra bene con layout responsive;
• non richiede immagini esterne per elementi semplici.

In questo tutorial vedremo come costruire una piccola card di stato con SVG inline, pensata per essere chiara, riutilizzabile e accessibile. L’obiettivo non è fare un disegno complesso, ma mostrare una soluzione concreta che puoi adattare a casi reali.

Codice completo

<div class="status-card">
  <div class="status-icon">
    <svg
      viewBox="0 0 120 120"
      width="120"
      height="120"
      role="img"
      aria-labelledby="statusTitle statusDesc"
      focusable="false">

      <title id="statusTitle">Stato del servizio: attivo</title>
      <desc id="statusDesc">Un cerchio verde con un segno di spunta indica che il servizio è operativo.</desc>

      <circle cx="60" cy="60" r="54" fill="#E8F7EE" />
      <circle cx="60" cy="60" r="42" fill="none" stroke="#22A06B" stroke-width="8" />
      <path
        d="M44 61.5 L55 72.5 L78 48.5"
        fill="none"
        stroke="#22A06B"
        stroke-width="8"
        stroke-linecap="round"
        stroke-linejoin="round" />
    </svg>
  </div>

  <div class="status-content">
    <p class="status-label">Servizio online</p>
    <p class="status-text">Tutti i controlli sono regolari. Nessuna anomalia rilevata negli ultimi 15 minuti.</p>
  </div>
</div>

Se vuoi arricchire il comportamento visivo con CSS, puoi usare una classe sul contenitore e modificare il colore in base allo stato. Ad esempio, il medesimo componente può diventare “attenzione” o “errore” cambiando pochi valori.

<div class="status-card status-card--warning">
  <div class="status-icon">
    <svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-labelledby="warnTitle warnDesc">
      <title id="warnTitle">Stato del servizio: attenzione</title>
      <desc id="warnDesc">Un triangolo giallo con un punto esclamativo segnala un problema da verificare.</desc>

      <polygon points="60,14 110,102 10,102" fill="#FFF4D6" stroke="#D18B00" stroke-width="6" />
      <line x1="60" y1="42" x2="60" y2="68" stroke="#D18B00" stroke-width="8" stroke-linecap="round" />
      <circle cx="60" cy="82" r="5" fill="#D18B00" />
    </svg>
  </div>

  <div class="status-content">
    <p class="status-label">Attenzione</p>
    <p class="status-text">Un modulo esterno risponde lentamente. Il sistema resta disponibile, ma il tempo di risposta è aumentato.</p>
  </div>
</div>

Spiegazione

Vediamo nel dettaglio come funziona questa soluzione e perché è utile in un progetto HTML reale.

1. Il contenitore della card

La struttura esterna è una semplice card composta da due aree: l’icona SVG e il testo descrittivo. Questo approccio è molto pratico perché separa la parte visiva dalla parte informativa.

In un’interfaccia reale, il testo è spesso più importante della grafica. L’SVG serve a rafforzare il messaggio, non a sostituirlo. Per questo motivo è bene mantenere una descrizione leggibile anche senza interpretare il simbolo.

2. Il ruolo di viewBox

L’attributo viewBox definisce il sistema di coordinate interno dell’SVG. In questo esempio, viewBox="0 0 120 120" indica che il disegno è contenuto in uno spazio quadrato di 120 unità per lato.

Il vantaggio è fondamentale: puoi cambiare width e height senza alterare il contenuto grafico. L’SVG si adatta automaticamente, risultando perfetto per layout responsive e display ad alta densità di pixel.

3. Accessibilità con title e desc

Un SVG inline può essere reso accessibile con role="img" e con due elementi fondamentali:

• <title>: fornisce un nome breve alla grafica;
• <desc>: descrive il significato del simbolo in modo più esteso.

Questa soluzione è molto utile per lettori di schermo e tecnologie assistive. Nel caso di una grafica di stato, la descrizione deve comunicare il significato operativo dell’icona, non solo la sua forma.

4. Forme semplici, messaggio chiaro

Nel primo esempio abbiamo usato:

• <circle> per creare il cerchio di sfondo e il bordo;
• <path> per disegnare il segno di spunta.

Nel secondo esempio abbiamo usato:

• <polygon> per il triangolo di avviso;
• <line> e <circle> per il punto esclamativo.

Queste forme sono semplici, leggere e facili da mantenere. In SVG, spesso la soluzione migliore non è la più complessa, ma la più leggibile e riutilizzabile.

5. Responsive senza sforzo

Un SVG inline può essere reso responsive in molti modi. In questo caso il disegno ha un width e un height espliciti, ma potresti anche usare CSS per adattarlo al contenitore.

Se il layout cambia dimensione, l’SVG mantiene proporzioni e nitidezza. Questo è un vantaggio concreto rispetto alle immagini raster, soprattutto quando la grafica deve apparire bene su mobile, tablet e monitor grandi.

6. Perché è utile in dashboard e pannelli di controllo

Le grafiche di stato sono frequenti in contesti come:

• monitoraggio servizi;
• stato di sincronizzazione dati;
• notifiche di sistema;
• pannelli amministrativi;
• interfacce di assistenza tecnica.

In questi casi, un SVG inline è spesso preferibile a un’icona esterna perché può essere aggiornato facilmente con il markup, integrato nel DOM e letto meglio dagli strumenti di accessibilità.

Best practice

• Usa SVG inline quando il simbolo deve essere significativo, non solo decorativo. Se l’icona comunica uno stato, aggiungi sempre testo o una descrizione accessibile.
• Evita dettagli inutili. Una grafica di stato deve essere immediata: pochi elementi, contrasto chiaro, significato diretto.
• Preferisci forme geometriche semplici come circle, rect, line, path e polygon. Sono più facili da mantenere e più leggere.
• Non affidarti solo al colore. Verde, giallo e rosso sono utili, ma il simbolo deve restare comprensibile anche senza il colore, ad esempio con spunta, triangolo o croce.
• Usa title e desc quando l’SVG rappresenta un’informazione importante. Se invece è puramente decorativo, puoi nasconderlo alla tecnologia assistiva.
• Mantieni coerenza visiva tra stati diversi. Se “online”, “attenzione” ed “errore” fanno parte della stessa UI, usa dimensioni e stile simili.
• Centralizza i colori quando possibile, così puoi riutilizzare il componente in più schermate senza riscrivere il markup.

Riepilogo

Usare SVG inline in HTML per creare una grafica di stato accessibile e responsive è una soluzione semplice ma molto efficace. Ti permette di costruire elementi visivi chiari, leggeri e facilmente integrabili nelle interfacce moderne.

Abbiamo visto come:

• creare una card informativa con SVG inline;
• usare viewBox per mantenere la scalabilità;
• aggiungere accessibilità con title, desc e role="img";
• costruire simboli di stato con forme SVG semplici;
• rendere il componente adatto a dashboard e pannelli operativi.

Questo approccio è ideale quando vuoi che la grafica non sia solo decorativa, ma parte attiva della comunicazione dell’interfaccia.

Approfondisci con risorse ufficiali

• MDN Web Docs - SVG: documentazione completa su elementi, attributi e comportamento di SVG nel browser.
• MDN Web Docs - Accessibility: linee guida utili per rendere i contenuti comprensibili anche con tecnologie assistive.
• W3C SVG Specification: specifica ufficiale del formato SVG e dei suoi elementi.
• WAI-ARIA Authoring Practices: riferimenti utili per l’integrazione corretta di ruoli e descrizioni accessibili.
• Web.dev: articoli pratici su performance, accessibilità e best practice per componenti web moderni.