Da SVG a PNG: risolvere i problemi di trasparenza

Questa guida aiuta a individuare i problemi di trasparenza nei PNG ottenuti da SVG. Per i passaggi di base della conversione, consulta Convertire un SVG con sfondo trasparente.

Uno sfondo bianco non indica sempre una perdita di trasparenza

Apri il PNG in un editor che mostri la trasparenza oppure posizionalo su uno sfondo colorato. Il visualizzatore potrebbe semplicemente mostrare il bianco dietro i pixel trasparenti. Se l'area bianca rimane parte dell'immagine, cerca nell'SVG un rettangolo di sfondo opaco, una forma con riempimento o un'immagine raster incorporata.

Il convertitore da SVG a PNG non rimuove questi oggetti. Quando possibile, modifica l'SVG sorgente. Per ottenere un'immagine raster scontornata, lo strumento per creare uno sfondo trasparente esegue un'operazione separata, il cui risultato va controllato.

Non c'è un'opzione di trasparenza da attivare

Questo convertitore legge un SVG alla volta e offre larghezza e altezza in pixel e compressione PNG. Le aree già trasparenti possono rimanere tali senza una casella per conservare la trasparenza o attivare il canale alfa. Non dispone di uno strumento per cancellare il colore di sfondo né di un selettore delle modalità PNG-8 e PNG-24.

Individuare i problemi dei bordi e degli elementi mancanti

Casi particolari

Controlla ogni effetto nel PNG scaricato, senza presumere che tutti i motori di rendering SVG producano pixel identici. Una foto incorporata mantiene il proprio sfondo opaco finché non modifichi quell'immagine sorgente. L'opacità di un tracciato vettoriale non può rimuovere un rettangolo bianco sottostante.

SVG con immagini raster incorporate

Se l'SVG contiene immagini raster:

• Le parti raster mantengono la trasparenza originale
• Le parti vettoriali vengono convertite normalmente
• Verifica che le immagini incorporate abbiano trasparenza

Effetti di trasparenza complessi

Per gli SVG con:

• Effetti di sfocatura
• Ombre esterne
• Metodi di fusione

Questi effetti possono essere convertiti in modo diverso. Verifica e correggi secondo necessità.

Elementi semitrasparenti

Gli SVG con valori di opacità:

• Possono aumentare il peso del file
• Richiedono una verifica della fedeltà visiva dopo la conversione

Verificare la trasparenza

Esegui questi controlli sul PNG scaricato. Una scacchiera disegnata nell'originale fa parte del contenuto dell'immagine; quella mostrata da un visualizzatore è un aiuto alla visualizzazione. Per distinguerle, confronta il risultato su almeno due colori diversi. L'esempio HTML va inserito in una tua pagina di prova.

Metodo di verifica rapido

1. Apri il PNG in un editor di immagini
2. Cerca lo sfondo a scacchiera che indica la trasparenza
3. Aggiungi un livello colorato dietro l'immagine
4. Verifica che la grafica appaia correttamente

Verifica nel browser

<div style="background: linear-gradient(45deg, #333, #666)">
  <img src="your-graphic.png" alt="Verifica della trasparenza">
</div>

Controlla che non compaia un riquadro bianco.

Ottimizzare un PNG trasparente

Parti dalle dimensioni effettivamente necessarie. La compressione PNG senza perdita cambia il lavoro di codifica, non quali pixel sono trasparenti. Ridurre la tavolozza in un altro editor può diminuire il peso, ma alterare sfumature e bordi morbidi. Modificare le dimensioni elimina o ricampiona i pixel.

Conserva una copia alle dimensioni originali, cambia un'impostazione alla volta e confronta i file scaricati. Dopo ogni ottimizzazione, controlla i bordi su sfondi chiari e scuri. Non esiste un risparmio fisso del 20–50% o del 40–80% valido per qualsiasi grafica. Se la destinazione accetta WebP, confronta un'esportazione WebP separata con il PNG senza presumere che uno dei due formati sia sempre più leggero.

Confrontare una modifica alla volta

Conserva l'SVG originale, modifica una sola proprietà della sorgente o una dimensione di uscita e confronta il nuovo PNG su sfondi chiari e scuri. I campi delle dimensioni accettano fino a 8192 px per lato. La compressione cambia il lavoro di codifica PNG, non l'intensità del canale alfa o la qualità dell'immagine.

Controllare dimensioni e margini separatamente dal canale alfa

Un logo trasparente può comunque apparire sbagliato perché il soggetto è troppo piccolo rispetto alla sua area di disegno. Esamina il viewBox dell'SVG e la posizione del disegno nell'editor di origine. Aggiungi o rimuovi i margini in quell'editor; i campi di larghezza e altezza del convertitore ridimensionano l'immagine entro un riquadro di contenimento e non permettono di modificare i margini dell'area di disegno.

Per una risorsa destinata a uno schermo 2×, calcola il doppio delle dimensioni di visualizzazione previste e mantieni le proporzioni. Esporta e controlla ogni dimensione separatamente. Un nome come logo@2x.png è una convenzione di denominazione, non un'impostazione che crea dettagli aggiuntivi.

<img src="logo.png" srcset="logo@2x.png 2x" alt="Logo aziendale">

Entrambi i file devono esistere sul sito. Verifica le dimensioni e lo sfondo effettivi di visualizzazione; il codice non aggiunge trasparenza a nessuna delle due immagini. Se il logo presenta un alone a entrambe le dimensioni, torna a controllare i bordi nella sorgente anziché continuare a ingrandirlo.

Domande frequenti

Una compressione più elevata corregge i bordi trasparenti?

No. Controlla il disegno sorgente e le dimensioni in pixel. La compressione non è un controllo per correggere i bordi.

Posso applicare una correzione a un'intera cartella qui?

No. La pagina accetta un SVG per operazione. Correggi le sorgenti in un editor, poi converti e controlla ogni file separatamente.