Quando usare SVG inline vs img?

Question

IT Interview Practice · Accepted Answer

SVG è un formato immagine **vettoriale** (basato su XML), quindi si scala a qualsiasi dimensione senza sfocatura. Puoi includerlo in due modi principali, ognuno con i suoi compromessi. ## SVG inline — markup direttamente nell'HTML ```html ``` **Pro:** puoi stilizzarlo con CSS (`fill`, `stroke`), animare le sue parti, cambiare colore via `currentColor` (eredita il colore del testo), e rispondere agli eventi — perché è un vero DOM. Nessuna richiesta HTTP aggiuntiva. **Contro:** gonfia l'HTML, non è cachato separatamente, icone ripetute duplicano il markup. ## SVG via `` — referenziato come file ```html

``` **Pro:** cachato dal browser, mantiene l'HTML pulito, semplice. **Contro:** **non puoi** stilizzare o scriptare i suoi interni con il tuo CSS/JS — è un'immagine opaca. ## Guida decisionale ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## Accessibilità ```html ``` ## Perché è importante La scelta tra SVG inline vs `` si riduce a stabilire se hai bisogno di **stilizzare/animare** il grafico (inline) o semplicemente **visualizzarlo** efficientemente (``). Icone che cambiano colore al passaggio del mouse o in base al tema vanno inline (spesso come componenti); asset di brand statici vanno tramite ``. In entrambi i casi, i vettori rimangono nitidi a ogni risoluzione — ideale per icone e loghi.

Quando usare SVG inline vs img?

SVG inline — markup direttamente nell'HTML

SVG via `<img>` — referenziato come file

Guida decisionale

Accessibilità

Perché è importante

Domande correlate

SVG inline — markup direttamente nell'HTML

SVG via <img> — referenziato come file

Guida decisionale

Accessibilità

Perché è importante

Domande correlate

SVG via `<img>` — referenziato come file