SVG vs PNG/JPG: perché i formati vettoriali sono essenziali per le prestazioni e la SEO
Meno KB da scaricare, rendering nitido da mobile a 4K, migliori Core Web Vitals. Ecco perché gli sviluppatori e gli esperti SEO stanno passando a SVG per i loro loghi e icone.
Come ottimizzare un logo PNG o JPG in SVG (3 passaggi)
Non serve Illustrator. PixelToPath vettorializza il tuo file e ti fornisce un SVG pronto per essere incorporato in HTML.
Carica il PNG o JPG
Rilascia il logo, l'icona o il pittogramma attualmente servito come PNG o JPG. Più semplice è il tracciato (colori a tinta unita, bordi netti), più piccolo sarà il file SVG.
Scegli il preset giusto
Bianco e Nero per un logotipo o un'icona monocromatica. Poster se il logo ha pochi colori piatti. Evita Foto: troppi dettagli appesantiscono l'SVG senza alcun vantaggio visivo per un logo.
Incorpora l'SVG sul sito
Scarica il file e servilo come immagine, sprite o SVG inline. Un singolo file sostituisce le varianti @1x, @2x e @3x.
PNG e JPG: perfetti per le foto, troppo pesanti per l'interfaccia utente
PNG e JPG sono formati raster: l'immagine è una griglia di pixel. Un logo esportato come PNG 512×512 "fotografa" ogni punto. Per mantenere la nitidezza su uno schermo Retina, spesso è necessario servire una versione due o tre volte più grande, il che significa due o tre volte più KB. Il formato JPG comprime meglio le foto, ma distrugge le tinte piatte, aggiunge artefatti attorno al testo e non supporta la trasparenza. Nessuno dei due è progettato per un logotipo o un'icona che deve essere visualizzata a 24px nella navigazione e a 240px nell'immagine hero.
SVG (Scalable Vector Graphics) descrive le forme utilizzando curve e coordinate, not pixel. Vettorializzare un PNG con PixelToPath significa sostituire una bitmap statica con un tracciato che il browser ridisegna all'esatta dimensione dello schermo. Il risultato: un file tipicamente molto più leggero e una nitidezza identica su schermi mobile, desktop e 4K.
Cosa cambia concretamente l'SVG per un sito web
Per l'interfaccia, l'SVG non è un "bonus" estetico. È una leva prestazionale: meno byte sulla rete, meno varianti da mantenere, caching più semplice e rendering vettoriale nativo in tutti i browser moderni.
I vantaggi più visibili per uno sviluppatore o un esperto SEO:
- Peso: un semplice logo passa spesso da 40 a 80 KB in PNG a pochi KB in SVG, ed elimini le esportazioni @2x / @3x
- Scalabilità: un singolo file, nitido sia a 16px che a schermo intero 4K, senza srcset o media query per le immagini
- Core Web Vitals: meno dati da scaricare (LCP) e un segnaposto stabile tramite viewBox (CLS)
- SEO Tecnica: pagine più veloci su mobile, un formato compreso da Google e testo potenzialmente presente all'interno dell'SVG
PNG vs SVG: il peso di un logo non è trascurabile
Le immagini rimangono uno dei maggiori fattori di peso di una pagina. Ottimizziamo le foto in WebP, ma dimentichiamo il logo dell'intestazione e le venti icone PNG nel CSS. Eppure questi file vengono ripetuti in tutti gli URL: ogni millisecondo perso è perso sull'intero sito.
Ordini di grandezza osservati dopo la vettorializzazione con PixelToPath, nel tipico scenario di un sito vetrina o di un'app web:
| Scenario | PNG / JPG | SVG |
|---|---|---|
| Logo da 512px con trasparenza | Da 40 a 80 KB | Da 2 a 12 KB a seconda dei colori e dei nodi |
| Stesso logo servito @2x (1024px) per Retina | Il peso raddoppia, a volte triplica | Un singolo file, invariato |
| 20 icone UI esportate @3x (72×72) | Da 40 a 160 KB aggiunti all'interfaccia | Pochi KB in totale |
| Logo a colori piatti da un JPG | Artefatti e aloni attorno a forme e testo | Bordi netti e un file ancora più leggero |
La regola è semplice: tutto ciò che è forma, testo, pittogramma o logotipo trae vantaggio dall'essere un SVG. Le fotografie e gli screenshot restano in JPG, WebP o AVIF. L'SVG non è un sostituto universale: è il formato giusto per l'interfaccia.
Scalabilità: un unico file nitido dallo smartphone al 4K
Un PNG è nitido solo alla sua risoluzione nativa. Ingrandendolo, si vedono i pixel. Riducendolo drasticamente, il browser deve ricampionarlo. Da qui la ginnastica di file @1x, @2x, @3x, srcset e densità CSS. Ogni nuovo breakpoint o nuova densità di schermo (Retina, telefoni recenti, monitor 4K) richiede una nuova esportazione o un file troppo grande "per ogni evenienza".
L'SVG ignora questo vincolo. Il motore di rendering calcola le curve alla dimensione CSS richiesta. Favicon da 32px, logo da 48px nella navigazione, stesso marchio a 400px nel banner, proiezione 4K: il file è lo stesso. Nessuna sfocatura, nessun aliasing, nessuna seconda richiesta per la versione ad alta densità. Per una libreria di componenti, significa anche meno debito tecnico: un'icona, un file, tutte le dimensioni.
Core Web Vitals e SEO: perché Google si preoccupa del formato
La velocità su mobile è un fattore di posizionamento. I Core Web Vitals (LCP, INP, CLS) misurano l'esperienza dell'utente. Sostituire un pesante logo PNG o un mucchio di icone raster con SVG non farà passare una pagina da 4 MB a 40 KB. Ma sul layout del sito, l'effetto è immediato, specialmente su una rete 4G o quando l'LCP è rallentato dal logo dell'intestazione.
In pratica, il formato vettoriale aiuta tre metriche, a patto di mantenere ragionevole la complessità del tracciato:
- LCP (Largest Contentful Paint): se l'elemento visibile più grande è un logo o un'illustrazione piatta, un SVG di pochi KB arriva prima di un PNG da 150 KB @2x. Meno congestione di rete per il resto della pagina
- CLS (Cumulative Layout Shift): un SVG con width, height e viewBox riserva il suo spazio fin dall'analisi dell'HTML. Non si aspetta più la decodifica della bitmap per conoscere le proporzioni, quindi meno spostamenti di layout
- INP e thread principale: un SVG semplice (logo, icona) è economico da renderizzare. Tuttavia, evita gli SVG "fotografici" con migliaia di tracciati: possono pesare più di un PNG e sovraccaricare la CPU. Da qui il valore di un ricalco pulito tramite PixelToPath, e non di una copia pixel per pixel
- SEO oltre la velocità: Google indicizza gli SVG. Un logo incorporato può avere un titolo accessibile. Un'immagine SVG con attributo alt rimane fondamentale. Inoltre, una pagina più leggera riduce la frequenza di rimbalzo tecnico, un segnale di esperienza considerato nel posizionamento
Perché vettorializzare con PixelToPath piuttosto che esportare manualmente?
Hai già il PNG del cliente, non il file sorgente Illustrator. PixelToPath ricrea tracciati puliti, gratuiti e pronti per il web.
SVG leggero e pronto all'uso
Il motore produce tracciati utilizzabili, non una fabbrica di nodi. L'ideale per un logo o un'icona che servirai a ogni visualizzazione di pagina.
Completamente gratuito
Nessun abbonamento di design, nessuna filigrana sull'SVG. Vettorializza le linee guida dell'intero brand (logo, favicon, set di icone) a costo zero.
Privacy dei file
I file del brand vengono elaborati e poi eliminati. Non viene conservato nulla, nulla viene riutilizzato. Adatto per le linee guida dei brand sotto NDA.
Preset per loghi e pittogrammi
Bianco e Nero per icone monocromatiche, Poster per loghi a colori piatti. Sei tu a controllare il livello di dettaglio prima dell'esportazione.
Elaborazione batch su desktop
Hai un set di icone PNG da convertire in SVG? L'app open source per Windows / Linux elabora i file offline, senza quote.
PNG, JPG, BMP, WebP
Un unico strumento, che il logo arrivi come PNG trasparente, JPG scansionato o esportazione WebP da Figma.
Dove l'SVG batte PNG/JPG su un sito reale
Questa non è teoria. Ecco i punti in cui il formato vettoriale ripaga immediatamente:
- Logo dell'intestazione e del piè di pagina: un singolo file, nitido su Retina, spesso uno degli elementi più visti, e talvolta l'LCP su un'homepage minimalista
- Sistema di icone: niente più sprite PNG 1x/2x. Ogni pittogramma è un SVG (o sprite SVG), stilizzabile con CSS (currentColor) senza una nuova esportazione
- Favicon e apple-touch: una moderna favicon SVG più un PNG di fallback evitano di mantenere un mucchio di dimensioni da 16, 32, 180px
- Illustrazioni dell'interfaccia utente ed empty states: i disegni vettoriali piatti rimangono nitidi a schermo intero, senza costare il peso di un'immagine hero
- Landing page SEO: ogni KB risparmiato sul layout migliora Lighthouse, PageSpeed Insights e l'esperienza mobile, segnali che il posizionamento aggrega
Mantieni JPG/WebP per le foto. Passa loghi, pittogrammi e illustrazioni piatte a SVG. Questa è la divisione che i siti più veloci già applicano.
Guide di conversione correlate
Vettorializza i tuoi file, poi approfondisci il formato che ti interessa.
Domande Frequenti
Un SVG è sempre più leggero di un PNG o un JPG?
Per un logo, un'icona o un'illustrazione piatta: sì, quasi sempre, specialmente se si confronta il PNG con la sua versione Retina. Per una fotografia, no: un SVG "fotografico" diventa una nuvola di tracciati più pesante di un JPG o WebP. Vettorializza l'interfaccia utente, comprimi le foto.
L'SVG migliora davvero i Core Web Vitals e la SEO?
Migliora ciò che le immagini dell'interfaccia utente possono migliorare: meno byte (LCP se il logo o l'illustrazione è l'elemento principale), un riquadro di rendering prevedibile (CLS), meno varianti da scaricare. Google utilizza la velocità come segnale, in particolare sui dispositivi mobili. Non è una scorciatoia magica per il posizionamento, è un'igiene tecnica misurata in PageSpeed Insights.
Dovrei sostituire tutte le immagini del sito con SVG?
No. Foto, screenshot, texture, gradienti complessi: JPG, WebP o AVIF. SVG per loghi, icone, diagrammi, pittogrammi, illustrazioni piatte. Un SVG eccessivamente dettagliato può danneggiare l'INP. Il preset Foto di PixelToPath serve per stilizzare, non per sostituire un JPEG di contenuto.
Come incorporare un SVG senza causare CLS?
Fornisci sempre una larghezza e un'altezza (o un aspect-ratio CSS) che corrispondano alla viewBox. Con un tag immagine (src, width, height, alt), il browser riserva lo spazio prima del download. Per gli SVG inline, mantieni la viewBox ed evita di iniettare il codice dopo il primo paint senza dimensioni.
Come ottengo un logo SVG da un PNG con PixelToPath?
Apri lo strumento online, rilascia il PNG (idealmente su uno sfondo trasparente, abbastanza grande), scegli Bianco e Nero o Poster, regola i dettagli, quindi converti. Apri l'SVG nel browser o in Figma per controllare i contorni, poi servilo in produzione. Gratuito, nessun account, i file non vengono conservati.
Converti il tuo logo PNG in SVG, misurane il peso
Carica il tuo file attuale, scarica l'SVG, confronta i KB. Gratuito, nessuna registrazione. La prima leva per i Core Web Vitals spesso si trova proprio lì.
Supporta lo Sviluppo Open Source
PixelToPath è gratuito. Se questo strumento ti ha aiutato a risparmiare tempo, considera di offrirmi un caffè.
❤️ Dona tramite PayPal