Di Claire Yoon9 min di lettura

Come mantenere uno sfondo trasparente quando converti in SVG

Un SVG non ha sfondo per impostazione predefinita, quindi un riquadro bianco significa che qualcosa lo ha aggiunto. Ecco come mantenere la trasparenza quando converti un PNG in SVG e cosa controllare.

In questa pagina

Ecco il dettaglio che rende tutto così confuso: un SVG, per impostazione predefinita, non ha alcuno sfondo. È trasparente, a meno che qualcosa non metta una forma piena dietro la tua grafica. Quindi, quando l'SVG convertito compare con un riquadro bianco intorno, la domanda utile è: cosa ha aggiunto il bianco? Di solito è una di tre cose: una forma di sfondo rimasta nel design, un'impostazione di esportazione che riempie la tela, oppure un convertitore che ha tracciato l'area vuota come blocco bianco invece di lasciarla stare. La soluzione dipende da quale caso hai davanti, e anche dal fatto che il file originale avesse davvero una trasparenza reale. Mettiamo ordine.

La versione rapida
  • Un SVG è trasparente per impostazione predefinita. Uno sfondo bianco significa che qualcosa lo ha aggiunto.
  • Stai convertendo un PNG trasparente? Usa un convertitore che rispetti il canale alfa, così traccia il soggetto e lascia vuoto il resto. Converti un PNG in SVG e controlla il risultato.
  • Parti da un JPG? Non può essere trasparente, quindi non c'è nulla da conservare. Rimuovi prima lo sfondo, poi converti.
  • Esporti da Illustrator o Inkscape? Elimina il rettangolo di sfondo bianco sulla tela e controlla le impostazioni di esportazione.
  • Verifica sempre: appoggia l'SVG su uno sfondo colorato. Se vedi ancora bianco, qualcosa c'è.

Prima di tutto, cosa sta davvero aggiungendo il bianco?

Prima di correggere qualsiasi cosa, capisci da dove arriva il bianco. È una di tre situazioni, e per ognuna la soluzione è diversa.

La tua situazionePerché è biancoLa soluzione
Converti un PNG trasparente in SVGIl convertitore ha riempito l'area vuota, oppure l'ha tracciata come formaUsa un convertitore che rispetti la trasparenza; elimina eventuali forme di sfondo aggiunte per errore
Converti un JPG, o un PNG con sfondo bianco pienoNon c'è mai stata trasparenza da conservareRimuovi prima lo sfondo, poi converti
Esporti un SVG che hai creato in Illustrator o InkscapeUn rettangolo di sfondo sulla tela, oppure un'impostazione di esportazione che aggiunge un riempimentoElimina la forma di sfondo; controlla l'opzione trasparente durante l'esportazione
Da dove arriva il bianco
Diagramma che mostra tre origini di uno sfondo bianco in un SVG: una forma rettangolare di sfondo, un'impostazione di esportazione che aggiunge un riempimento e un convertitore che traccia l'area vuota come blocco bianco
Un SVG nasce trasparente. Il bianco si insinua da una forma di sfondo, da un'impostazione di esportazione o da una tracciatura poco attenta.

La riga centrale è quella che mette più persone in difficoltà, quindi partiamo da lì.

Se il tuo file non è davvero trasparente, nessun convertitore può sistemarlo

Questa è la parte che i forum spesso saltano. Un JPG non può mai memorizzare la trasparenza. Se il tuo logo è un JPG, ha uno sfondo pieno incorporato nei pixel, anche quando quello sfondo è bianco e sembra "niente". Convertirlo in SVG non lo eliminerà. La tracciatura includerà lo sfondo come forma, oppure resterà semplicemente sopra di esso. (Convertire un JPG, in generale, è un lavoro un po' diverso: ne parla come convertire un JPG in SVG.)

Alcuni PNG hanno lo stesso problema. Un PNG può memorizzare la trasparenza, cioè un canale alfa, ma molti sono stati salvati con un semplice riempimento bianco. Se non sai quale dei due casi hai, apri il file sopra uno sfondo scuro. Vedi un rettangolo bianco intorno al logo? Allora non è trasparente. Sembrava tale solo su una pagina bianca.

La soluzione, in entrambi i casi, è la stessa: rimuovi lo sfondo prima di convertire, così il convertitore avrà una trasparenza reale con cui lavorare. Ritaglia il soggetto in un editor di immagini, esporta un PNG trasparente, poi traccia quello. (PNG vs SVG spiega perché un PNG può contenere trasparenza e un JPG no.)

Convertire un vero PNG trasparente in SVG

Se la sorgente è un PNG davvero trasparente, mantenere quella trasparenza durante la conversione dipende soprattutto dal convertitore che usi. In linea di principio il compito è semplice: tracciare il soggetto visibile in tracciati vettoriali e lasciare l'area trasparente come spazio vuoto, non come forma bianca. Un buon convertitore fa esattamente questo. Uno superficiale, invece, fa una di queste due cose fastidiose:

  • Riempie di bianco l'area trasparente, e ottieni un riquadro pieno.
  • Traccia il bordo dell'area trasparente come un tracciato a sé, così ti ritrovi con un rettangolo invisibile ma reale intorno al design, che compare appena lo appoggi su uno sfondo colorato o lo mandi a una macchina da taglio. Chi fa craft ci si imbatte continuamente. È lo stesso riquadro indesiderato intorno a un design Cricut.

Quindi la mossa giusta è convertire con uno strumento che gestisca pulitamente il canale alfa, poi verificarlo (ne parliamo tra poco). Un logo trasparente è il caso più comune.

Come appare con PerfectVector

PerfectVector legge la trasparenza del tuo PNG e traccia solo ciò che è davvero presente. La parte visibile del logo diventa un insieme di tracciati vettoriali puliti e modificabili, mentre l'area trasparente resta trasparente: niente riquadro bianco, niente rettangolo perimetrale nascosto. Il risultato può essere appoggiato su qualsiasi sfondo colorato, su un sito web, su un foglio di adesivi, su un tappetino Cricut, e il colore dietro passa semplicemente attraverso. Puoi convertire il tuo PNG trasparente e controllarlo su uno sfondo colorato in pochi secondi. Le prime conversioni sono gratuite, senza carta di credito.

Per essere chiari, però: PerfectVector mantiene la trasparenza che è già nel tuo file. Non può inventare una trasparenza che non c'è mai stata. Se la sorgente è un JPG o un PNG riempito di bianco, ritaglia prima lo sfondo, come sopra, e poi la conversione resterà pulita.

Riquadro bianco
Un logo convertito in SVG con un riquadro bianco indesiderato dietro, mostrato su uno sfondo verde acqua
Una tracciatura poco attenta ha lasciato un rettangolo bianco, evidente appena finisce su un colore.
Trasparente
Lo stesso logo convertito in SVG con lo sfondo mantenuto trasparente, e il verde acqua che passa pulitamente attraverso
Trasparenza mantenuta: lo sfondo colorato passa dritto attraverso.

Come controllare che abbia funzionato davvero

Non fidarti della miniatura. Un SVG trasparente appare identico a uno con sfondo bianco su una pagina bianca, ed è proprio per questo che molte persone pensano che vada tutto bene finché non scoprono il contrario. Due controlli rapidi:

  • Mettilo su un colore. Posiziona l'SVG sopra uno sfondo colorato nel browser, in Figma, Canva o Design Space. La trasparenza vera lascia passare il colore. Un riquadro bianco no.
  • Cerca un rettangolo vagante. Apri l'SVG e seleziona le forme. Se c'è un rettangolo a piena dimensione dietro la grafica, eliminalo. È lui il colpevole nella maggior parte dei casi in cui "è ancora bianco".

Esportare un SVG che hai disegnato tu (l'altro caso)

Se non stai convertendo un raster, ma esportando un SVG che hai disegnato tu, di solito il bianco arriva dalla tua tela, non da un convertitore:

  • Illustrator: elimina qualsiasi rettangolo bianco usato come sfondo. Il colore della tavola da disegno comunque non viene esportato, quindi, una volta rimossa la forma di sfondo, salva o esporta come SVG e resterà trasparente.
  • Inkscape: assicurati che non sia selezionato alcun rettangolo di sfondo, nascondi o elimina il raster originale se ne hai tracciato uno, ed esporta il vettore. Gli SVG di Inkscape sono trasparenti a meno che tu non abbia aggiunto un riempimento.

In ogni caso, vale ancora la regola iniziale: un SVG non ha sfondo, a meno che tu non gliene abbia dato uno.

FAQ

Un SVG supporta uno sfondo trasparente? Sì, ed è trasparente per impostazione predefinita. Un SVG non ha sfondo a meno che non venga aggiunta una forma o un riempimento, quindi la trasparenza è lo stato iniziale, non qualcosa da attivare. Il bianco compare solo quando qualcosa ce lo mette.

Come salvo un SVG con sfondo trasparente? Assicurati che nel design non ci sia un rettangolo di sfondo, poi esporta senza riempimento di sfondo (la maggior parte degli strumenti esporta trasparente per impostazione predefinita). Dopo, verifica posizionando l'SVG su uno sfondo colorato. Se vedi bianco, trova ed elimina la forma di sfondo.

Perché il mio SVG ha uno sfondo bianco dopo la conversione? O il convertitore ha aggiunto un riempimento bianco o ha tracciato l'area vuota come forma, oppure il file originale non era davvero trasparente. Controlla prima la sorgente: se è un JPG o un PNG riempito di bianco, non c'era trasparenza da conservare, e dovrai rimuovere lo sfondo prima di convertire.

Posso convertire un JPG in SVG con sfondo trasparente? Non direttamente, perché un JPG non può memorizzare la trasparenza. Il suo sfondo è incorporato nei pixel. Rimuovi prima lo sfondo (ritaglia il soggetto ed esporta un PNG trasparente), poi converti quello in SVG.

Come mantengo la trasparenza quando converto un PNG in SVG? Parti da un PNG davvero trasparente e usa un convertitore che rispetti il canale alfa, così traccia il soggetto e lascia vuoto il resto. Poi conferma il risultato su uno sfondo colorato ed elimina eventuali rettangoli vaganti che la tracciatura può aver aggiunto.

Come rimuovo uno sfondo bianco da un SVG? Apri l'SVG, seleziona le forme ed elimina il rettangolo bianco a piena dimensione dietro la grafica. Se il bianco fa parte di un raster incorporato invece che di una forma, riconverti partendo da una sorgente davvero trasparente.


Hai un logo trasparente bloccato come PNG? Trasformalo in un SVG pulito che mantiene la sua trasparenza, poi appoggialo su uno sfondo colorato per confermare che sia passata correttamente.

Altro dal blog