SVG vs PNG: vettoriale vs raster — quando usare quale
SVG e PNG risolvono problemi diversi. SVG descrive geometria vettoriale e può incorporare raster; PNG salva una griglia fissa di pixel. La scelta dipende da arte sorgente, sicurezza, accessibilità, modifica, rendering e dimensione misurata.
La differenza fondamentale tra SVG e PNG
La distinzione SVG-PNG corrisponde a grafica vettoriale e raster.
SVG è basato su XML e descrive forme, percorsi, testo, filtri, stili e risorse. Le parti vettoriali vengono ridisegnate alla dimensione finale, ma la nitidezza dipende da geometria, tratti, effetti, allineamento e raster incorporato.
PNG salva una griglia fissa. L’ingrandimento richiede ricampionamento e può apparire morbido o pixelato. Consegnare una sorgente molto più grande dello spazio aggiunge trasferimento e decodifica, salvo candidati responsive.
Questa differenza influenza dimensione, scala, modifica e i tipi di immagine gestiti bene da ciascun formato.
Quando usare SVG
SVG è un buon candidato per arte vettoriale controllata quando sicurezza, accessibilità, rendering e incorporamento sono definiti:
- Loghi — un SVG pulito copre molte dimensioni senza ingrandire raster; marchi molto piccoli possono richiedere semplificazione, tratti regolati o una variante.
- Icone — UI, navigazione e social possono condividere geometria e stile. SVG può essere più piccolo di più risoluzioni raster, ma percorsi complessi o ripetizioni inline possono invertire il risultato.
- Illustrazioni e diagrammi — linee pulite e colori piatti. Il testo SVG può restare selezionabile, ma accessibilità e indicizzazione richiedono markup e incorporamento corretti.
- Animazioni — SVG supporta CSS, JavaScript e meccanismi propri. Preferenze di movimento, CPU, CSP, accessibilità e interazione vanno controllate.
- Favicon — i browser principali attuali usano SVG, ma un set completo può richiedere raster o ICO. Crea le uscite comuni col Generatore di favicon.
SVG è ampiamente supportato dai browser attuali e dagli strumenti di design. La popolarità non garantisce che una risorsa debba essere vettoriale: confronta complessità, sicurezza, cache, accessibilità e rendering.
Quando usare PNG
PNG è un buon candidato quando contano pixel raster senza perdita o alfa e la dimensione rientra nel budget:
- Foto trasparenti — PNG offre alfa e pixel lossless, ma una foto dettagliata può essere grande. Confronta WebP/AVIF alfa; senza trasparenza prova JPEG e formati fotografici moderni.
- Screenshot — PNG può conservare i pixel codificati; profili, metadati, ridimensionamento e tavolozza restano questioni distinte.
- Arte complessa con molti colori — dipinti, texture e illustrazioni fotorealistiche che non si semplificano in forme vettoriali pulite.
- Raster con testo — quando serve un bordo preciso al pixel, PNG evita gli artefatti dei formati lossy.
Dimensione dei file e prestazioni a confronto
Per icone, loghi e illustrazioni semplici, SVG ottimizzato o raster può essere più piccolo secondo geometria, dimensioni, ripetizione, compressione e cache:
| Tipo di grafica | Dimensione PNG | Dimensione SVG | Risparmio |
|---|---|---|---|
| Icona semplice | Una dimensione raster per candidato | Geometria vettoriale spesso compatta | Misura entrambi |
| Logo | Può richiedere più risoluzioni | Spesso adatto con sorgente vettoriale | Misura entrambi |
| Raccolta di icone | File separati aggiungono richieste e byte | Sprite, esterno e inline hanno costi cache diversi | Misura la pagina |
| Illustrazione semplice | Cresce con dimensioni e dettaglio | Cresce con percorsi, stili e filtri | Dipende dal contenuto |
La compressione testuale Brotli o gzip può ridurre il trasferimento SVG secondo markup e server. Confronta i byte trasferiti compressi, non solo il file su disco.
SVG inline evita una richiesta ma aumenta HTML e non è cacheabile separatamente. SVG esterno può usare la cache. Il vettore di solito non richiede varianti di densità, mentre SVG complesso o con raster può richiedere gestione responsive. Misura la pagina.
Per foto e texture dettagliate, il tracing crea geometria eccessiva o perde dettagli. Incorporare raster in SVG aggiunge contenitore e spesso base64 senza trasformarlo in vettore. Usa PNG, JPEG, WebP o AVIF.
SVG vs PNG: confronto rapido
| Caratteristica | SVG | PNG |
|---|---|---|
| Tipo | Vettore (forme e percorsi) | Raster (griglia di pixel) |
| Scalabilità | Le parti vettoriali si ridisegnano; il rendering conta | Griglia fissa; ingrandire può ammorbidire |
| Trasparenza | Sì | Sì (alfa) |
| Contenuto fotografico | Di solito inadatto salvo raster incorporato | Opzione alfa lossless; confronta la dimensione |
| Icone/loghi | Forte con sorgente vettoriale pulita e controllata | Funziona alle dimensioni preparate |
| Animazione | Sì (SVG/CSS/JS) | Estensione APNG |
| Modificabile via codice | Sì (XML) | No |
| Testo e accessibilità | Possibile con markup e incorporamento corretti | Richiede testo circostante o equivalente alt |
| Browser | Browser principali attuali; regole di incorporamento diverse | Molto ampio |
| Dimensione | Dipende da geometria e markup | Dipende da dimensioni e contenuto |
Esempio pratico: riprogettare un sito aziendale
Immagina un sito con logo, 30 icone di navigazione e funzione, foto principale e screenshot del prodotto. Assegna così:
- Logo → SVG con una sorgente vettoriale pulita; prova tratti e leggibilità piccola.
- Raccolta di icone → sprite o componenti SVG riusano geometria; convalida accessibilità, cache, CSP e markup trasferito.
- Foto principale → prova JPEG, WebP e AVIF alle stesse dimensioni e qualità visibile, con i fallback necessari. Vedi la guida di ottimizzazione.
- Screenshot prodotto → inizia con PNG se devi preservare i pixel, poi confronta altre opzioni lossless e un’eventuale versione lossy.
Come convertire tra SVG e PNG
Converti i file supportati nel browser senza installare software. Vizua elabora il file nel browser e non lo invia al server immagini; i servizi della pagina possono usare la rete:
- SVG in PNG — rasterizza un SVG supportato a una scala disponibile e controlla il risultato
- Vettorizza Immagine — traccia raster in percorsi approssimativi; non recupera la geometria originale
- Generatore di favicon — crea uscite comuni da una sorgente supportata
Per dimensioni e budget in byte specifici della pagina, consulta la guida alle dimensioni dei file.
Domande frequenti
SVG può sostituire completamente PNG?
No. SVG è ottimo per grafica, icone e illustrazioni, ma non rappresenta fotografie in modo efficiente. Una foto in SVG sarebbe enorme se incorporata come raster o perderebbe dettaglio se tracciata in forme. Usa SVG per contenuti vettoriali e PNG, JPEG o WebP per raster complessi.
I file SVG sono sicuri sul web?
SVG è XML attivo e può contenere script, eventi, riferimenti esterni, link, CSS, filtri e altre funzioni. Tratta SVG non fidato come codice: convalida con una allowlist, sanifica con uno strumento mantenuto, servi con tipo e isolamento appropriati e applica CSP. Una fonte fidata non sostituisce il controllo.
Perché il mio SVG sembra sfocato?
La geometria vettoriale viene ridisegnata senza ingrandire un raster, ma allineamento frazionario, tratti, filtri, trasformazioni, antialiasing, raster incorporato o schermo possono ammorbidirla. Controlla viewBox, dimensioni, tratti e contenuto raster.
SVG o icon font?
SVG spesso è adatto perché ogni icona può avere un nome accessibile o essere nascosta se decorativa, con stile isolato. Non è automaticamente più veloce o accessibile: inline aumenta l’HTML, sprite esterni sono cacheabili e ARIA va implementata bene. Confronta le esigenze del sistema.
Posso convertire PNG in SVG?
Sì. Vettorizza Immagine di Vizua traccia PNG o JPEG in percorsi SVG approssimativi. Funziona meglio con loghi, icone e illustrazioni semplici con pochi colori e bordi netti, non con foto complesse.
Converti le immagini
Nessun account. Il file selezionato è elaborato nel browser e non inviato al server di elaborazione immagini.