PNG vs SVG: qual formato para logotipos, ícones e gráficos?

PNG e SVG são dois formatos populares para logotipos e gráficos — mas funcionam de formas bem diferentes. Escolher o errado resulta em um logotipo borrado ou um arquivo que não abre em todo lugar. Veja como decidir.

PNG vs SVG: a diferença central

• PNG (Portable Network Graphics) é um formato raster — armazena a imagem como uma grade de pixels. Um PNG de 200×200 tem exatamente 40.000 pixels. Amplie-o e ele fica borrado.
• SVG (Scalable Vector Graphics) é um formato vetorial — armazena formas como instruções matemáticas. Um logotipo SVG fica perfeitamente nítido em qualquer tamanho, de um favicon (16×16) a um outdoor.

Quando usar PNG

• Imagens complexas ou fotografias: o SVG consegue descrever formas complexas, mas é impraticável para fotos
• Compatibilidade multiplataforma: o PNG abre em todo lugar — navegadores, processadores de texto, e-mail, apps de mensagem
• Quando você precisa de um tamanho de saída fixo: para posts de redes sociais, impressão em DPI conhecido ou elementos de UI perfeitos ao pixel
• Capturas de tela e mockups de UI: raster por natureza, o PNG é o formato certo
• Quando o SVG não está disponível: um PNG de alta resolução (2000+ pixels de largura) funciona bem na maioria dos casos

Quando usar SVG

• Logotipos e marcas: logotipos SVG ficam nítidos em qualquer tamanho — cabeçalho de site, ícone de app, folheto impresso
• Ícones: ícones de UI em SVG escalam perfeitamente em telas retina/alta densidade
• Ilustrações feitas de formas: gráficos, diagramas, infográficos, ilustrações
• Animações: o SVG suporta animações CSS e JavaScript
• Web design responsivo: o SVG escala automaticamente com a janela do navegador

Comparação PNG vs SVG

Usando os dois juntos

• Muitos fluxos usam os dois formatos:
• Mantenha o SVG como o arquivo mestre do logotipo para editar e escalar
• Exporte versões PNG em tamanhos específicos para redes sociais, apresentações e e-mail
• Use um PNG 2× (ex.: 400×400 para um logotipo de 200×200) para telas retina
• Se você só tem um logotipo PNG, use nosso Redimensionador para criar versões em alta resolução e PNG → WebP para uso na web.