# SVG o PNG: vettoriale o pixel per loghi e grafiche [Canonical HTML page](https://gradiently.design/it/guide/svg-vs-png) Un SVG è un insieme di istruzioni di disegno. Un PNG è una griglia fissa di puntini. Questa sola differenza decide quale file va sul tuo sito, sulle confezioni e su Instagram. ## The short version - L’SVG è un formato vettoriale che descrive le forme con la matematica, quindi resta perfettamente nitido a ogni dimensione. - Il PNG è un formato raster fatto di una griglia fissa di pixel, quindi diventa morbido o a blocchi se lo ingrandisci oltre la sua misura. - Usa l’SVG per loghi, icone, illustrazioni semplici e grafiche di interfaccia nei siti web e in stampa. - Usa il PNG per fotografie, texture, grafiche complesse e tutto ciò che carichi sulle piattaforme social, che non accettano l’SVG. - Un buon kit del logo contiene entrambi: un SVG master e le esportazioni PNG nelle misure che servono a ogni posto. **SVG o PNG** significa in realtà vettoriale contro pixel. Un file SVG memorizza le forme come istruzioni (disegna qui un cerchio, riempilo con questo colore), così un browser o una stampante lo ridisegna nitido a qualsiasi dimensione, da una favicon di 16 pixel a un’insegna. Un PNG memorizza una griglia fissa di pixel colorati, quindi è perfetto alla sua misura e morbido se lo ingrandisci. Usa l’SVG per loghi, icone e grafiche semplici sul web e in stampa. Usa il PNG per foto, grafiche con texture e tutto ciò che carichi sui social. ## Cos’è davvero un file SVG SVG sta per Scalable Vector Graphics ed è testo semplice. Aprine uno in un editor di codice e vedrai markup leggibile, non rumore. Per questo gli SVG sono minuscoli per le forme semplici, puoi cambiarne il colore con il CSS e i motori di ricerca e gli screen reader possono leggere il testo al loro interno. ```html ``` Un simbolo di logo completo in poche centinaia di byte. Il `viewBox` imposta il sistema di coordinate del disegno; la misura a cui viene mostrato la decide la pagina. Un PNG dello stesso simbolo richiede un file separato per ogni misura a cui vuoi che sia nitido, e nessuno può essere ricolorato senza esportarlo di nuovo. La [documentazione SVG di MDN](https://developer.mozilla.org/en-US/docs/Web/SVG) tratta il formato per intero. ## SVG e PNG a confronto | Caratteristica | SVG | PNG | | --- | --- | --- | | Tipo | Vettoriale: forme e tracciati | Raster: una griglia di pixel | | Ridimensionamento | Nitido a ogni misura | Nitido alla sua misura, morbido se ingrandito | | Trasparenza | Sì | Sì, con canale alfa completo | | Foto e texture | Scarso: i file diventano enormi o impossibili | Eccellente | | Modificabile con il codice | Sì: colori, animazione, CSS | No | | Caricamento sui social | Non accettato | Accettato ovunque | | Peso tipico, logo semplice | Da 1 a 10 KB | Da 10 a 100 KB per misura | ## SVG o PNG per un logo Tieni il logo master in SVG. È l’unico file che serve a ogni uso futuro: l’intestazione di un sito, un banner di 4 metri, un ricamo, una carta intestata, una favicon. Poi esportane i PNG per i posti che non accettano vettori, soprattutto piattaforme social, firme email e alcuni strumenti di presentazione. | Dove va il logo | File | Misura | | --- | --- | --- | | Intestazione e piè di pagina del sito | SVG | Si adatta alla misura | | Favicon | SVG più PNG di riserva | ICO a 32×32, PNG a 180×180, 192×192 e 512×512 | | Immagine profilo di Instagram, LinkedIn o X | PNG | Quadrato 1080×1080, tieni il simbolo dentro il cerchio centrale | | Firma email | PNG | Fino a 600×200, esportato al doppio della misura mostrata | | Tipografia, insegne, merchandising | SVG o PDF | Vettoriale, qualsiasi misura | Un SVG master, una manciata di esportazioni PNG. [Le misure del logo](https://gradiently.design/it/guide/logo-sizes) e [le varianti del logo](https://gradiently.design/it/guide/logo-variations) vanno più a fondo. Immagine profilo quadrata con un semplice logotipo al centro su uno sfondo sfumato Le immagini profilo sono sempre PNG o JPG. Esporta il logo in grande, 1080×1080, così resta nitido sugli schermi ad alta densità. ## Quando il PNG è la scelta giusta Il vettoriale funziona solo quando l’immagine si può descrivere con forme. Appena un’immagine ha dettaglio fotografico, luce morbida, grana o migliaia di sottili variazioni di colore, un PNG è più leggero e più fedele. Tracciare una foto in un SVG produce un file che è insieme più pesante e peggiore. - Fotografie e collage fotografici. - Grafiche con texture: grana, carta, pennellate, effetti pellicola. - Post social, storie e caroselli, dato che le piattaforme accettano solo pixel. - Screenshot e tutto ciò che viene catturato da uno schermo. - Sfondi ricchi con luce a più livelli e rumore. Grafica quadrata con la scritta Vettore, che rappresenta le forme piatte adatte all’SVG Forme piatte, bordi puliti, pochi colori: territorio ideale per l’SVG. Grafica quadrata con la scritta Pixel su una sfumatura con texture, che rappresenta le grafiche adatte al PNG Grana, luce morbida e texture di materiali stanno in un PNG. ## SVG o PNG per un sito web In un sito, usa SVG inline o un file SVG per loghi, icone e illustrazioni, e formati moderni per le foto. Le icone SVG scalano con il testo, possono usare `currentColor` per seguire il tuo tema e non servono file separati per gli schermi ad alta densità. Per le immagini raster, [WebP](https://gradiently.design/it/guide/webp-images) è di solito una scelta migliore del PNG sulle tue pagine. ### Da evitare - Un logo PNG stirato per riempire un’intestazione larga - Una foto tracciata in un enorme SVG - Caricare file SVG non tuoi senza ripulirli - Icone in PNG che richiedono copie 1x, 2x e 3x ### Da fare - Logo SVG con la larghezza impostata nel CSS - Foto in WebP o JPG alla misura con cui vengono mostrate - Trattare gli SVG caricati dagli utenti come codice, perché possono contenere script - Icone SVG con `fill: currentColor` > **L’SVG può contenere codice** Dato che l’SVG è markup, un file di origine sconosciuta può includere script. Permetti il caricamento di SVG sul tuo sito solo se vengono ripuliti, oppure convertili in PNG al caricamento. ## Come convertire un SVG in PNG 1. **Decidi la misura più grande che ti serve** Un’immagine profilo da 1080×1080 o una firma email da 1200×400 (il doppio della sua misura mostrata di 600×200). Esporta una volta sola a quella misura invece di ingrandire dopo. 2. **Esporta dal file sorgente** In Figma, Illustrator o Inkscape, esporta il frame come PNG alla misura scelta. Esportare dal vettoriale mantiene nitido ogni bordo. 3. **Mantieni la trasparenza attiva** Lascia lo sfondo vuoto così il PNG ha un canale alfa. Vedi [sfondo trasparente](https://gradiently.design/it/guide/transparent-background) per verificarlo. 4. **Controlla al 100%** Guarda i tratti sottili e il testo piccolo alla misura reale. Se si spezzano, semplifica il logo per gli usi piccoli invece di consegnare un file impastato. Fare il contrario, da PNG a SVG, non è una conversione ma un ridisegno. La tracciatura automatica funziona per un logo piatto e deciso e fallisce per tutto ciò che ha texture o bordi morbidi. Se il tuo logo esiste solo come PNG, fallo ridisegnare una volta come vettoriale; ogni file successivo ne trarrà vantaggio. Le esportazioni Pro di Gradiently coprono entrambi i lati: un design può uscire come SVG per il web e la stampa, o come PNG trasparente per le piattaforme, dallo stesso file. [Esportare SVG e PNG trasparente](https://gradiently.design/it/guide/export-svg-transparent-png) mostra come, e [PNG o JPG](https://gradiently.design/it/guide/png-vs-jpeg) chiarisce l’altra scelta comune. ## FAQ ### L’SVG è meglio del PNG per un logo? Per il file master sì: un logo SVG resta nitido a ogni misura e si può ricolorare. Esporta copie PNG per i social e l’email, che non accettano l’SVG. ### Posso caricare un SVG su Instagram? No. Instagram e le altre piattaforme social accettano PNG, JPG e video. Esporta un PNG alla misura della piattaforma, come 1080×1080 per un post quadrato. ### L’SVG è più leggero del PNG? Per forme semplici come loghi e icone, un SVG è di solito molto più leggero. Per foto e immagini con texture, un PNG o un JPG è più leggero e più preciso. ### L’SVG supporta la trasparenza? Sì. Tutto ciò che non è disegnato in un SVG è trasparente, quindi si appoggia pulito su qualsiasi sfondo. ### Posso convertire un logo PNG in SVG? Solo tracciandolo o ridisegnandolo. La tracciatura automatica funziona per i loghi piatti e decisi; i loghi dettagliati o con texture vanno ridisegnati a mano come vettoriali.