Por Claire Yoon9 min de leitura

Como manter o fundo transparente ao converter para SVG

Um SVG não tem fundo por padrão, então uma caixa branca significa que algo a adicionou. Veja como manter a transparência ao converter um PNG para SVG, e o que conferir.

Nesta página

Este é o detalhe que torna tudo tão confuso: um SVG não tem fundo nenhum por padrão. Ele é transparente, a menos que algo coloque uma forma sólida atrás da sua arte. Então, quando o SVG convertido aparece com uma caixa branca ao redor, a pergunta que vale fazer é: o que adicionou o branco? Normalmente é uma de três coisas: uma forma de fundo dentro do design, uma configuração de exportação que preenche a tela, ou um conversor que traçou a área vazia como um bloco branco em vez de deixá-la em paz. A correção depende de qual caso você tem em mãos, e também de o arquivo original realmente ter transparência para começo de conversa. Vamos separar isso.

A versão rápida
  • Um SVG é transparente por padrão. Um fundo branco significa que algo o adicionou.
  • Vai converter um PNG transparente? Use um conversor que respeite o canal alfa, para traçar o objeto e deixar o restante vazio. Converta um PNG para SVG e confira o resultado.
  • Está começando por um JPG? Ele não pode ser transparente, então não há nada para manter. Remova o fundo primeiro, depois converta.
  • Exportando do Illustrator ou Inkscape? Apague o retângulo branco de fundo na tela e confira as configurações de exportação.
  • Sempre verifique: coloque o SVG sobre um fundo colorido. Se você ainda vê branco, há algo ali.

Primeiro, o que está adicionando o branco?

Antes de corrigir qualquer coisa, descubra de onde o branco está vindo. É uma de três situações, e a correção muda em cada uma.

Sua situaçãoPor que está brancoA correção
Converter um PNG transparente para SVGO conversor preencheu a área vazia, ou a traçou como uma formaUse um conversor que respeite a transparência; apague qualquer forma de fundo solta que ele tenha adicionado
Converter um JPG, ou um PNG com fundo branco sólidoNunca houve transparência para manterRemova o fundo primeiro, depois converta
Exportar um SVG que você desenhou no Illustrator ou InkscapeUm retângulo de fundo na tela, ou uma configuração de exportação adicionando preenchimentoApague a forma de fundo; confira a opção de transparência ao exportar
De onde vem o branco
Diagrama mostrando três fontes de fundo branco em um SVG: uma forma retangular de fundo, uma configuração de exportação adicionando preenchimento e um conversor traçando a área vazia como um bloco branco
Um SVG começa transparente. O branco entra por uma forma de fundo, uma configuração de exportação ou um traçado descuidado.

A linha do meio é a que mais pega as pessoas, então comece por ela.

Se o arquivo não é realmente transparente, nenhum conversor resolve

Esta é a parte que os fóruns pulam. Um JPG nunca consegue armazenar transparência. Se o seu logotipo é um JPG, ele tem um fundo sólido gravado nos pixels, mesmo quando esse fundo é branco e parece "nada". Converter para SVG não vai remover isso. O traçado vai incluir o fundo como uma forma ou vai ficar exatamente em cima dele. (Converter um JPG é um trabalho um pouco diferente em geral, assunto coberto em como converter um JPG para SVG.)

Alguns PNGs têm o mesmo problema. Um PNG pode armazenar transparência, um canal alfa, mas muitos foram salvos com um preenchimento branco simples. Se você não tem certeza de qual é o caso, abra o arquivo sobre um fundo escuro. Vê um retângulo branco ao redor do logotipo? Ele não é transparente. Só parecia assim contra uma página branca.

A correção nos dois casos é a mesma: remova o fundo antes de converter, para que o conversor tenha transparência real com que trabalhar. Recorte o objeto em qualquer editor de fotos, exporte um PNG transparente e então trace esse arquivo. (PNG vs SVG explica por que um PNG pode conter transparência e um JPG não.)

Converter um PNG realmente transparente para SVG

Se a origem é um PNG genuinamente transparente, manter essa transparência durante a conversão depende principalmente do conversor usado. Em princípio, o trabalho é simples: traçar o objeto visível como traçados vetoriais e deixar a área transparente como espaço vazio, não como uma forma branca. Um bom conversor faz exatamente isso. Um conversor descuidado faz uma destas duas coisas irritantes:

  • Ele preenche a área transparente com branco, e você recebe uma caixa sólida.
  • Ele traça a borda da área transparente como um traçado próprio, e você acaba com um retângulo invisível, mas real, ao redor do design, que aparece no momento em que você coloca o arquivo sobre um fundo colorido ou envia para uma máquina de corte. Quem faz artesanato esbarra nisso o tempo todo. É a mesma caixa solta ao redor de um design para Cricut.

Então o caminho é converter com uma ferramenta que lide bem com o canal alfa, e depois verificar o resultado (mais sobre isso abaixo). Um logotipo transparente é o caso mais comum.

Como isso fica com o PerfectVector

O PerfectVector lê a transparência do seu PNG e traça apenas o que realmente existe ali. A parte visível do logotipo vira traçados vetoriais limpos e editáveis, e a área transparente permanece transparente: sem caixa branca, sem retângulo delimitador escondido. O resultado funciona sobre qualquer fundo colorido, em um site, em uma folha de adesivos, em uma base da Cricut, e a cor atrás simplesmente aparece através dele. Você pode converter seu PNG transparente e conferir contra um fundo colorido em poucos segundos. As primeiras conversões são gratuitas, sem cartão de crédito.

Mas, sendo direto: o PerfectVector mantém a transparência que já está no seu arquivo. Ele não consegue inventar transparência que nunca existiu. Se a origem é um JPG ou um PNG preenchido de branco, recorte o fundo primeiro, como acima, e então a conversão permanece limpa.

Caixa branca
Um logotipo convertido para SVG com uma caixa branca indesejada atrás dele, mostrado sobre um fundo verde-azulado
Um traçado descuidado deixou um retângulo branco, óbvio no momento em que aparece sobre uma cor.
Transparente
O mesmo logotipo convertido para SVG com o fundo mantido transparente, deixando o verde-azulado aparecer limpo através dele
Transparência mantida: o fundo colorido aparece direto através da arte.

Como conferir se funcionou de verdade

Não confie na miniatura. Um SVG transparente parece idêntico a um com fundo branco quando está sobre uma página branca, que é exatamente por isso que as pessoas acham que está tudo bem até descobrirem que não está. Duas verificações rápidas:

  • Coloque sobre uma cor. Posicione o SVG sobre um fundo colorido no navegador, Figma, Canva ou Design Space. Transparência real deixa a cor aparecer. Uma caixa branca não deixa.
  • Procure um retângulo solto. Abra o SVG e selecione as formas. Se houver um retângulo de tamanho completo atrás da arte, apague-o. Esse é o culpado na maioria dos casos de "ainda está branco".

Exportar um SVG que você desenhou (a outra situação)

Se você não está convertendo uma imagem raster, mas exportando um SVG que desenhou, o branco geralmente vem da sua própria tela, não de um conversor:

  • Illustrator: apague qualquer retângulo branco usado como fundo. A cor da prancheta não é exportada de qualquer forma, então, quando a forma de fundo sumir, salve ou exporte como SVG e ele ficará transparente.
  • Inkscape: confirme que nenhum retângulo de fundo está selecionado, oculte ou apague a imagem raster original se você traçou uma, e exporte o vetor. SVGs do Inkscape são transparentes, a menos que você tenha adicionado um preenchimento.

De qualquer modo, a regra do início continua valendo: um SVG não tem fundo, a menos que você tenha dado um a ele.

Perguntas frequentes

Um SVG aceita fundo transparente? Sim, e ele é transparente por padrão. Um SVG não tem fundo, a menos que uma forma ou preenchimento seja adicionado, então a transparência é o estado inicial, não algo que você precisa ativar. O branco só aparece quando algo o coloca ali.

Como salvo um SVG com fundo transparente? Confira se não há retângulo de fundo no design e exporte sem preenchimento de fundo (a maioria das ferramentas exporta transparente por padrão). Depois, verifique colocando o SVG sobre um fundo colorido. Se aparecer branco, encontre e apague a forma de fundo.

Por que meu SVG fica com fundo branco depois de converter? Ou o conversor adicionou um preenchimento branco ou traçou a área vazia como uma forma, ou o arquivo original não era realmente transparente. Confira a origem primeiro: se for um JPG ou um PNG preenchido de branco, não havia transparência para manter, e você vai precisar remover o fundo antes de converter.

Posso converter um JPG para SVG com fundo transparente? Não diretamente, porque um JPG não consegue armazenar transparência. O fundo dele está gravado nos pixels. Remova o fundo primeiro (recorte o objeto e exporte um PNG transparente), depois converta esse arquivo para SVG.

Como mantenho a transparência ao converter um PNG para SVG? Comece por um PNG genuinamente transparente e use um conversor que respeite o canal alfa, para traçar o objeto e deixar o resto vazio. Depois confirme o resultado sobre um fundo colorido e apague qualquer retângulo solto que o traçado possa ter adicionado.

Como removo um fundo branco de um SVG? Abra o SVG, selecione as formas e apague o retângulo branco de tamanho completo atrás da arte. Se o branco fizer parte de uma imagem raster embutida, em vez de ser uma forma, reconverta a partir de uma origem realmente transparente.


Tem um logotipo transparente preso como PNG? Transforme-o em um SVG limpo que mantém a transparência, depois coloque sobre um fundo colorido para confirmar que ela veio junto.

Mais do blog

Pronto para criar
vetores perfeitos?