Sprite di simboli SVG: conserva ID, viewBox e colori

Uno sprite di simboli SVG conserva definizioni di icone con nome in un unico file SVG. Ogni icona visibile usa un elemento <use> per fare riferimento alla definizione necessaria. Questo confezionamento funziona soltanto se ID del frammento, sistema di coordinate e regole di colore sopravvivono al trasferimento dai file individuali.

Parti da due icone prima di combinare una cartella intera. In questa guida una foglia usa uno spazio di coordinate quadrato e una freccia verso destra ne usa uno largo. La foglia apparirà in due colori senza duplicare il tracciato. La freccia manterrà le proporzioni anziché essere forzata nella tela della foglia.

Se le icone sorgente richiedono ancora forme, margini o peso ottico coerenti, completa prima il procedimento di preparazione SVG per kit UI. Uno sprite organizza la grafica; non la corregge.

Crea due definizioni di simboli con nome

Salva questo esempio originale come sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

Il nome della foglia è pv-leaf; quello della freccia è pv-arrow. Sono gli identificatori che la pagina richiederà. MDN descrive symbol come una definizione grafica riutilizzabile istanziata attraverso use. Un file contenente soltanto simboli può apparire vuoto quando aperto da solo perché le definizioni non vengono renderizzate direttamente.

Conserva il viewBox con la grafica che descrive. Qui la foglia usa 0 0 24 24 e la freccia 0 0 32 16. Quei numeri definiscono i limiti delle coordinate, non dimensioni obbligatorie di visualizzazione. Cambiare i limiti della freccia a 24 per 24 senza regolarne la geometria non è normalizzazione. Consulta la documentazione MDN di viewBox per la mappatura tra coordinate e viewport.

Per una famiglia di icone esistente, conserva la griglia concordata. Le forme miste qui dimostrano un altro punto: il confezionamento deve preservare il sistema di coordinate già approvato. Se una freccia deve seguire l'estremità di una linea o curva, usa i marcatori SVG per punte di freccia personalizzate allineate per definire punto di collegamento e direzione.

Fai riferimento allo sprite da una pagina

Metti sprite.svg, la pagina HTML e icons.css nella stessa directory servita. Parti da un'anteprima HTTP con la stessa origine così una restrizione dei file locali o un host diverso non nascondono un errore di riferimento di base.

Aggiungi queste regole a icons.css e carica quel foglio di stile dalla pagina:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

Poi aggiungi queste istanze al body HTML:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

La parte prima di # individua il file; quella dopo seleziona il simbolo. L'attributo moderno è href. La documentazione MDN di use descrive i riferimenti esterni e avverte che i browser possono rifiutare caricamenti da altre origini. Non supporre che spostare uno sprite funzionante su una CDN sia un cambiamento immediato senza conseguenze; testa la posizione di consegna effettiva.

Alle dimensioni predefinite del font radice del browser, queste regole danno alla foglia un riquadro di 24 per 24 pixel CSS e alla freccia uno di 48 per 24. Le dimensioni usano rem, quindi una dimensione del font radice diversa le cambia. Confronta le icone nel componente reale oltre che in un'anteprima ingrandita: un riquadro corretto può comunque contenere grafica con troppo margine.

Il pulsante sopra dimostra presentazione e denominazione dell'icona. Aggiungi il gestore dell'azione dell'applicazione quando lo usi in un prodotto.

Scegli la regola di colore prima di combinare i file

Entrambi i tracciati dell'esempio usano esplicitamente fill="currentColor". Questo consente a un'istanza utilizzatrice di usare il color CSS circostante: il pulsante fornisce verde petrolio, mentre la freccia fornisce blu scuro. La documentazione di color spiega che currentColor può fornire il valore usato da riempimenti e contorni.

Per la seconda comparsa della foglia, usa lo stesso riferimento pv-leaf e cambia il color dell'istanza in corallo. Non duplicare il tracciato soltanto per creare un altro colore del tema.

Non sostituire ogni riempimento di un logo multicolore con currentColor. Questo elimina deliberatamente la palette. Se il file cambia già colore prima del confezionamento nello sprite, usa la guida alla diagnosi dei colori SVG per isolare quel problema precedente.

Evita anche di costruire un'API dello sprite basata su selettori arbitrari di pagina che raggiungano i tracciati referenziati. MDN osserva limiti di stile per il contenuto clonato in use. Inserisci il comportamento di colore previsto nella grafica sorgente e testa chi la usa.

Evita ID duplicati dentro la grafica

Nomi di simboli univoci sono necessari, ma un SVG esportato può contenere più ID al suo interno: gradienti, maschere, tracciati di ritaglio o altre definizioni referenziate. MDN richiede che ogni id SVG sia univoco nel proprio albero di nodi. Due file prima separati possono violare quella regola quando vengono combinati.

Per esempio, supponi che un'esportazione di foglia e una di distintivo contengano entrambe un gradiente chiamato paint0. Aggiungi un prefisso all'ID del gradiente della foglia e al riferimento corrispondente insieme:

Il frammento deve ancora puntare alla definizione prevista. Gli esempi MDN di fill mostrano questa relazione tra ID del gradiente e url(#...). Assegna al distintivo il proprio prefisso anziché far puntare entrambi i riferimenti al gradiente della foglia.

Il nostro esempio con due tracciati non ha definizioni annidate, rendendolo un utile primo controllo. Per un'esportazione reale, inventaria tutti gli ID e riferimenti locali prima di combinare i file. Dopo l'esecuzione di un ottimizzatore o generatore, ripeti quell'inventario sullo sprite consegnato. Rinominare soltanto il simbolo esterno non risolve ID interni duplicati.

Nomina ogni istanza visibile nel proprio contesto

La foglia accanto alla parola visibile "Garden" ripete informazioni già fornite dal pulsante. Il suo SVG usa aria-hidden="true", lasciando al testo del pulsante il compito di fornire il nome. Mantieni quell'attributo sull'SVG decorativo, non sul pulsante interattivo. Le indicazioni MDN per aria-hidden descrivono contenuti decorativi e avvertono di non nascondere elementi che possono ricevere il focus.

La freccia autonoma ha un ruolo diverso: comunica una direzione senza testo vicino. Il suo elemento SVG contenitore usa role="img" e aria-label="Right direction", seguendo le indicazioni MDN per denominare un'immagine SVG incorporata.

Decidi l'etichetta nel punto di utilizzo. Una foglia riutilizzabile può significare "Giardino", "Di origine vegetale" o nulla oltre alla decorazione in interfacce diverse. Testa il nome accessibile del componente finale con gli strumenti di ispezione dell'accessibilità del browser e le tecnologie assistive di destinazione; un simbolo riutilizzabile da solo non stabilisce quel contesto.

Controlla lo sprite consegnato, non soltanto i file sorgente

Abbiamo controllato questo esempio originale in un test nel browser con la stessa origine. La foglia veniva renderizzata in verde petrolio e corallo, la freccia larga manteneva la forma e un frammento volutamente assente produceva un riquadro icona vuoto. L'albero di accessibilità del browser esponeva il pulsante Garden e la freccia con nome. È un controllo di questo campione, non una certificazione tra browser o lettori di schermo.

Usa lo stesso piccolo insieme di controlli dopo il confezionamento:

1. File: conferma che la pagina carichi lo sprite previsto dall'URL finale.
2. Frammento: confronta ogni frammento href con l'ID del simbolo consegnato, incluse maiuscole e minuscole.
3. Limiti: confronta componente piccolo e grafica ingrandita per ritagli, margini e proporzioni.
4. Colore: renderizza un'icona monocromatica in due colori del tema ed esamina separatamente la grafica con colori fissi.
5. Riferimenti interni: controlla che i riferimenti a colori, maschere e ritagli con prefisso si risolvano ancora dopo l'ottimizzazione.
6. Significato: esamina il nome di ogni componente interattivo e l'etichetta di ogni immagine autonoma significativa.

Se il file si carica ma una sola istanza è vuota, controlla il frammento prima di cambiare la geometria. Se la stessa grafica è vuota anche come normale SVG, segui i più ampi controlli per SVG vuoti. Se appare pixelata quando ingrandita, cerca un'immagine raster incorporata prima di supporre che lo sprite abbia causato il problema.

Quando l'unica sorgente è un'icona PNG

Se una semplice icona esiste soltanto come PNG, converti quel PNG in SVG con PerfectVector prima di confezionarlo. Esamina sagoma, fori e regioni di colore risultanti rispetto alla sorgente, poi approva limiti delle coordinate e regola di colore. Infine assegna ID stabili alla grafica approvata e aggiungila allo sprite. La conversione fornisce grafica vettoriale; non sceglie nomi dei simboli, semantica dei componenti o architettura di consegna.

Se esiste un SVG originale pulito, usalo. Ricalcarlo di nuovo introduce un altro passaggio di recupero delle forme senza risolvere un riferimento di frammento rotto. Consulta le guide di modifica e preparazione SVG quando il problema restante è nella grafica anziché nel confezionamento.

FAQ

Perché il mio sprite SVG è vuoto quando lo apro direttamente? Uno sprite contenente soltanto definizioni di simboli non li visualizza direttamente. Testalo attraverso un'istanza SVG use con percorso file e ID del frammento corretti prima di considerare il documento vuoto come grafica danneggiata.

Ogni simbolo deve avere lo stesso viewBox? No. Conserva ogni sistema di coordinate approvato durante il confezionamento. Le icone che condividono una griglia del sistema di design possono usare limiti corrispondenti, ma un simbolo largo non diventa un'icona quadrata soltanto cambiando i numeri del viewBox.

Perché cambiare il colore della pagina non ricolora l'icona? Controlla la regola di colore sorgente. Un riempimento fisso è diverso da un tracciato scritto con currentColor. Conserva la grafica multicolore voluta e scegli esplicitamente quali riempimenti o contorni devono ereditare il colore dell'istanza.

Posso mettere lo sprite su un altro dominio? Non supporre che un riferimento use esterno funzioni tra origini diverse. Parti da un campione con la stessa origine, poi testa host effettivo e browser di destinazione prima di cambiare la consegna. Un esempio locale riuscito non dimostra supporto tra origini diverse.

Fonti

1. MDN — symbol — Definizioni riutilizzabili e rendering indiretto.
2. MDN — use — Frammenti esterni, limiti di stile e restrizioni di origine.
3. MDN — viewBox — Relazione tra limiti delle coordinate e viewport.
4. MDN — color — currentColor come ingresso del colore SVG.
5. MDN — id — Univocità degli identificatori nell'albero del documento.
6. MDN — fill — Riferimenti a definizioni di colore come URL dei gradienti.
7. MDN — aria-hidden — Contenuto decorativo e precauzioni per elementi che possono ricevere il focus.
8. MDN — Ruolo img — Elemento SVG contenitore con etichetta per un'immagine significativa.

Parti da due icone approvate e testa nomi, limiti e colori nel componente effettivo. Se una sorgente esiste soltanto come immagine raster adatta, recupera i tracciati SVG, esamina la grafica, poi aggiungi il risultato accettato allo sprite.