Como escolher as dimensões em pixels ao exportar SVG para PNG

Separe as coordenadas do SVG dos pixels do PNG

Um SVG descreve formas, caminhos, texto e outros elementos por meio de coordenadas e instruções de desenho. Os quatro valores de viewBox definem a origem, a largura e a altura de um retângulo interno. Eles orientam como a arte é encaixada em uma área de exibição, mas não determinam quantos pixels o PNG precisa ter. O mesmo SVG pode aparecer como um ícone pequeno, uma ilustração em um artigo ou uma figura grande em uma apresentação sem alterar a viewBox.

O PNG, por outro lado, registra o resultado renderizado em uma grade fixa. Quando ele é ampliado depois, as curvas não são recalculadas como no SVG; os pixels existentes são interpolados. Por isso, transformar mecanicamente uma viewBox de 100 por 100 em um PNG de 100 por 100 pixels pode ser insuficiente para uma aplicação grande e desnecessário para uma miniatura. Antes de converter, anote a maior dimensão de exibição, qualquer ampliação posterior e a necessidade de telas de alta densidade.

• Trate a viewBox como coordenadas internas.
• Registre o maior tamanho real de exibição antes de exportar.

Planeje de trás para frente a partir do uso real

Comece pela largura e pela altura em que a imagem realmente será mostrada. Uma arte exibida com 200 pixels CSS de largura pode usar uma fonte raster maior em uma tela densa, mas o multiplicador adequado depende do produto, dos dispositivos e das regras de entrega. Dimensões maiores oferecem alguma folga para a amostragem, porém normalmente aumentam o tamanho do arquivo e o custo de processamento. Teste uma opção razoável em vez de escolher o maior valor disponível sem avaliação.

Se a arte tiver vários destinos, liste-os separadamente. Um ícone de 24 pixels em uma barra, uma figura de 300 pixels em uma central de ajuda e uma imagem de slide têm necessidades diferentes. Gere saídas próprias quando um único arquivo enorme desperdiçaria recursos ou quando uma versão pequena teria de ser ampliada. Inclua as dimensões no nome das variantes aprovadas e registre o uso de cada uma para evitar que a versão de ícone seja aplicada em uma área grande.

• Defina tamanhos distintos para web, aplicativo, documento e apresentação.
• Prepare mais de uma saída quando os destinos forem muito diferentes.

Confira proporção e espaço vazio interno juntos

Quando a proporção da viewBox não coincide com o retângulo de saída do PNG, o renderizador precisa resolver a diferença. Conforme o arquivo e a configuração, ele pode preservar toda a arte com espaço adicional, cortar parte do conteúdo ou esticar as formas. Não altere largura e altura de forma independente, a menos que a deformação seja desejada. Calcule a proporção original, ajuste as duas dimensões em conjunto e confira o resultado, pois o conversor pode não usar a regra de encaixe que você imaginou.

Também diferencie o tamanho da tela do espaço efetivamente ocupado pelo desenho. Uma viewBox ampla pode conter margens grandes, fazendo o símbolo parecer pequeno mesmo em um PNG maior. Se puder editar a fonte, corrija o espaço desnecessário no SVG. Caso contrário, considere um corte cuidadoso depois da rasterização, sem remover respiros ou sombras intencionais. Aumentar a quantidade de pixels não elimina margens internas nem corrige um enquadramento inadequado.

• Faça o retângulo de saída acompanhar a proporção da fonte.
• Analise separadamente a tela e os limites reais do desenho.

Teste linhas finas, texto e recursos vinculados

Linhas que parecem suaves no vetor podem cair entre os limites dos pixels ao serem rasterizadas em tamanho pequeno, ficando borradas ou irregulares. Letras muito pequenas e espaços estreitos também podem se fechar. Observe o PNG na dimensão em que será usado, e não apenas com grande ampliação. Se a menor variante perder clareza, simplifique o desenho, reforce linhas e espaçamentos, aumente a saída quando fizer sentido ou crie uma versão específica para tamanhos reduzidos.

Alguns SVGs dependem de fontes, imagens externas, folhas de estilo, máscaras ou efeitos disponíveis em uma visualização, mas ausentes no conversor. Uma fonte substituta altera quebras e proporções; uma imagem que não carregou simplesmente desaparece. Compare o PNG com uma renderização confiável da fonte. Em uma marca escrita, confira cada letra; em uma ilustração, revise imagens, gradientes, máscaras e sombras. Dimensões corretas não compensam uma dependência ausente.

• Avalie linhas e letras no tamanho final de exibição.
• Confirme as fontes renderizadas e as imagens vinculadas.

Valide o PNG baixado no contexto verdadeiro

Processe primeiro um SVG representativo na ferramenta de SVG para PNG usando as dimensões escolhidas. Baixe o resultado e abra-o em outro visualizador para confirmar largura e altura reais. Examine proporção, espaço vazio, corte, cores, texto e regularidade das linhas. Se precisar de transparência, coloque o PNG sobre fundos claros e escuros para detectar uma área branca inesperada ou halos nas bordas. A prévia do conversor não substitui a inspeção do arquivo salvo.

Em seguida, insira exatamente esse PNG na página, no aplicativo ou no documento de destino. Confira a menor e a maior exibição planejadas e veja se algum sistema amplia o arquivo além do limite previsto. Se ele parecer desfocado, diferencie entre poucos pixels na exportação, uma fonte ou imagem alterada durante a renderização e o redimensionamento posterior. Nomeie as variantes aprovadas com suas dimensões e preserve o SVG para produzir novos tamanhos corretamente.

Antes de converter um lote, teste um segundo SVG com outro tipo de detalhe. Uma peça com muito texto e um símbolo simples podem reagir de maneira diferente às mesmas dimensões. Registre o tamanho, o fundo e os locais já verificados. Uma última conferência em um navegador ou visualizador representativo ajuda a separar falhas de exportação da interpolação feita pelo ambiente de exibição.

• Confirme as dimensões no arquivo efetivamente baixado.
• Use a mesma saída no menor e no maior destino planejado.