SVG armazena uma imagem como formas matemáticas que pode ser dimensionado para qualquer tamanho sem desfoque, enquanto o PNG armazena uma grade fixa de pixels. Essa única diferença decide a escolha: SVG para logotipos, ícones e gráficos planos que devem ser dimensionados, PNG para fotografias e detalhes complexos. SVG (Scalable Vector Graphics) é um formato baseado em XML padronizado pelo W3C em 2001; PNG (Portable Network Graphics) é um formato raster de 1996. Esta comparação explica vetor versus raster, como cada um lida com escala e tamanho de arquivo, transparência, edição, suporte ao navegador e uma regra clara de onde usar.

Nenhum dos formatos é melhor no geral, porque resolvem problemas diferentes. SVG é imbatível para gráficos que aparecem em vários tamanhos; PNG é a única escolha sensata para fotografias e imagens detalhadas. Saber a qual família sua imagem pertence responde à pergunta antes mesmo de abrir um conversor.

Vetor versus raster

Os dois formatos descrevem imagens de maneiras opostas. O SVG lista instruções como desenhar um círculo aqui, preencher esse caminho com aquela cor, para que o navegador o renderize em qualquer tamanho. PNG armazena a cor real de cada pixel em uma grade, como um mosaico. O vetor combina com formas com bordas limpas; raster combina com fotografias, onde milhões de pixels únicos não têm formas para descrever. Esta é a raiz de todas as diferenças práticas entre eles.

Uma analogia ajuda. Um vetor é uma receita: siga-o em qualquer escala e você terá o mesmo prato. Um raster é uma fotografia do prato acabado: amplie-o e você verá pixels maiores e mais desfocados. A receita fica perfeita em qualquer tamanho; a fotografia não.

Dimensionamento: SVG vence

O dimensionamento é a vantagem decisiva do SVG. Um logotipo SVG permanece extremamente nítido, de um favicon de 16 pixels a um outdoor, porque a matemática é recalculada em cada tamanho. Um PNG fica desfocado no momento em que você o amplia além da resolução, pois o software deve inventar pixels que nunca foram capturados. Para qualquer coisa mostrada em vários tamanhos, o SVG serve um arquivo onde o PNG precisa de várias exportações em diferentes resoluções.

Isso é mais importante do que parece. As telas modernas variam de telefones pequenos a grandes monitores 4K, e o design deve parecer nítido em todos eles. Um SVG lida com todas as telas de um único arquivo. Um PNG precisa de uma versão pequena, uma versão grande e, muitas vezes, uma versão retina, que multiplica os ativos que você gerencia.

Tamanho do arquivo

O tamanho do arquivo depende da complexidade, não das dimensões, que é o oposto do PNG. Um logotipo simples de duas cores como o SVG pode pesar alguns quilobytes e manter esse tamanho em qualquer escala, geralmente menor que o PNG. Mas o tamanho do SVG aumenta com a contagem de formas, então uma fotografia traçada torna-se muitas vezes maior que o PNG e é renderizada lentamente. O tamanho do PNG aumenta com a contagem de pixels, portanto, uma foto grande pesa de qualquer maneira.

A lição é combinar o formato com o conteúdo. Para um ícone plano, o SVG é menor e infinitamente escalonável. Para uma foto detalhada, o SVG se expande em milhares de caminhos, enquanto o PNG permanece em um tamanho previsível. A complexidade, e não o nome do formato, determina o peso.

Transparência

Ambos os formatos suportam transparência, portanto nenhum deles ganha aqui. SVG lida com isso nativamente, já que uma forma pode simplesmente não ter preenchimento atrás dela, e PNG carrega um canal alfa completo para uma transparência suave e parcial. Um logotipo permanece transparente sobre qualquer fundo em qualquer formato. A única diferença é que a transparência do SVG faz parte da descrição de sua forma, enquanto o PNG armazena um valor de opacidade para cada pixel.

Edição e flexibilidade

A edição favorece o SVG para gráficos. Como um SVG é um texto que descreve formas, seus caminhos recolorir e animar com CSS, e qualquer texto dentro dele permanece como texto real que um leitor de tela pode ler e um mecanismo de pesquisa pode indexar. Um PNG consiste em pixels fixos, portanto, alterar uma cor significa reexportar da fonte. Para um logotipo que você irá remodelar, tematar ou animar, o SVG é muito mais flexível.

Suporte ao navegador

O suporte é universal para ambos, por isso não decide a escolha. Todo navegador lê SVG e PNG sem plug-ins, e ambos o fazem há muitos anos. A diferença prática é o contexto: o SVG pertence a páginas da web e interfaces de aplicativos, enquanto o PNG também funciona em e-mail, documentos e softwares mais antigos que podem não aceitar SVG. Para um site, qualquer um deles é seguro; para um logotipo de e-mail, PNG é a escolha mais confiável.

Quando usar cada

A regra é simples e vale a pena memorizar:

Usar SVG para logotipos, ícones, gráficos, diagramas e artes de linha que devem ser dimensionados e permanecer nítidos.
Usar PNG para capturas de tela, gráficos detalhados e qualquer imagem com bordas suaves ou muitas cores.
Não use nenhum dos dois para fotos a longo prazo: JPG ou WebP compactam fotografias muito menores que PNG.

Mantenha um arquivo vetorial mestre para ativos de marca e exporte cópias PNG onde SVG não é aceito, como e-mail ou uploads de alguns aplicativos.

SVG e design responsivo

O design responsivo é onde o SVG ganha seu sustento. Um site moderno deve ter uma aparência nítida em um telefone, laptop e monitor 4K, e um SVG lida com todos os três, desde um arquivo em qualquer densidade de pixels. Não há necessidade de exportações separadas de pequeno, grande e retina, e não há desfoque quando o navegador aumenta a imagem para uma tela de alta resolução. O vetor simplesmente se redesenha de forma nítida em qualquer tamanho que o layout exija.

PNG não pode corresponder a isso. Para permanecer nítido em uma tela retina, um PNG deve ser exportado em resolução dupla, o que dobra o tamanho do arquivo e, mesmo assim, fica desfocado se for esticado além disso. Gerenciar vários tamanhos de PNG para layouts responsivos é um custo de manutenção real que um único SVG elimina.

Quando o PNG supera o SVG na prática

A PNG vence em mais casos do que sua reputação sugere. Qualquer imagem com detalhes fotográficos, gradientes, texturas ou sombras suaves pertence ao PNG, porque rastreá-lo para SVG produz uma bagunça feia e inchada. As capturas de tela são território PNG, pois misturam texto com detalhes da interface que não são vetorizados. E uma ilustração complexa com centenas de cores é menor e mais limpa como PNG do que como um SVG gigante de milhares de caminhos.

O erro que as pessoas cometem é presumir que o SVG é sempre a escolha moderna e superior. É superior apenas para gráficos planos e com bordas rígidas. Envie uma imagem detalhada para SVG e você obterá um arquivo maior que será renderizado lentamente, o oposto do que você queria.

Uma nota sobre SVG e segurança

SVG leva uma consideração que PNG não tem: porque é um código, um arquivo SVG pode conter scripts. Um SVG malicioso carregado em um site poderia, em teoria, executar JavaScript quando exibido. É por isso que muitas plataformas higienizam ou rejeitam SVGs enviados por usuários e por que você só deve confiar em SVGs de uma fonte conhecida. PNG, sendo dados puros de pixel, não apresenta esse risco. Para seus próprios logotipos e ícones, isso não é problema, mas explica por que alguns formulários de upload aceitam PNG e não SVG.

Erros comuns ao converter para SVG

Dois erros estragam a maioria das conversões de PNG para SVG. O primeiro é tentando vetorizar uma fotografia, que produz milhares de caminhos e um arquivo maior que o original. A segunda é deixar o bitmap original embutido no SVG após um rastreamento automático, para que o arquivo seja realmente um PNG em um wrapper SVG, sem ganhar nada. Trace apenas gráficos planos e, para o logotipo de uma marca, redesenhe-o em um editor vetorial em vez de confiar em um traçado automático, que fornece uma geometria limpa e o menor arquivo.

Como converter PNG para SVG

Converter um PNG em SVG significa vetorizar: traçar os pixels em caminhos. Isso funciona para logotipos planos, ícones e arte linear, e falha em fotografias, que não possuem formas claras para traçar. Nosso Conversor PNG para SVG rastreia gráficos simples em seu navegador, então nada é carregado. Para o logotipo de uma marca de sua propriedade, redesenhá-lo em um editor vetorial produz um resultado mais limpo do que qualquer traço automático. Para fotos, use nosso Conversor PNG para JPG em vez disso.

Perguntas frequentes

SVG é bom para design responsivo?

Sim, ideal. Um SVG permanece nítido em todas as telas e densidade de pixels, eliminando a necessidade de exportações separadas de PNG pequeno, grande e retina.

Por que alguns sites rejeitam uploads de SVG?

Porque um SVG pode conter scripts, ao contrário de um PNG. As plataformas limpam ou bloqueiam SVGs de usuários por questões de segurança, e é por isso que alguns formulários aceitam apenas PNG.

Por que meu SVG convertido é maior que o PNG?

Você provavelmente traçou uma foto ou deixou o bitmap incorporado. Vetorize apenas gráficos planos e exclua a imagem original após o rastreamento para que o SVG retenha caminhos, não pixels.

SVG é melhor que PNG?

Para gráficos, sim. SVG é dimensionado sem desfoque em um tamanho minúsculo. Para fotografias, o PNG vence, porque as fotos não têm formas limpas para serem armazenadas como vetores.

Qual é a diferença entre SVG e PNG?

SVG é matemática escalável; PNG é uma grade fixa de pixels. O SVG permanece nítido em qualquer tamanho, enquanto o PNG fica desfocado quando ampliado além de sua resolução.

Posso usar SVG para fotos?

Não, não é útil. As fotos têm milhões de cores e bordas suaves sem formas para traçar, então uma foto SVG é grande e confusa. Utilize PNG ou JPG.

Qual é menor, SVG ou PNG?

Para gráficos simples, SVG. Um logotipo de duas cores tem alguns kilobytes como SVG em qualquer tamanho. Para fotos, o PNG é menor, já que uma foto traçada tem balões.

O SVG mantém a transparência?

Sim. SVG suporta transparência nativamente, como o canal alfa do PNG, para que o logotipo permaneça transparente em qualquer plano de fundo.

Todos os navegadores suportam SVG?

Sim. Todo navegador moderno lê SVG e PNG sem plug-ins. SVG é adequado para páginas da web, enquanto PNG também funciona em e-mail e softwares mais antigos.

Como faço para converter PNG para SVG?

Rastreie. Um vetorizador rastreia um PNG plano em caminhos SVG, que funciona para logotipos e ícones, mas não para fotografias.

Posso editar um SVG depois de criá-lo?

Sim. Caminhos SVG abertos em qualquer editor de vetores e recolorir ou animar com CSS, já que o arquivo é um texto que descreve formas, não pixels fixos.

Qual formato devo usar para o logotipo de um site?

SVG. Ele é dimensionado com nitidez em todas as telas de um arquivo, e seu texto permanece legível para os mecanismos de pesquisa. Mantenha um PNG para e-mail onde SVG não for aceito.

PNG ou SVG são melhores para um ícone?

SVG, para dimensionamento. Um ícone SVG permanece nítido em qualquer tamanho, enquanto um ícone PNG precisa de múltiplas exportações e fica desfocado quando ampliado.

SVG e PNG resolvem problemas diferentes: SVG armazena matemática escalonável que permanece nítida em qualquer tamanho, enquanto PNG armazena uma grade fixa de pixels que fica desfocada quando ampliada. SVG vence para logotipos, ícones e arte de linha que devem ser dimensionados, editados e animados com CSS e veicular todas as telas de um arquivo. PNG vence para fotografias, capturas de tela e imagens detalhadas e funciona onde SVG não é aceito. Combine o formato com o conteúdo e use nossos conversores acima para vetorizar um gráfico simples ou manipular uma foto rasterizada, tudo em seu navegador.

Referência rápida: SVG ou PNG

Alcançar SVG quando a imagem é um logotipo, ícone, gráfico ou desenho de linha que deve ser dimensionado, quando você deseja recolori-la ou animá-la com CSS ou quando um arquivo deve servir para todos os tamanhos de tela. Alcançar png quando a imagem é uma captura de tela, um gráfico detalhado ou qualquer coisa com gradientes, texturas ou bordas suaves, e quando você precisa dela para trabalhar em e-mail ou software mais antigo que rejeita SVG. A linha divisória é simples: gráficos planos e com bordas rígidas tornam-se vetoriais, tudo o que é detalhado torna-se raster.

Mantendo um vetor mestre

Para qualquer ativo de marca, mantenha o original como vetor mestre e exporte cópias raster conforme necessário. Um único logotipo SVG pode gerar um favicon, um avatar social e um arquivo de impressão, cada um exportado no formato e tamanho corretos sob demanda. Trabalhar no sentido inverso, de um PNG raster de volta para um vetor, significa traçar, que nunca recupera totalmente a geometria limpa. Portanto, armazene o mestre como SVG quando puder e trate as exportações PNG como cópias descartáveis que você pode regenerar a qualquer momento.

O resultado final

SVG e PNG não são tanto rivais quanto especialistas. Os vetores descrevem formas e escalas para sempre, portanto, logotipos e ícones pertencem ao SVG. Os pixels capturam detalhes, portanto, fotografias e capturas de tela pertencem ao PNG. Escolha fazendo uma pergunta: esta imagem tem formas planas e nítidas ou detalhes fotográficos finos? Essa resposta sempre decide o formato, e manter um vetor mestre significa que você sempre pode exportar a cópia raster necessária.