O mesmo logo pode ter 24 pixels de altura na navegação de um site e ser ampliado para dois metros de largura num painel de feira. Para escolher entre PNG e SVG, olhe primeiro o cenário de destino: em páginas e interfaces de produto, prefira SVG — o símbolo é registrado como trajetos e redesenhado pelo software em qualquer tamanho; entradas de upload que só aceitam bitmap (avatar de redes sociais, alguns documentos de escritório) recebem um PNG transparente; pôsteres, placas e materiais impressos usam SVG ou vetoriais exportados dele, sem perder nitidez na ampliação. Se você só tem um PNG agora, não é preciso refazer tudo: confirme primeiro o formato que cada cenário exige e complete o que falta.
Pontos-chave
- Use SVG em páginas, interfaces e situações com escalonamento e troca de cor frequentes: o desenho é registrado como trajetos e redesenhado ao ampliar, sem bordas serrilhadas.
- Entradas que só aceitam bitmap (avatar de redes sociais, parte dos programas de escritório) usam PNG transparente, sem exigir suporte a SVG da plataforma.
- Logos gráficos e logotipos tipográficos merecem um SVG mestre; mascotes fotográficos e imagens de marca com texturas complexas ficam em PNG de alta resolução.
- SVG não é necessariamente menor que PNG: o tamanho depende da complexidade do desenho; o critério é o uso, não o volume.
Comece a escolher por três cenários de uso
As três tarefas de entrega mais comuns cobrem praticamente todos os destinos dos arquivos de logo.
Símbolo na navegação do site. Logos em barra de navegação, rodapé e interface móvel aparecem em tamanhos variados conforme a densidade da tela. SVG é o ideal aqui: o navegador desenha os trajetos em tempo real, mantendo a nitidez da largura de ícone pequeno ao grande banner do rodapé; para trocar a cor, altere direto no arquivo ou no código, e o mesmo arquivo segue intacto para o designer continuar editando.
Avatar pequeno em rede social. Os uploads de avatar geralmente aceitam só JPG e PNG; um PNG com fundo transparente resolve: quando a plataforma recorta o avatar em círculo ou quadrado, não sobra um bloco branco ao redor do símbolo. O espaço de exibição é pequeno e a nitidez do bitmap basta — este cenário não pede SVG.
Pôsteres e materiais impressos em grande formato. Pôsteres, banners retráteis e letreiros ampliam o símbolo dezenas de vezes. O SVG resolve a escala na origem: os trajetos são independentes de resolução, e o tamanho de saída é decidido no uso. Ampliar um PNG pequeno produz desfoque e serrilhado — é este cenário que realmente exige um arquivo vetorial.
Onde aparecem as diferenças entre PNG e SVG
A diferença fundamental entre os formatos é a forma de registrar o desenho. O PNG usa uma grade de pixels: cada ponto registra uma cor, e por maior que seja o arquivo, o total de pixels é fixo; ampliada além dos pixels originais, a imagem só pode ser esticada pelo software, com bordas desfocadas e serrilhadas. O SVG descreve o desenho com trajetos e formas — onde a linha começa, como a curva dobra, que cor preenche a área — e, ao ampliar, o software redesenha a partir dessas descrições, com bordas sempre suaves.
Fundo transparente existe nos dois, por caminhos diferentes. O PNG usa um canal de transparência para preservar o recorte ao redor do símbolo; o SVG simplesmente não tem “fundo” — o desenho é o conjunto de trajetos. A edição posterior é a linha divisória maior: o SVG abre pronto para troca de cor global, ajuste de âncoras e desmontagem; o PNG só se trata pixel a pixel — mudar uma mancha de cor exige retocar a área num editor de bitmap.
O tamanho do arquivo é frequentemente mal compreendido. Com desenhos simples, o SVG registra poucos trajetos e costuma ser pequeno; um bitmap rico em gradientes e ruído, convertido em SVG, é desmontado em miríades de trajetos fragmentados e pode superar em muito o PNG original. “SVG é menor” não se sustenta; o que se sustenta é “o SVG de desenhos simples é pequeno”.
Uma tabela de cenários e escolha de formato
O tipo de material decide mais que os parâmetros do formato. Recomendações para três categorias comuns de gráficos de marca:
| Tipo de material | Características | Recomendação | Motivo |
|---|---|---|---|
| Logo gráfico, logotipo tipográfico | Contornos nítidos, poucas manchas de cor | Tenha um SVG mestre e salve também um PNG transparente | Trajetos limpos e editáveis; o SVG cobre o escalonamento e o PNG cobre entradas sem suporte a SVG |
| Mascote fotográfico | Gradientes contínuos, sombras ricas | Mantenha PNG de alta resolução | A vetorização gera trajetos fragmentados de difícil edição e perde o sentido de escalar livremente com poucos trajetos |
| Imagem de marca com textura complexa | Muitos detalhes, grão forte | Bitmap como base, vetorização local quando necessário | A conversão completa raramente compensa; para tamanhos maiores, reexporte um bitmap de alta resolução |
Uma regra basta: quanto mais nítidos os contornos e menos manchas de cor, mais vale vetorizar; quanto mais a imagem se aproxima de uma foto, mais ela deve permanecer em bitmap.
Como completar o SVG quando você só tem PNG
Confirmada a necessidade do SVG, a conversão é só um trecho curto do trabalho. Use a imagem para vetor e envie aquele PNG: a ferramenta aceita PNG, JPG e WebP, com largura e altura mínimas de 256 pixels, converte uma imagem por vez com sessão iniciada e entrega o SVG para download. As capturas de cada etapa — envio, verificação, download — estão no tutorial da mesma série, “Como converter PNG e JPG para SVG”, com o fluxo completo que não repetiremos aqui.
Concluída a conversão, o resultado ainda pede organização por uso. O painel de resultado oferece ampliação em 1×, 2× e 4×; antes de entregar, concentre-se em curvas, recortes e linhas finas. Dois pontos para aceitar de antemão: os textos viram trajetos de contorno — a conversão não restaura a fonte editável, e mudar a frase exige redigitar na ferramenta de design; a qualidade das bordas vem da imagem original, e um PNG muito comprimido gera bordas rugosas — troque por uma original mais nítida antes de converter, um preparo abordado em detalhe em “E se o logo vetorizado ficar com bordas rugosas”.
Como montar um pacote de entrega de arquivos da marca
Definidos os formatos, organize o logo num conjunto de arquivos nomeados, pronto para qualquer destinatário sem vai-e-vem de pedidos. Um pacote mínimo viável fica assim:
| Arquivo | Finalidade | Exemplo de nome |
|---|---|---|
| SVG mestre | Único arquivo-fonte para site, materiais, ampliação e edições futuras | acme-logo.svg |
| PNG transparente | Avatares, documentos de escritório e outras entradas só-bitmap | acme-logo-transparent.png |
| Prévia em fundo escuro | Conferir a legibilidade do símbolo em fundo escuro | acme-logo-preview-dark.png |
| Prévia em fundo claro | Conferir a apresentação em fundo claro | acme-logo-preview-light.png |
Use um prefixo único com sufixo de finalidade; em nova versão, atualize o número, sem criar nomes novos por cópia — senão o pacote acaba, mais cedo ou mais tarde, com logo-final-2.png e logo-versao-final.png convivendo. As prévias em fundo claro e escuro ficam melhor na mesma pasta: quem recebe confirma de relance se o símbolo funciona nos dois fundos.
Os arquivos de impressão são tratados à parte. Quando a gráfica pede PDF vetorial, modo de cor específico ou medidas de sangria, esses arquivos de produção ficam a cargo do fluxo de design correspondente: parta do SVG, converta e exporte no software de design e confirme item por item os padrões de cor com a gráfica. A ferramenta de imagem para vetor entrega SVG, não arquivos de produção gráfica.
Perguntas frequentes
SVG é sempre menor que PNG?
Não; o tamanho depende da complexidade do conteúdo. O SVG de um desenho simples registra poucos trajetos e costuma ser pequeno; um bitmap cheio de gradientes, sombras e ruído gera muitos trajetos fragmentados e pode ficar maior. O critério é o uso e a necessidade de escala, não o volume.
O PNG desfoca ao ampliar: preciso mesmo vetorizar?
Depende do que vem a seguir para o logo. Numa ampliação única e eventual, reexportar um PNG de resolução maior resolve; vale acrescentar o SVG quando houver escalonamento frequente, troca global de cor, uso impresso ou o papel de arquivo-mestre da marca a longo prazo. Um logo fotográfico, mesmo convertido, vira trajetos fragmentados de difícil edição — manter o bitmap em alta resolução é mais prático.
E quando a gráfica pede PDF?
Siga os requisitos específicos da gráfica no fluxo de design: leve o SVG mestre ao software de design, exporte no tipo de PDF indicado por ela e confirme item por item modo de cor, sangria e demais parâmetros. A ferramenta de imagem para vetor gera SVG; o PDF de produção gráfica nasce na etapa de design.
Só tem PNG? Comece completando o SVG
Comece pelo item que falta no pacote: com apenas a versão PNG, use a imagem para vetor para gerar o SVG, teste-o nas prévias de fundo claro e escuro e então decida se ele serve como arquivo-mestre. Concluída esta etapa, os três cenários — site, avatar e pôster — têm arquivos no formato certo.
