SVG vs PNG: Imagens Vetoriais vs Raster
SVG e PNG resolvem problemas diferentes. SVG descreve geometria vetorial e também pode incorporar raster; PNG guarda uma grade fixa de pixels. A escolha depende da arte de origem, segurança, acessibilidade, edição, renderização e tamanho medido.
A diferença central entre SVG e PNG
A distinção SVG vs PNG corresponde à diferença entre gráficos vetoriais e raster.
SVG é baseado em XML e descreve formas, caminhos, texto, filtros, estilos e recursos incorporados. Partes vetoriais são redesenhadas no tamanho final, mas nitidez depende de geometria, traços, efeitos, alinhamento e raster incorporado.
PNG guarda uma grade fixa de pixels. Ampliar exige reamostragem e pode suavizar ou pixelizar. Entregar uma origem muito maior que o espaço aumenta transferência e decodificação, salvo quando candidatos responsivos permitem ao navegador escolher.
Essa diferença afeta tamanho, escala, edição e os tipos de imagem que cada formato trata bem.
Quando usar SVG
SVG é um bom candidato para arte vetorial revisada quando segurança, acessibilidade, renderização e incorporação estão definidas:
- Logos — um SVG limpo cobre vários tamanhos sem ampliar raster; marcas muito pequenas podem exigir simplificação, ajuste de traços ou variante própria.
- Ícones — UI e navegação podem compartilhar geometria e estilo. SVG pode ser menor que vários rasters, mas caminhos complexos ou repetição inline podem inverter o resultado.
- Ilustrações e diagramas — linhas e cores planas. Texto SVG pode ser selecionável, mas acessibilidade e indexação exigem markup e incorporação corretos.
- Animações — SVG aceita CSS, JavaScript e mecanismos próprios. Preferências de movimento, CPU, CSP, acessibilidade e interação precisam de revisão.
- Favicons — navegadores atuais aceitam SVG, mas um conjunto completo pode exigir raster ou ICO. Gere saídas comuns no Gerador de Favicon.
SVG é amplamente aceito nos navegadores atuais e em ferramentas de design. Popularidade não garante que um recurso deva ser vetorial: compare complexidade, segurança, cache, acessibilidade e renderização.
Quando usar PNG
PNG é um bom candidato quando pixels raster sem perdas ou transparência alfa importam e o tamanho cabe no orçamento:
- Fotos com transparência — PNG oferece alfa e pixels sem perdas, mas fotos detalhadas podem ficar grandes. Compare WebP/AVIF com alfa; sem transparência, teste JPEG e formatos fotográficos modernos.
- Capturas de tela — PNG preserva os pixels codificados; perfis, metadados, escala e paleta continuam sendo questões separadas.
- Arte complexa com muitas cores — pinturas, texturas e ilustrações fotorrealistas que não viram formas vetoriais limpas.
- Gráficos raster com texto — quando bordas precisam de reprodução por pixel, PNG evita artefatos de formatos com perdas.
Tamanho de arquivo e performance
Para ícones, logos e ilustrações simples, SVG otimizado ou raster pode ser menor conforme geometria, dimensões, repetição, compressão e cache:
| Tipo de gráfico | PNG | SVG | Economia |
|---|---|---|---|
| Ícone simples | Um tamanho raster por candidato | Geometria vetorial costuma ser compacta | Meça os dois |
| Logo | Pode exigir várias resoluções | Costuma servir bem com origem vetorial | Meça os dois |
| Coleção de ícones | Arquivos separados somam requisições e bytes | Sprite, arquivos externos e inline têm custos de cache diferentes | Meça a página inteira |
| Ilustração simples | Cresce com dimensões e detalhe | Cresce com caminhos, estilos e filtros | Depende do conteúdo |
Compressão de texto como Brotli ou gzip pode reduzir a transferência SVG, dependendo do markup e servidor. Compare bytes transferidos comprimidos, não apenas o arquivo em disco.
SVG inline evita uma requisição, mas aumenta o HTML e não tem cache independente. SVG externo pode usar cache. Vetores normalmente dispensam variantes de densidade, enquanto SVG complexo ou com raster pode precisar de resposta adaptativa. Meça a página inteira.
Para fotos e texturas, o traçado cria geometria excessiva ou perde detalhes. Incorporar o raster em SVG acrescenta contêiner e muitas vezes base64 sem virar vetor. Use PNG, JPEG, WebP ou AVIF.
SVG vs PNG: comparação rápida
| Característica | SVG | PNG |
|---|---|---|
| Tipo de imagem | Vetor (formas e caminhos) | Raster (grade de pixels) |
| Escala | Partes vetoriais são redesenhadas; a renderização ainda importa | Grade fixa; ampliar pode suavizar |
| Transparência | Sim | Sim (canal alfa) |
| Conteúdo fotográfico | Geralmente inadequado, salvo raster incorporado | Opção alfa sem perdas; compare o tamanho |
| Ícones/logos | Forte com origem vetorial limpa e revisada | Funciona nas dimensões raster preparadas |
| Animação | Sim (SVG/CSS/JS) | Extensão APNG |
| Editável com código | Sim (XML) | Não |
| Texto e acessibilidade | Possível com markup e incorporação corretos | Exige texto ao redor ou equivalente alt |
| Suporte de navegador | Navegadores atuais; regras variam por incorporação | Muito amplo |
| Tamanho | Depende da geometria e markup | Depende das dimensões e conteúdo |
Exemplo prático: reformulando um site empresarial
Imagine um site com logo, 30 ícones de navegação e recursos, uma foto principal e capturas do produto. Atribua os formatos assim:
- Logo → SVG se houver origem vetorial limpa; teste traços e leitura em tamanhos pequenos.
- Coleção de ícones → sprite SVG ou componentes podem reutilizar geometria; valide acessibilidade, cache, CSP e markup transferido.
- Foto principal → teste JPEG, WebP e AVIF nas mesmas dimensões e qualidade visível, com fallbacks. Veja o guia de otimização.
- Capturas do produto → comece com PNG quando precisar preservar pixels e compare opções sem perdas e uma entrega com perdas aceitável.
Como converter entre SVG e PNG
Converta arquivos compatíveis no navegador sem instalar software. O Vizua processa o arquivo no navegador e não o envia ao nosso servidor de imagens; serviços da página ainda podem usar a rede:
- SVG para PNG — rasterize SVG compatível numa escala disponível e revise a saída
- Vetorizar Imagem — trace rasters compatíveis em caminhos aproximados; não recupera a geometria original
- Gerador de Favicon — crie saídas comuns a partir de imagem compatível
Para dimensões e orçamentos de bytes por página, consulte o guia de tamanhos de imagem.
Perguntas frequentes
SVG pode substituir PNG por completo?
Não. SVG é ótimo para gráficos, ícones e ilustrações, mas não representa fotos com eficiência. Uma foto em SVG seria enorme se incorporada como raster ou perderia detalhes ao ser traçada em formas. Use SVG para conteúdo vetorial e PNG, JPEG ou WebP para imagens raster complexas.
É seguro usar SVG em sites?
SVG é conteúdo XML ativo e pode conter scripts, eventos, referências externas, links, CSS e filtros. Trate SVG não confiável como código: valide por lista permitida, higienize com ferramenta mantida, sirva com tipo e isolamento adequados e aplique CSP. Procedência confiável não elimina a revisão.
Por que meu SVG parece desfocado?
A geometria vetorial pode ser redesenhada sem ampliar raster, mas alinhamento fracionário, traços, filtros, transformações, antialiasing, raster incorporado ou tela podem suavizar o resultado. Revise viewBox, dimensões, traços e conteúdo raster.
Devo usar SVG ou fonte de ícones?
SVG costuma servir porque cada ícone pode ter nome acessível ou ser ocultado quando decorativo e o estilo pode ser isolado. Não é automaticamente mais rápido nem acessível: SVG inline aumenta o HTML, sprites externos permitem cache e ARIA exige implementação correta. Compare as necessidades do sistema.
Posso converter PNG para SVG?
Sim. O Vetorizar Imagem do Vizua traça PNG ou JPEG em caminhos SVG aproximados. Funciona melhor com logos, ícones e ilustrações simples de poucas cores e bordas limpas, não com fotografias complexas.
Converta suas imagens
Sem conta. O arquivo selecionado é processado no navegador e não é enviado ao nosso servidor de imagens.