Che cos’è SVG? Quando scegliere SVG o PNG

Che cos’è un file SVG?

SVG significa Scalable Vector Graphics, cioè grafica vettoriale scalabile. Invece di memorizzare soltanto una griglia di pixel colorati, può descrivere forme, tracciati, riempimenti e testo. Un browser o un programma di disegno usa queste istruzioni per disegnare l’immagine alle dimensioni richieste. Non serve scrivere codice per creare un SVG: un programma di grafica vettoriale può esportarlo.

Pensa a un logo circolare. Un SVG può descrivere il cerchio e il suo colore; un PNG memorizza i pixel che compongono quel cerchio a una dimensione specifica. L’SVG può disegnare un cerchio più grande mantenendo un bordo uniforme. Ingrandendo il PNG, i pixel esistenti vengono distribuiti su un’area maggiore e il bordo può perdere nitidezza. La panoramica di MDN su SVG spiega come funziona il formato.

SVG e PNG: le differenze nella pratica

Nessuno dei due formati è sempre più leggero. Un SVG dettagliato con migliaia di tracciati può essere più grande di un PNG adatto. Confronta i file reali e verifica che la destinazione li accetti. Per le fotografie, considera JPG, WebP o AVIF anziché usare SVG come formato di compressione fotografica.

Quando SVG è una buona scelta

Un logo usato nell’intestazione di un sito, in una presentazione e su un grande banner trae vantaggio da un originale vettoriale. SVG è adatto anche a icone e diagrammi semplici che devono funzionare a più dimensioni. Controlla comunque la versione più piccola: un disegno nitido non rende leggibili lettere minuscole e non impedisce alle linee sottili di diventare difficili da vedere.

Un SVG può contenere una normale immagine in pixel, come un PNG o un JPG. Quell’immagine mantiene la risoluzione originale. Inserire una piccola fotografia in un SVG non recupera dettagli e non la trasforma in forme vettoriali. Anche rinominare un file .png in .svg non ne cambia il formato.

Capire dimensioni, viewBox e spazio vuoto

Larghezza e altezza indicano le dimensioni dell’immagine. Il viewBox definisce l’area di coordinate in cui viene posizionato il disegno. Aiuta ad adattare il disegno allo spazio in cui viene visualizzato; non è un’impostazione della dimensione del file. La documentazione MDN su viewBox spiega questa relazione.

Se il logo appare piccolo dentro una grande area vuota, controlla i limiti della tavola da disegno o della pagina nel tuo programma di grafica. Esportare l’intera pagina può includere spazio inutilizzato attorno al disegno. Adatta la pagina al contenuto quando serve, lasciando margine per contorni e ombre. Aumentare soltanto la larghezza di visualizzazione ingrandisce anche lo spazio vuoto.

Usare SVG su un sito web

Un normale logo per un sito può essere inserito come file immagine SVG. Assegna un testo alternativo descrittivo alle immagini che trasmettono informazioni e riserva la larghezza e l’altezza corrette nel layout. Le immagini decorative devono avere un testo alternativo vuoto. Trovi esempi nella guida al testo alternativo.

Il fatto che un browser visualizzi SVG non significa che tutti i CMS o i moduli di caricamento lo accettino. Verifica le regole della piattaforma prima di scegliere l’esportazione finale. Un SVG usato come immagine si comporta inoltre diversamente da un SVG inserito direttamente nel codice della pagina: nel contesto di un’immagine, gli script e il caricamento di risorse esterne sono soggetti a restrizioni. La guida MDN su SVG come immagine spiega questi limiti. Usa disegni provenienti da fonti affidabili e il metodo di pubblicazione supportato dalla tua piattaforma.

Preparare un SVG da condividere

• Esporta l’area del disegno che ti serve, non una pagina inutilmente grande.
• Includi nel file le immagini collegate e gli stili necessari, senza dipendere da file separati.
• Se il testo deve apparire esattamente uguale su un altro dispositivo, convertilo in tracciati nel tuo programma di grafica. Conserva un originale modificabile: il testo trasformato in tracciati non può più essere modificato come testo normale.
• Rimuovi gli oggetti inutilizzati e i dati superflui del programma da una copia. Controlla il risultato prima di sostituire l’originale.
• Apri l’SVG esportato nell’app o nel sito previsto e controlla bordi, testo, sfondo ed eventuali elementi mancanti.

Convertire il testo in tracciati può aumentarne il numero e rendere il file più pesante. Semplificare troppo i tracciati può modificare il disegno. Valuta l’ottimizzazione confrontando il risultato reale, invece di eliminare dati senza verificarne gli effetti. Lo strumento SVG a PNG di Pixilo crea un’immagine in pixel; non ottimizza l’SVG e non restituisce un file SVG più piccolo.

Quando creare una copia PNG

Crea un PNG se il servizio che riceve il file lo richiede, se ti serve una copia statica simile a uno screenshot o se hai bisogno di dimensioni precise in pixel. Esporta dall’SVG originale alla misura richiesta. PNG non conserva i tracciati vettoriali o le funzioni interattive e, se ingrandito in seguito, può diventare sfocato. Conserva l’SVG per esportazioni future.

Con SVG a PNG puoi scegliere le dimensioni in pixel e mantenere le aree trasparenti oppure aggiungere uno sfondo a tinta unita. La pagina dello strumento spiega i limiti di dimensione, i caratteri e i contenuti non supportati. L’opzione per lo sfondo trasparente conserva la trasparenza già presente; non elimina una forma di sfondo disegnata nell’SVG.

Prima di pubblicare o inviare l’immagine

1. Verifica quali formati accetta la destinazione.
2. Mantieni SVG se le forme vettoriali e la possibilità di ridimensionare sono utili; crea PNG se la destinazione richiede un’immagine in pixel.
3. Controlla i limiti del disegno, i caratteri e le immagini incorporate.
4. Osserva il file finale alle dimensioni di visualizzazione previste e sullo sfondo su cui verrà usato.
5. Confronta il peso dei file se la velocità di caricamento è importante e conserva il tuo originale modificabile.