PNG o SVG? Un Diagramma Decisionale per Designer, Sviluppatori e Marketer

Ogni immagine che pubblichi è una scelta — il formato sbagliato ti costa velocità di pagina, qualità di rendering o entrambi. Questa guida ti dà la profondità tecnica per scegliere con sicurezza tra PNG e SVG ogni volta, con benchmark reali e codice da copiare.

Come i Browser Renderizzano Realmente Ogni Formato

PNG: Decodifica Griglia di Pixel

1. Il browser scarica il binario, decomprime il flusso DEFLATE.
2. La bitmap decodificata viene rasterizzata in una texture GPU.
3. La texture si compone alle dimensioni native in pixel. Ingrandisci e il browser interpola — ecco la sfocatura.

SVG: DOM + Paint

1. Il browser analizza XML in un sotto-albero DOM (o contesto immagine via <img>).
2. Ogni <path>, <rect>, <circle> si risolve rispetto al viewport corrente.
3. Le istruzioni vettoriali si rasterizzano al volo a qualsiasi risoluzione — 1x, 2x, 100x. Sempre nitido.

Confronto Tecnico Approfondito

Compressione

• PNG usa DEFLATE senza perdita. Ottimo per colori piatti, ma le foto si gonfiano — 1200x800 raggiunge facilmente 1-2 MB.
• SVG è XML in testo chiaro che si comprime spettacolarmente con brotli. Un SVG da 12 KB si trasferisce abitualmente a 3 KB.

Trasparenza

• PNG memorizza un canale alfa a 8 bit — trasparenza liscia per pixel.
• SVG supporta opacity, fill-opacity, rgba(), più mascheramento e percorsi di ritaglio.

Animazione

• PNG è statico (APNG esiste ma con strumenti limitati).
• SVG supporta SMIL, keyframes CSS e animazione JavaScript — tutto indipendente dalla risoluzione.

Benchmark Prestazioni

Numeri reali da un audit Lighthouse 2026 (Moto G Power, Chrome 124, throttle 4G):

Matrice Decisionale

Esempi di Codice

SVG Responsive (scala con il container)

<svg viewBox="0 0 120 40" role="img" aria-label="Logo"
     class="logo" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 35 L25 5 L40 35" fill="currentColor"/>
  <text x="50" y="30" font-size="16" fill="currentColor">vectosolve</text>
</svg>
<style>
  .logo { width: 100%; max-width: 240px; height: auto; color: #0f172a; }
  @media (prefers-color-scheme: dark) { .logo { color: #f8fafc; } }
</style>

PNG Responsive con srcset

<img src="/images/hero-800.png"
  srcset="/images/hero-400.png 400w, /images/hero-800.png 800w, /images/hero-1600.png 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Screenshot dashboard analytics" width="800" height="450" loading="lazy" decoding="async" />

L'Elemento <picture>: Il Meglio di Entrambi

<picture>
  <source srcset="/images/photo.avif" type="image/avif" />
  <source srcset="/images/photo.png" type="image/webp" />
  <img src="/images/photo.png" alt="Prodotto con sfondo trasparente"
       width="600" height="600" loading="lazy" />
</picture>

Supporto Browser e Casi Limite

SVG

• Supporto completo in tutti i browser moderni dal ~2015.
• Font SVG: <text> usa font di sistema/web. Converti testo in percorsi per loghi pixel-perfect (ma perdi accessibilità).
• Sprite esterni: <use href="sprite.svg#icon"> non funziona cross-origin in alcune versioni di Safari.
• Sicurezza: SVG inline può eseguire JavaScript. Mai fare inline di SVG di utenti non fidati senza sanitizzazione.

PNG

• Supporto universale — tutti i browser, client email e piattaforme. Zero casi limite.
• Profili colore: I profili ICC incorporati renderizzano diversamente in Safari vs Chrome. Rimuovili durante l'ottimizzazione.
• APNG: Supportato nei browser moderni ma strumenti limitati e file più grandi dell'animazione SVG/CSS.

Checklist Ottimizzazione

SVG

1. Passa attraverso SVGO o l'ottimizzatore di VectoSolve per rimuovere metadati.
2. Rimuovi livelli nascosti, <defs> non usati, gruppi vuoti.
3. Semplifica percorsi — meno punti di controllo significa meno byte.
4. Servi con Content-Encoding: br (brotli).
5. Fai inline degli SVG critici per eliminare un round-trip di rete.

PNG

1. Usa oxipng, pngquant o Squoosh per ridurre la dimensione.
2. Esporta esattamente alle dimensioni necessarie.
3. Fornisci srcset con varianti 1x e 2x.
4. Imposta width/height espliciti per prevenire CLS.
5. Aggiungi loading="lazy" per immagini sotto il fold.

Quando Convertire Tra Formati

PNG a SVG

Hai un logo raster e ti serve una versione scalabile. Il tracciamento manuale richiede 30+ minuti. La vettorizzazione AI su VectoSolve richiede secondi e produce percorsi puliti e ottimizzati.

SVG a PNG

Ti serve un export raster per condivisione social o una piattaforma che non accetta SVG. Usa il convertitore SVG a PNG di VectoSolve per esportare a qualsiasi risoluzione.

"

Il miglior formato immagine è quello che consegna il file più piccolo alla qualità che il tuo design richiede. Tutto il resto è dogma.

Conclusione

Non esiste un formato universalmente "migliore" — solo il formato migliore per il lavoro. SVG domina per tutto ciò che scala, anima o si stilizza con codice. PNG e i suoi cugini moderni (WebP, AVIF) dominano per immagini fotografiche e ad alta complessità.

L'albero decisionale è breve: grafica vettoriale → SVG. Fotografia → raster. Illustrazione complessa → fai benchmark di entrambi. Segui gli esempi di codice, ottimizza i tuoi asset e pubblicherai pagine veloci, nitide e a prova di futuro.

Devi convertire tra formati? VectoSolve gestisce entrambe le direzioni — vettorizzazione PNG a SVG e export SVG a PNG.

Fonti e Approfondimenti

• MDN Web Docs — SVG — Riferimento completo per punti di forza e limiti SVG
• web.dev — Guida ottimizzazione immagini Google con alberi decisionali formato
• CSS-Tricks: Using SVG — Esempi pratici di quando SVG batte PNG e viceversa
• W3C SVG 2 Specification — Specifica tecnica sulle capacità SVG vs formati raster