Come ottimizzare le icone SVG per siti Web e sistemi di progettazione
Prepara icone e loghi SVG per siti Web veloci e sistemi di progettazione manutenibili controllando viewBox, complessità del percorso, accessibilità, stile e consegna.
Risposta rapida
Mantieni un viewBox valido, rimuovi i metadati dell'editor, riduci la precisione del percorso non necessaria, utilizza dimensioni delle icone coerenti e decidi se i colori devono essere fissi o controllati da CSS. Dai agli SVG informativi un nome accessibile e nascondi le icone decorative dalla tecnologia assistiva. Testare il file ottimizzato alla dimensione più piccola supportata.
Scegli prima il modello di consegna
La migliore struttura SVG dipende da come verrà utilizzata.
| Modello di consegna | Ideale per | Principale compromesso |
|---|---|---|
Esterno <img> | Loghi e illustrazioni autonome | Impossibile definire percorsi interni con la pagina CSS |
| SVG in linea | Icone dell'interfaccia con temi e diagrammi interattivi | Aggiunge markup al file HTML |
| Icona componente | Sistemi di progettazione del prodotto | Richiede build controllate e convenzioni API |
| Sprite SVG | Grandi set di icone riutilizzabili | Maggiore complessità di configurazione e riferimento ai simboli |
| Sfondo CSS | Immagini decorative | Scarsa idoneità per contenuti significativi |
Non incorporare un SVG semplicemente perché è possibile. Le immagini esterne ripetute possono essere memorizzate nella cache; le icone interattive o tematiche traggono maggiori vantaggi dal markup in linea.
Conserva il viewBox
viewBox definisce il sistema di coordinate interno e consente il ridimensionamento reattivo. La sua rimozione spesso crea un comportamento fragile in larghezza e altezza. Standardizza i viewBox delle icone quando crei una libreria di componenti, ma non allungare la grafica in un nuovo rapporto.
Verifica che la geometria visibile utilizzi la tela in modo efficiente. Lo spazio vuoto in eccesso fa sì che le icone altrimenti identiche sembrino disallineate o sottodimensionate.
Riduci la complessità in modo sicuro
Le esportazioni vettoriali possono contenere spazi dei nomi dell'editor, commenti, livelli nascosti, gruppi ridondanti, precisione decimale eccessiva e stili duplicati. Ottimizzatore SVG rimuove il sovraccarico sicuro, ma ogni risultato ottimizzato dovrebbe comunque ricevere un controllo visivo di regressione.
Confronta questi parametri prima e dopo:
- Dimensione del file in byte
- Numero di percorsi e gruppi
- Lunghezza totale dei dati del percorso
- Rendering a 16, 24, 32 e 64 pixel
- Aspetto in temi chiari e scuri
Non inseguire il file più piccolo possibile se la semplificazione modifica la curva del marchio o colma un piccolo divario.
Definire un contratto di colore
Le icone dei prodotti spesso utilizzano currentColor in modo che il componente circostante ne controlli il colore. I marchi multicolori di solito necessitano di riempimenti espliciti. Documentare la regola e mantenerla coerente.
Utilizza Sostituto del colore SVG per modifiche di riempimento controllate, quindi ispeziona il markup per assicurarti che tratti e sfumature non siano stati lasciati involontariamente indietro.
Rendi l'accessibilità intenzionale
Per visualizzare un'icona decorativa accanto al testo visibile, nascondila dalla tecnologia assistiva. Per un'immagine autonoma e informativa, fornire un nome accessibile tramite l'HTML circostante o il titolo SVG appropriato e le relazioni di etichettatura.
Evita di inserire testo importante solo all'interno di tracciati vettoriali delineati. Gli utenti non possono selezionare o tradurre i caratteri delineati come testo normale e i motori di ricerca ricevono meno informazioni semantiche rispetto a quelle che riceverebbero dall'HTML.
Sicurezza per gli SVG caricati
SVG è un contenuto XML attivo. I file forniti dall'utente possono contenere script, riferimenti esterni o elementi imprevisti. Pulisci SVG non attendibile prima del rendering in linea o forniscilo tramite un percorso di rasterizzazione/download controllato.
Esegui Controllo del design SVG come verifica preliminare strutturale, quindi applica un disinfettante dedicato nell'applicazione che accetta caricamenti pubblici.
Lista di controllo del sistema di progettazione
- Utilizzare un viewBox documentato e una griglia di allineamento ottico.
- Mantieni coerenti la denominazione e le proposte dei componenti.
- Definire il comportamento dei colori fissi e dei colori tematici.
- Testare il comportamento della tastiera, dello screen reader e del contrasto elevato, ove pertinente.
- Misura il reale impatto del bundle e della pagina invece di dare per scontato che ogni SVG sia leggero.
Un sistema di icone ottimizzato è un'interfaccia del prodotto, non solo una cartella di file esportati.