SVG vs PNG: quando usare la grafica vettoriale

SVG: grafica vettoriale

SVG (Scalable Vector Graphics) è un formato vettoriale basato su XML. Invece di memorizzare ogni pixel, descrive forme geometriche: cerchi, rettangoli, percorsi e testo tramite coordinate matematiche.

Il risultato è un file che può essere ridimensionato a qualsiasi dimensione — da 16px a 16 metri — senza perdere mai nitidezza. Un logo SVG pesa tipicamente tra 1 e 20 KB, contro i 50–500 KB di un PNG equivalente ad alta risoluzione.

PNG: grafica raster

PNG (Portable Network Graphics) è un formato raster: memorizza una griglia di pixel. La qualità è fissa alla risoluzione originale — ingrandirlo produce pixel evidenti e sfocatura.

PNG usa compressione lossless e supporta la trasparenza, ma la dimensione del file scala con la risoluzione: un PNG 2000×2000 pixel occupa molto più di uno 500×500.

Tabella comparativa SVG vs PNG

Caratteristica	SVG	PNG
Tipo	Vettoriale	Raster
Scalabilità	∞ senza perdite	Limitata
Peso tipico	1–20 KB	Variabile
Trasparenza	✅	✅
Animazioni CSS/JS	✅	❌
Fotografie	❌	✅
Modificabile con CSS	✅	❌

Quando usare SVG

• Loghi aziendali: si visualizzano perfettamente su qualsiasi schermo, inclusi retina e 4K.
• Icone dell'interfaccia: icone UI, set di icone, pulsanti con icona.
• Illustrazioni semplici: infografiche, mappe, diagrammi, grafici decorativi.
• Icone animate: SVG può essere animato con CSS o JavaScript direttamente nel browser.
• Temi dark/light mode: puoi cambiare il colore dell'SVG con CSS (fill, stroke).

Quando usare PNG

• Fotografie con trasparenza: ritagli di persone o oggetti su sfondo trasparente.
• Screenshot di interfacce o applicazioni.
• Immagini con sfumature complesse che non si possono descrivere con vettori.
• Compatibilità con email: alcuni client email non supportano SVG inline.
• Quando ricevi un file PNG da un cliente e non hai il file sorgente vettoriale.

SVG inline vs SVG come tag <img>

Puoi includere SVG in due modi sul web. Come file esterno:

<img src="logo.svg" alt="Logo azienda" width="200" height="60">

Oppure inline (direttamente nell'HTML), che consente di modificare colori con CSS:

<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 20 L90 20" stroke="currentColor" stroke-width="2"/>
</svg>

La versione inline è più potente ma aumenta la dimensione dell'HTML. Usa file esterni per SVG che non cambiano colore dinamicamente.

Consiglio pratico

Regola semplice: se hai il file vettoriale (AI, EPS, Figma), esporta sempre in SVG per loghi e icone. Se hai solo una fotografia o un'immagine raster, usa PNG o WebP. Per i loghi dove non hai l'originale vettoriale, un PNG ad alta risoluzione (almeno 2× le dimensioni di visualizzazione) è un buon compromesso.

SVG e accessibilità: come renderlo inclusivo

Un SVG accessibile deve essere leggibile dagli screen reader e navigabile da tastiera. Le pratiche principali:

• Aggiungi sempre un elemento <title> come primo figlio dell'SVG: descrive l'immagine agli screen reader.
• Usa <desc> per una descrizione più lunga quando necessario.
• Aggiungi role="img" e aria-labelledby che puntano all'id del <title>.
• Se l'SVG è decorativo, usa aria-hidden="true" per nasconderlo agli screen reader.

<svg role="img" aria-labelledby="logoTitle" viewBox="0 0 100 100">
  <title id="logoTitle">Logo ToolsCove</title>
  <!-- percorsi SVG -->
</svg>

Ottimizzare SVG per il web: SVGO e tecniche manuali

I file SVG esportati da Illustrator o Figma spesso contengono metadati inutili, ID generati automaticamente e codice ridondante che può pesare 3–5x rispetto alla versione ottimizzata. Ecco come ridurli:

• SVGO (Node.js): strumento CLI che rimuove automaticamente elementi non necessari. npx svgo input.svg -o output.svg riduce tipicamente il file del 30–60%.
• Rimuovi manualmente: commenti XML, metadati Adobe/Inkscape (<sodipodi:*>, <inkscape:*>), gruppi vuoti.
• Semplifica i path: in Illustrator usa "Object > Path > Simplify" prima di esportare.
• Inline vs external: SVG inline nel HTML non richiede richiesta HTTP extra ed è modificabile via CSS, ma aumenta il peso del documento. SVG come <img src> è cached dal browser ma non modificabile via CSS.

Per i loghi, preferisci sempre SVG ottimizzato con SVGO. Per le icone, considera uno sprite SVG unico invece di file separati — riduce le richieste HTTP.

---

FAQ