SVG inline: perfetto per un'icona, veleno per un'illustrazione

Ti hanno detto che l'SVG è leggero e nitidissimo, così lo metti ovunque e incolli il codice direttamente nella pagina. Quell'istinto è corretto, per una lente di ricerca o una piccola freccia. Diventa una trappola per le prestazioni nel momento in cui l'immagine si fa complessa, e un vero errore quando ciò che hai incollato non è nemmeno un vero vettoriale.

Alla fine di questa guida sarai in grado di guardare qualsiasi blocco di codice SVG e dire, a colpo d'occhio: questo va bene inline, questo va messo in un file esterno, oppure questo non è nemmeno un SVG. Questo singolo riflesso evita che le pagine raddoppino di peso senza motivo.

Cosa significa davvero "SVG inline"

Ci sono due modi per mettere un'immagine in una pagina. Primo, un tag immagine che punta a un file, come <img src="logo.svg">. Il browser legge il tag, poi va a recuperare il file separatamente. Secondo, un SVG inline: il disegno è scritto per intero, dentro il codice stesso della pagina, e ogni tratto diventa una riga di codice.

Un'analogia. Un tag immagine è un biglietto che dice "la foto è nel cassetto". Un SVG inline è copiare l'intera ricetta della foto, tratto per tratto, proprio in mezzo al tuo testo.

Quindi "inline" non è di per sé né buono né cattivo. Tutto dipende dalla dimensione della ricetta.

Perché una piccola icona inline è esattamente la scelta giusta

Il caso legittimo: una lente di ricerca, una freccia, un segno di spunta, un piccolo pittogramma. Pochi tratti, una manciata di nodi. Qui l'inline dà il meglio di sé.

• Zero richieste di rete aggiuntive. Nessun viaggio di andata e ritorno per recuperare un file da 300 byte, il disegno è già lì.
• Personalizzabile in CSS. Cambia il colore al passaggio del mouse con currentColor, animalo, tutto gratis.
• Visibile fin dal primo paint, niente da aspettare.

Il punto di svolta, quando l'inline diventa un problema

Qui sta il cuore della questione. Tre costi nascosti si accumulano nel momento in cui il disegno smette di essere una semplice icona e diventa un'illustrazione completa.

1. Il DOM esplode

Il DOM (Document Object Model) è l'elenco di ogni elemento che il browser deve tenere in memoria e ricalcolare a ogni interazione. Pensalo come l'inventario aggiornato della pagina.

Una semplice icona aggiunge pochi nodi. Un'illustrazione dettagliata esportata da uno strumento di design è centinaia di tracciati, quindi centinaia di nodi, per una singola immagine. Uno strumento di misura come Lighthouse avverte oltre i 800 elementi circa nella pagina e lo tratta come eccessivo oltre i 1.400 circa. Una sola illustrazione mal collocata può aggiungere 300 nodi da sola, una grossa fetta del budget, per niente.

Più grande è il DOM, più lento è ogni ricalcolo di stile e layout, più scroll e clic scattano. Questo colpisce direttamente l'interattività, la metrica INP (Interaction to Next Paint, quanto velocemente la pagina risponde a un clic o a un tocco).

2. Il tempo di parsing cresce

Prima di poter mostrare qualcosa, il browser deve leggere e interpretare ogni tratto dell'SVG inline. Moltiplicato per centinaia di tracciati, questo ritarda il primo paint.

E questo costo si paga sul thread principale, lo stesso che risponde ai clic. Quindi si sente ovunque, non solo al caricamento.

3. Zero cache, ricaricato a ogni pagina

Un SVG inline vive dentro il codice della pagina. non viene messo in cache da solo. Se compare su cinque pagine, viene riscaricato e ri-analizzato cinque volte. Un file .svg esterno, al contrario, viene scaricato una volta, poi servito dalla cache su ogni altra pagina. Non blocca il rendering, e può essere caricato in modo pigro quando si trova più in basso.

L'analogia: copiare la stessa ricetta completa in ogni capitolo di un libro, invece di un solo segnalibro che rimanda a un'unica appendice.

La trappola dentro la trappola, un raster travestito da SVG

Il caso peggiore, e sorprendentemente comune: un PNG o JPG codificato in base64, incollato dentro un tag SVG. Da fuori si legge come "un SVG". In realtà è una foto compressa trasformata in testo.

Il segnale rivelatore: se l'"SVG" pesa centinaia di kilobyte e contiene una lunga stringa come data:image/png;base64,iVBOR..., non è un SVG. È un'immagine raster nel cassetto sbagliato.

<svg width="1200" height="800" ...>
  <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
     ...tens of thousands of characters of encoded photo...
     ...kSuQmCC" width="1200" height="800"/>
</svg>

La soluzione: riesportare un vero file immagine, idealmente WebP (un formato immagine moderno, più leggero di JPEG o PNG), in un semplice tag immagine, con larghezza e altezza impostate, lazy loading se è fuori schermo, e versioni responsive. Queste versioni sono utili solo con un attributo sizes corretto: consulti la nostra guida su srcset e sizes.

Un caso reale, reso anonimo

Abbiamo controllato una pagina di un sito (una build Divi). Nulla sembrava sbagliato nell'editor, "aveva solo un paio di immagini" vicino al fondo.

La soluzione: il pittogramma come file .svg esterno (o un WebP alla sua dimensione reale), l'elemento visivo del podcast come WebP in un tag immagine. Pagina attesa: circa 400 KB, metà del codice da scaricare e analizzare. Il punto è che questo è esattamente il tipo di deriva che un audit automatico fa emergere, mentre all'occhio, nell'editor, "sembra solo un'immagine".

La regola di decisione, la parte da conservare

Una domanda, tre risposte.

1. È una foto, uno screenshot, un render realistico? Non è un lavoro per l'SVG. Tag immagine in WebP, responsive, lazy se fuori schermo.
2. È vettoriale, ma grande o complesso (una grande illustrazione, molti tracciati, oltre ~4 KB una volta ottimizzato)? Un file .svg esterno, richiamato da un tag immagine, precaricato se è importante e visibile presto.
3. È una piccola icona, pochi nodi, che vuoi colorare o animare in CSS? L'inline è perfetto.

In sintesi

Un SVG non è buono o cattivo. Ciò che conta è il formato giusto al posto giusto. Le stesse tre lettere possono essere una piuma o un'incudine a seconda di ciò che sta dentro.

Il riflesso diagnostico: guarda il peso del blocco e il numero di tracciati, non solo come appare. Un logo che appare nitido sullo schermo può comunque essere un raster da 300 KB travestito.