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.
<img> — referenziato come file<img src="logo.svg" alt="Company logo" width="120" />
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.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
La scelta tra SVG inline vs <img> si riduce a stabilire se hai bisogno di stilizzare/animare il grafico (inline) o semplicemente visualizzarlo efficientemente (<img>).
Icone che cambiano colore al passaggio del mouse o in base al tema vanno inline (spesso come componenti); asset di brand statici vanno tramite <img>.
In entrambi i casi, i vettori rimangono nitidi a ogni risoluzione — ideale per icone e loghi.