SVG Symbol

Un'alternativa ai font icona — utilizzo di sprite SVG symbol per incorporare icone scalabili e multicolore direttamente nell'HTML.

Cosa Sono gli Sprite SVG Symbol?

Gli sprite SVG symbol raggruppano più icone SVG in un singolo file. Ogni icona è definita all'interno di un elemento <symbol> con un id univoco. Per utilizzare un'icona, la si referenzia con <use href="#icon-id">. Lo sprite viene caricato una volta — sia inline che come file esterno — e le singole icone vengono renderizzate ovunque nella pagina.

Questo è un approccio fondamentalmente diverso dai font icona. Invece di mappare i punti di codice Unicode ai glifi del font, si utilizzano elementi SVG nativi. Ogni icona mantiene le sue funzionalità SVG complete: colori multipli, gradienti, filtri e attributi di accessibilità granulari. Il compromesso è un markup e convenzioni di stile leggermente più complessi rispetto all'approccio CSS puro dei font icona.

Come Funziona

Un file sprite è un documento SVG normale contenente uno o più elementi <symbol>. Ogni symbol definisce un'icona autonoma con il proprio viewBox:

icons.svg (il file sprite) 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

L'elemento <svg> esterno è nascosto con style="display:none" in modo da non occupare spazio sulla pagina. I symbol interni sono invisibili finché non vengono referenziati. Per renderizzare un'icona, usare l'elemento <use>:

Utilizzo dei symbol nell'HTML 
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Stilizzare le icone con CSS, usando fill e stroke invece della proprietà color basata sul font:

CSS per le icone SVG 
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

L'uso di fill: currentColor consente all'icona di ereditare il colore del testo del suo elemento genitore, in modo simile a come i font icona funzionano con la proprietà color.

Symbol vs Font Icona

    Vantaggi dei Symbol
  • Supporto multicolore — ogni percorso può avere il proprio fill e stroke
  • Ogni icona è un vero elemento SVG con migliore accessibilità
  • Nessuna mappatura Unicode necessaria — riferimento alle icone tramite nomi leggibili
  • Rendering più nitido — nessun problema di hinting del font o artefatti di subpixel
  • Le singole parti dell'icona possono essere animate in modo indipendente
  • Funziona con qualsiasi funzionalità SVG: gradienti, filtri, clip-path, maschere
    Svantaggi dei Symbol
  • Markup più verboso (<svg><use> vs <i class="icon">)
  • Non è possibile stilizzare facilmente con CSS color — necessario fill/stroke
  • Gli sprite esterni hanno implicazioni CORS per il caricamento cross-origin
  • Dimensione totale del file maggiore rispetto ai formati di font compressi
  • Maggior peso HTML per utilizzo di icona
  • Nessun supporto per pseudo-elementi ::before/::after

Strategie di Caricamento

Esistono tre modi principali per caricare uno sprite SVG symbol in una pagina, ognuno con diversi compromessi:

Sprite inline

Incollare l'intero sprite SVG direttamente nel <body> dell'HTML. Questo è l'approccio più semplice — nessun problema di CORS, nessuna richiesta HTTP aggiuntiva. I symbol sono immediatamente disponibili per qualsiasi riferimento <use> sulla pagina. Funziona meglio per applicazioni a pagina singola o quando si dispone di un set di icone ridotto (meno di ~50 icone).

Sprite esterno

Caricare lo sprite come file esterno tramite <use href="icons.svg#home">. Questo mantiene l'HTML pulito e consente al browser di memorizzare in cache lo sprite separatamente dalla pagina. Tuttavia, ha implicazioni CORS: lo sprite deve essere servito dalla stessa origine oppure il server deve impostare gli appositi header Access-Control-Allow-Origin. Si noti che Internet Explorer non supporta i riferimenti <use> esterni — usare il polyfill svg4everybody se è necessario il supporto a IE.

Iniezione JS

Caricare il file sprite tramite fetch() e iniettarlo nel DOM a runtime. Questo combina la cacheabilità degli sprite esterni con l'affidabilità degli sprite inline — il SVG iniettato diventa parte del documento, quindi i riferimenti <use> funzionano senza restrizioni CORS. Bobcorn genera questo approccio: un file JS che recupera e registra tutti i symbol al caricamento.

Approccio di iniezione JS (output Bobcorn) 
<!-- Caricare lo sprite JS generato -->
<script src="icons-symbol.js"></script>

<!-- Poi usare normalmente: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Il file JS crea un elemento <svg> nascosto contenente tutte le definizioni di <symbol> e lo aggiunge al corpo del documento. Una volta caricato, le icone vengono referenziate in modo identico all'approccio inline.

Quando Usare SVG Symbol

Gli sprite SVG symbol sono la scelta giusta quando il progetto necessita di funzionalità che i font icona non possono fornire:

  • Icone multicolore — quando le icone utilizzano più di un colore, gradienti o riempimenti complessi che un singolo glifo di font non riesce a rappresentare
  • L'accessibilità è una priorità assoluta — ogni icona può includere un elemento <title> e un attributo aria-label, fornendo ai lettori di schermo descrizioni significative
  • Parti di icona animate — è necessario animare singoli percorsi o gruppi all'interno di un'icona (ad es., un ingranaggio rotante all'interno di un'icona impostazioni)
  • Progetti con uso intensivo di SVG — l'applicazione utilizza già SVG inline in modo esteso, quindi i symbol si integrano naturalmente nell'architettura esistente
  • Nitidezza di rendering massima — l'hinting dei font può causare problemi di allineamento a dimensioni ridotte; i SVG symbol renderizzano perfettamente a qualsiasi dimensione

Quando Preferire i Font Icona

I font icona rimangono la scelta migliore in diversi scenari comuni:

  • Set di icone di grandi dimensioni (200+) — un file di font WOFF2 compresso è significativamente più piccolo di uno sprite SVG con lo stesso numero di icone
  • Tutte le icone monocromatiche — se ogni icona è di un singolo colore, i font icona offrono l'integrazione più semplice senza compromessi
  • Integrazione solo CSS — i font icona richiedono solo un link al foglio di stile e classi CSS, senza JavaScript o markup aggiuntivi
  • Sistemi legacy — i progetti che già utilizzano font icona non guadagnano abbastanza dal passaggio per giustificare il lavoro di migrazione
  • Supporto pseudo-elementi — è necessario utilizzare le icone nei pseudo-elementi ::before o ::after, che funzionano solo con i glifi del font
In Bobcorn
Bobcorn può esportare le icone come file sprite symbol JS insieme ai file di font. Abilitare l'opzione JS nella finestra di dialogo di esportazione. Il file generato crea uno sprite SVG inline e registra tutti i symbol al caricamento. È possibile utilizzare entrambi gli approcci nello stesso progetto — font per le semplici icone UI, symbol per le illustrazioni colorate complesse.
Suggerimento
Non è necessario scegliere l'uno o l'altro. Molti design system utilizzano font icona per la maggior parte delle icone UI monocromatiche (pulsanti, navigazione, elementi di form) e SVG symbol per alcune illustrazioni multicolore o icone animate. La finestra di dialogo di esportazione di Bobcorn consente di generare entrambi in una singola esportazione.