Rasterize gráficos SVG vetoriais em PNGs nítidos para uso geral.
SVG é um formato poderoso. Escala sem perda de qualidade, pesa pouco, aceita animações via CSS e JavaScript, e pode ser editado com qualquer editor de texto. Para web, é quase sempre a melhor escolha para gráficos vetoriais.
Mas o ecossistema digital não é composto apenas de navegadores modernos. Há situações concretas onde SVG falha ou gera resultados inesperados:
Em cada um desses cenários, converter SVG to PNG é o caminho mais rápido para manter a compatibilidade sem recriar o asset do zero.
Ao exportar SVG como PNG, você está essencialmente tirando uma "foto" do desenho vetorial. Essa captura tem resolução fixa — ou seja, o resultado é um grid de pixels com dimensões definidas. Isso traz implicações práticas que valem a pena entender:
Resolução depende de você. No SVG, a qualidade é sempre máxima porque as formas são matemáticas. No PNG, se você converter um logo de 200×200 pixels e depois tentar exibir em 800×800, vai parecer embaçado. Defina as dimensões pensando no maior tamanho de uso — é mais fácil reduzir do que ampliar depois.
Transparência é preservada. PNG suporta canal alfa, então elementos transparentes do SVG original serão mantidos. Isso é fundamental para logos sobre fundos variados, ícones de interface e composições em camadas.
Texto vira pixel. Se o SVG contém textos com fontes especiais, a rasterização captura exatamente como o texto aparece — não há risco de substituição de fonte. Por outro lado, o texto não será mais editável como texto; é parte da imagem.
Efeitos visuais complexos são capturados. Gradientes, filtros SVG, mascaramentos, sombras e blending modes — tudo isso é renderizado no momento da conversão. Desde que o navegador consiga exibir, o PNG vai refletir fielmente.
A maior frustração de quem converte SVG para PNG pela primeira vez é receber uma imagem borrada ou, no extremo oposto, um arquivo absurdamente pesado. O segredo está em calcular corretamente as dimensões de saída.
Para uso em tela (web, redes sociais, apresentações): Trabalhe com pixels. Um banner de header de site pode ter 1920×480 px. Um post de Instagram, 1080×1080 px. Uma thumbnail de YouTube, 1280×720 px. Defina essas dimensões antes de converter e o resultado sai nítido.
Para impressão: Calcule em DPI. Um cartão de visita padrão (9×5 cm) a 300 DPI equivale a aproximadamente 1063×591 pixels. Se o SVG original não tiver dimensões definidas em unidades físicas, ajuste manualmente no conversor multiplicando o tamanho desejado pelo DPI-alvo.
Para uso misto (web e impressão): Converta em alta resolução primeiro (300 DPI ou dimensões grandes em pixels) e depois gere versões menores a partir do PNG master. Isso evita ter que reconverter sempre que surgir uma nova necessidade.
Uma regra prática: se não tem certeza, converta para pelo menos o dobro do maior tamanho que imagina usar. PNG não perde qualidade ao reduzir (usando um bom redimensionador), mas perde visivelmente ao ampliar.
Converter com fundo branco quando queria transparência. Isso acontece quando o SVG tem um fundo explícito (um retângulo branco atrás dos elementos). Abra o SVG num editor como Inkscape ou no navegador, verifique se existe um elemento de fundo e remova antes de converter. Ferramentas como o Pixes.app respeitam o canal alfa do SVG — se ele estiver presente, o PNG sai com fundo transparente.
Escolher dimensões muito pequenas. Se o SVG abre "encaixado" numa tela de 300×300 px e você exporta nesse tamanho, vai ter um PNG minúsculo. Verifique as dimensões reais do viewBox do SVG ou defina manualmente um tamanho adequado para o contexto de uso.
Não considerar a escala do conteúdo. SVGs podem ter viewBoxes enormes (ex: 0 0 2000 2000) com conteúdo concentrado numa área menor. Ao rasterizar, todo o viewBox vira imagem — incluindo espaço vazio. Ajuste o viewBox ou as dimensões de exportação para incluir apenas o conteúdo relevante.
Perder qualidade ao converter, salvar como JPG, e depois converter de volta para PNG. Se você vai editar o resultado depois, mantenha em PNG desde o início. Cada conversão lossy (como JPG) descarta informação que não se recupera.
Ignorar o peso do arquivo resultante. PNGs rasterizados a partir de SVGs complexos com gradientes e efeitos podem ultrapassar 5 MB facilmente. Para web, comprima com o compressor PNG do Pixes.app antes de publicar — a diferença no tempo de carregamento da página é significativa.
PNG nem sempre é a melhor escolha após converter um SVG. Dependendo do uso, JPG pode gerar arquivos menores e mais adequados. A distinção principal:
Escolha PNG quando:
Escolha JPG quando:
Se o seu fluxo exige ambos os formatos a partir do mesmo SVG, converta primeiro para PNG (preservando toda a informação) e gere o JPG a partir dele. O conversor SVG to JPG do Pixes.app oferece controle sobre a qualidade de compressão, útil para encontrar o equilíbrio entre peso e nitidez.
Para quem trabalha com múltiplos formatos de saída a partir dos mesmos SVGs — desenvolvedores frontend, designers de produto, equipes de marketing — a eficiência está em organizar o pipeline de exportação:
1. Normalize o SVG antes de qualquer exportação. Remova metadados desnecessários, comentários de editor e atributos não utilizados. O otimizador de SVG do Pixes.app faz isso automaticamente, reduzindo o tamanho do arquivo-fonte e acelerando todas as conversões subsequentes.
2. Defina dimensões de exportação por contexto de uso. Crie uma lista simples das dimensões que seu projeto exige: ícones de 64×64, thumbnails de 400×300, banners de 1920×600, etc. Converter uma vez para cada contexto é mais rápido do que improvisar toda vez.
3. Use nomes de arquivo consistentes. Algo como logo-cinza-400x400.png evita confusão quando há dezenas de variantes. A disciplina de nomenclatura salva horas em projetos com múltiplos stakeholders.
4. Comprima antes de distribuir. Antes de enviar PNGs por e-mail, subir para um CMS ou compartilhar em repositórios, passe pelo compressor. Um PNG de 3.2 MB cai para 800 KB sem diferença perceptível — e o tempo de upload/download reflete isso imediatamente.
5. Mantenha o SVG original sempre. PNG é uma versão derivada. Se precisar ajustar cores, alterar uma curva ou adaptar para outro formato no futuro, voltar ao SVG é infinitamente mais fácil do que tentar editar um raster.