SVG inline vs <img>: pro e contro

Gli SVG possono essere inseriti nel documento in vari modi: inline nel codice HTML, come src di un tag img, come background CSS, o tramite object. Ognuno ha implicazioni diverse su performance, stilizzazione, caching e accessibilità. Conoscere quando usare l'uno o l'altro permette di sfruttare al meglio i vantaggi del formato SVG.

SVG inline

SVG inline è scritto direttamente nel markup HTML come elemento <svg>. Vantaggi: nessuna richiesta HTTP aggiuntiva, possibilità di stilizzare ogni path via CSS, animazioni controllabili da JavaScript, accessibility avanzata via aria-label e role. Svantaggi: appesantisce l'HTML, non è cacheable separatamente, ripetere lo stesso SVG su più pagine duplica byte trasferiti se non si usa templating server-side.

SVG come img

<img src="icona.svg"> mantiene il file SVG separato e cacheable dal browser. Vantaggi: HTML pulito, caching efficiente, riuso senza duplicazione. Svantaggi: non puoi stilizzare gli elementi interni via CSS (regole esterne non si applicano), JavaScript del documento principale non accede al DOM SVG, accessibility limitata ad alt attribute. Buono per icone decorative riutilizzate.

SVG sprite e use

SVG sprite è una tecnica che combina più icone in un singolo file SVG con <symbol id="icon-name"> per ciascuna. Nelle pagine richiami con <svg><use href="sprite.svg#icon-name"></use></svg>. Vantaggio: una sola richiesta HTTP per tutto il set di icone, cache-abile globalmente. Stilizzabile via CSS (a differenza di SVG come img). Strumenti di build come svg-sprite o gulp-svg-sprite generano sprite automaticamente. Pattern usato dai design system enterprise come Bootstrap Icons, Feather Icons, Heroicons distribuiti come sprite.

Ottimizzazione SVG con SVGO

SVG esportato da Illustrator, Figma o Sketch contiene molto markup ridondante: metadata, commenti, attributi vuoti, decimali eccessivi. SVGO (svgo.dev) è uno strumento Node.js che riduce le dimensioni del 50-80% senza perdita visiva. Plugin disponibili per webpack, Vite, Rollup per ottimizzazione al build. Versione web app per ottimizzazione manuale. Risparmi notevoli per siti con molte icone o illustrazioni complesse. SVGO ha configurazione raffinata per disabilitare ottimizzazioni che potrebbero rompere animazioni o interazioni specifiche.

SVG e accessibility

Per SVG inline accessibility avanzata: aggiungi role="img" se il SVG è significativo, aria-label con descrizione concisa, o aria-labelledby riferendo un titolo. Per SVG complessi (diagrammi, grafici), usa <title> e <desc> come primi figli del SVG: title diventa il nome accessibile, desc la descrizione lunga. Per SVG decorativi, aria-hidden="true" lo esclude dall'albero accessibility. Per SVG come img, sempre alt descrittivo (vuoto se decorativo). Strumenti come axe DevTools rilevano automaticamente problemi di accessibility su SVG, integralo nel test routine.

SVG e animazioni

SVG inline si anima naturalmente con CSS (transform, opacity, stroke-dashoffset per disegno progressivo) o SMIL (deprecato ma ancora supportato). Librerie come GSAP eccellono per animazioni SVG complesse, supportando morphing tra paths, sequenze, easing avanzati. Anime.js è alternativa più leggera. Per icone interattive su hover, CSS basta. Per illustrazioni narrative o data visualization animata, GSAP. Performance: animazioni SVG su mobile possono essere costose; testa con device reali. Per micro-interactions UI, formato Lottie (basato su After Effects) è spesso più efficiente di SVG complesso animato.

Performance comparativa

Per icone piccole (sotto 1KB di SVG) inline vince in performance: zero richieste HTTP, render immediato, no FOUC. Per illustrazioni grandi (sopra 10KB) img è preferibile: caching dedicato, parallelo con altre risorse, non blocca parsing HTML. Per icone set, sprite SVG combina i vantaggi: una richiesta HTTP per tutto, ma stilizzabili come inline. Test su Chrome DevTools Performance: confronta scenari su pagina rappresentativa. Considera anche developer experience: sprite richiede tooling di build, inline ogni icona richiede markup ripetuto, img è il più semplice ma meno flessibile. Decisione context-dependent guidata da metriche reali.

Procedura passo-passo

1. Per icone con stili dinamici (hover, dark mode) usa inline SVG.
2. Per illustrazioni statiche riutilizzate molte volte preferisci img.
3. Per SVG di logo principale spesso inline è meglio (above-the-fold).
4. Per icone dell'interfaccia considera SVG sprite o symbol con <use>.
5. Per background decorativi usa CSS background-image: url().
6. Per accessibility inline aggiungi role="img" e aria-label.
7. Ottimizza SVG con SVGO per ridurre dimensioni.

Errori comuni e come risolverli

• Inline ovunque: duplica byte; usa inline solo dove serve stilizzazione o controllo JS.
• img per icone interattive: non puoi stilizzare via CSS; preferisci inline o symbol.
• Mancanza ottimizzazione: SVG da Illustrator può essere 10x più pesante del necessario; passa per SVGO.
• Accessibility ignorata: aggiungi sempre alt (per img) o aria-label (per inline).
• SVG sprite con XSS: SVG inline può eseguire script; sanitizza input utente prima di inserirlo.

Domande frequenti

D: SVG è meglio di PNG per icone?
R: Quasi sempre sì: scalabile, peso minore, stilizzabile. Per fotografie usa JPG/WebP.

D: Quando usare SVG sprite?
R: Quando hai molte icone riusate: una sola richiesta HTTP per tutto il set di icone.

D: Posso animare SVG con CSS?
R: Sì se inline, con transform, opacity, fill. Le animazioni SMIL sono deprecate.

D: SVG è SEO-friendly?
R: Sì se inline con testo interno indicizzabile, e con alt corretto se in img.

Hai bisogno di aiuto?

Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.