Guarde o seu logo mestre como SVG, porque um SVG armazena as formas (um círculo aqui, uma curva ali, esta cor) e o navegador as desenha no tamanho que a página pedir. Um PNG armazena uma grade de pixels coloridos capturada em um só tamanho. Se você a mostra maior do que foi feita, o navegador precisa inventar os pixels que faltam, e por isso um logo PNG ampliado fica borrado. Gere cópias PNG a partir do SVG nos lugares que exigirem, e mantenha o SVG como original.
Qual é a diferença real entre um logo vetorial e um raster
Uma imagem raster é uma medição. Alguém olhou o logo através de uma grade de 400 × 100 e anotou a cor de cada uma das 40.000 células. Nada no arquivo sabe que as células 12 a 19 da linha 30 eram a borda de uma letra. Uma imagem vetorial guarda a intenção: desenhe um círculo de raio 40 neste ponto, com esta cor. Redesenhar isso com 40 ou com 4.000 pixels de largura é a mesma instrução com outro fator de escala.
O custo é o tipo de imagem que cada formato consegue conter. Um logo feito de cores chapadas, bordas limpas e algumas dezenas de formas é quase o melhor caso para vetores. Uma fotografia é o pior: descrevê-la com formas exige mais dados do que registrar os pixels, e por isso as fotos ficam em JPG, WebP e PNG enquanto os logos têm escolha.
Por que o meu logo PNG fica borrado no celular
Porque pixels CSS e pixels do dispositivo são unidades diferentes. Um celular com densidade de pixels 3 coloca nove pixels do dispositivo atrás de cada pixel CSS (três na largura, três na altura). Um logo exibido com 200 pixels CSS de largura é desenhado com 600 pixels do dispositivo na horizontal. Se o seu PNG tem 200 pixels de largura, o navegador o estica três vezes e as bordas ficam suaves. A solução usual é exportar o PNG com duas ou três vezes o tamanho de exibição e reduzi-lo com CSS, e repetir o exercício sempre que o design mudar de tamanho ou surgir uma tela nova.
Um SVG dispensa o exercício. O navegador o rasteriza na resolução real do dispositivo, então uma borda nítida continua nítida num monitor 1x de escritório, num celular 3x e num projetor. Um arquivo, sem srcset. O limite prático está no outro extremo: se o logo aparece com 16 pixels, linhas finas e vãos pequenos deixam de ser visíveis em qualquer resolução, e uma versão simplificada desenhada para tamanhos pequenos ficará melhor do que o logo completo reduzido.
Um SVG funciona na assinatura de e-mail e como favicon
Um favicon e a assinatura de e-mail dão respostas opostas.
- Favicon: sim, com um plano B. Chrome, Edge e Firefox atuais aceitam um ícone SVG, e ele continua nítido na aba, nos favoritos e numa tela de alta densidade. O suporte em outros navegadores é mais irregular e os antigos o ignoram, então mantenha um
favicon.icoao lado. O guia de tamanhos de favicon lista o que publicar, e um ícone SVG pode levar uma regraprefers-color-schemepara que um logo escuro não desapareça numa barra de abas escura. - Assinatura de e-mail: não. Os clientes de e-mail exibem imagens de uma lista curta de formatos, e o SVG não está nela de forma confiável: o Gmail e as versões desktop do Outlook são os que preocupam, e seus destinatários usam o que usam. O logo de uma assinatura deve ser um PNG, exportado com duas a três vezes o tamanho de exibição para ficar nítido num celular, com a largura definida no HTML para que apareça no tamanho menor.
- Imagens de redes sociais e de compartilhamento: raster. Pré-visualizações Open Graph, muitos uploads de foto de perfil e a maioria dos formulários de anúncio de marketplaces pedem PNG ou JPG e rejeitam SVG de cara.
- Impressão: envie o SVG, ou um PDF ou EPS exportado da mesma fonte, se a gráfica aceitar vetores. Uma gráfica pode escalá-lo para um cartão de visita ou uma faixa sem que haja uma pergunta de resolução.
Como tiro PNGs de um SVG sem um programa de design
O conversor de imagens abre um SVG do jeito que o navegador faz e o grava como PNG, JPG ou WebP, tudo no seu dispositivo. Ele tem dois limites. Ele desenha o SVG no tamanho que o arquivo declara, então um logo cujo elemento raiz diz width="24" height="24" sai como um PNG de 24 pixels. Para obter 600 pixels, edite antes esses dois atributos no SVG. E um SVG com apenas um viewBox e sem width e height não tem tamanho intrínseco, e os navegadores divergem sobre o que assumir, então defina-os explicitamente. O conversor só vai de SVG para raster. Ele não transforma um PNG de volta em vetor, porque isso exige vetorização, que é outro trabalho.
Para ícones, o gerador de favicon aceita um SVG como fonte e monta a partir dele o .ico multitamanho e o conjunto de PNGs. Ele não repassa o seu próprio SVG como icon.svg: esse arquivo só é produzido no modo de letra. Se você quer o ícone SVG, copie o seu próprio arquivo para a raiz do site e adicione a tag link manualmente.
Quando um PNG é de fato a resposta certa
- O logo já é um bitmap. Se tudo o que você tem é um PNG de 300 pixels de um designer anterior, embrulhá-lo numa tag SVG não muda nada: os pixels lá dentro são os mesmos. Confira abrindo o SVG num editor de texto. Se você vê uma string
base64longa e nenhuma forma, é um PNG fantasiado. - O destino rejeita SVG. E-mail, pré-visualizações de compartilhamento, algumas lojas de aplicativos e muitos formulários de upload.
- A arte é, na prática, uma textura. Pintura a pincel, granulação e efeitos fotográficos não têm uma descrição curta. Um SVG de uma pintura vetorizada pode ter várias vezes o tamanho do PNG de onde saiu.
- Um tamanho minúsculo e fixo. Um ícone de 32 pixels desenhado à mão sobre uma grade de pixels pode superar um vetor escalado para esse tamanho exato.
O que pode dar errado com logos SVG
O texto é o problema de sempre. Um SVG que contém um elemento <text> nomeia uma fonte e depende de quem o vê tê-la, então o logotipo aparece com uma fonte substituta na máquina de outra pessoa. Converta o texto em contornos antes de exportar. Depois, verifique se o arquivo tem restos do editor: alguns programas gravam camadas ocultas, metadados e coordenadas enormes, e um logo simples que pesa 200 KB merece uma olhada. Por fim, um SVG pode conter scripts e referências externas, então trate um arquivo de origem desconhecida como qualquer arquivo que pode executar código, e não o cole direto numa página que você controla.
O conversor de imagens faz as cópias PNG no seu dispositivo sem enviar o logo, e mostra quanto o tamanho mudou em relação ao arquivo com que você começou. Para a aba do navegador, quais tamanhos de favicon você realmente precisa é a próxima pergunta depois de resolvido o SVG, e que tamanho as imagens de um site devem ter cobre as imagens que continuam raster.
Perguntas frequentes
SVG é melhor que PNG para um logo?
Para o arquivo mestre, sim. Um SVG armazena o logo como formas, então continua nítido em qualquer tamanho e em qualquer densidade de tela, e um logo simples costuma ter poucos kilobytes. O PNG continua sendo a exportação certa para os lugares que rejeitam SVG, como assinaturas de e-mail, pré-visualizações de compartilhamento e muitos formulários de upload.
Posso usar um logo SVG na assinatura de e-mail?
Não de forma confiável. Os clientes de e-mail aceitam imagens de uma lista curta de formatos e o SVG não é confiável nela, com Gmail e Outlook desktop como os pontos problemáticos de sempre. Use um PNG exportado com duas a três vezes o tamanho em que será exibido, e defina a largura de exibição no HTML para que fique nítido em celulares de alta densidade.
Posso usar um SVG como favicon?
Sim nas versões atuais de Chrome, Edge e Firefox, e ele continua nítido em qualquer tamanho. O suporte em outros navegadores é menos consistente e os antigos o ignoram, então publique também um favicon.ico e um PNG apple-touch-icon. Os navegadores pedem /favicon.ico por conta própria, então esse arquivo funciona mesmo quando o seu markup não.
Como converto um SVG em PNG sem enviá-lo?
Use um conversor que rode no navegador. O navegador decodifica o SVG e a página o grava como PNG, então o arquivo fica no seu dispositivo. O PNG sai no tamanho que o SVG declara nos atributos width e height, então defina esses valores com o tamanho em pixels que você quer antes de converter.
Por que o meu logo SVG está borrado?
Geralmente o SVG é um bitmap disfarçado: contém um PNG ou JPG embutido, e ao abri-lo num editor de texto você verá uma string base64 longa em vez de formas. Um vetor de verdade não borra por causa de escala. Se ele contém formas e mesmo assim parece suave, as formas podem ser linhas finas exibidas bem menores do que foram desenhadas.
Converter um logo PNG em SVG o deixa nítido?
Por si só não. Salvar ou renomear um PNG como SVG apenas embrulha os mesmos pixels. Para obter um vetor de verdade é preciso redesenhar o logo, ou vetorizá-lo com um programa, que aproxima as bordas com formas e normalmente precisa de ajustes manuais depois.
Última atualização 6 de outubro de 2026
