Por que meu logo SVG está cortado? Confira os limites antes de mudar a arte

1. Compare o mesmo arquivo em dois lugares

Salve a origem aprovada e faça uma cópia de trabalho. Abra o SVG exportado diretamente em um navegador e coloque esse arquivo exato na página ou aplicativo pretendido. Use um fundo contrastante se parte do logo for branca. Compare símbolo, letras e detalhes mais externos, não apenas a silhueta geral.

Se o arquivo isolado estiver completo, peça à pessoa responsável pela integração que inspecione o contêiner da imagem, dimensões fixas, configurações de recorte e recortes nos elementos ao redor. Envie o SVG original e uma captura de tela mostrando a diferença. Não redesenhe a marca para compensar um espaço recortado no site.

Se as duas visualizações perderem a mesma borda, comece pelo arquivo exportado e sua origem. Altere uma configuração por vez e guarde uma cópia para comparação. Assim é possível saber qual mudança resolveu o problema, em vez de aceitar acidentalmente um logo com outra aparência.

2. Separe as coordenadas da arte da sua caixa de exibição

O viewBox do SVG descreve um retângulo usando quatro números: x mínimo, y mínimo, largura e altura. Esse retângulo mapeia as coordenadas da arte para a área de visualização. Não é simplesmente uma configuração de resolução. Alterar apenas a largura CSS de uma imagem torna o mesmo mapeamento maior ou menor.

Em um exemplo simples, suponha que uma marca retangular deva ocupar as coordenadas de x = 0 a 100 e y = 0 a 40. Um viewBox cobrindo apenas x = 0 a 90 não descreve fielmente a área pretendida. Corrija a exportação na origem ou peça a alguém que entenda SVG que defina limites que incluam a arte aprovada.

Confira a extensão renderizada, não apenas o caminho central. Traços, marcadores e efeitos podem ultrapassar a geometria selecionada. Não aplique uma margem universal arbitrária: área extra demais faz o logo parecer pequeno quando colocado em largura fixa.

Leitura complementar: MDN: coordenadas de viewBox · MDN: overflow do SVG e recorte da área de visualização

3. Confira a área de exportação no Illustrator

Se o arquivo veio do Illustrator, volte ao documento AI original. Revise qual prancheta ou seleção foi exportada e se suas bordas incluem toda a marca aprovada. Procure artes vizinhas que não deveriam estar neste arquivo de entrega.

A Adobe distingue exportação SVG baseada em prancheta de exportação pelos limites dos objetos: com Use Artboards selecionado, as pranchetas definem as áreas exportadas; sem a opção, os limites combinados dos objetos definem a área de visualização. Escolha intencionalmente. Uma exportação de arte com limites justos e um arquivo com margens para aplicação são entregas diferentes.

Exporte novamente a partir da origem AI após corrigir a área. A Adobe recomenda voltar a essa origem para novas edições, em vez de tratar um SVG exportado como a nova arte mestre de trabalho. Não continue importando e salvando repetidamente até a prévia parecer correta por acaso.

Leitura complementar: Adobe: exportação SVG e Use Artboards

4. Inspecione recortes e efeitos separadamente

Um caminho de recorte pode ocultar parte de um desenho mesmo quando os limites externos do SVG são generosos. Inspecione grupos de recorte em uma cópia da origem. Desativar temporariamente o recorte relevante pode ajudar a identificar a causa, mas não exclua todos os recortes: alguns são essenciais ao design aprovado.

Um filtro também tem uma região definida. Desfoque e sombra podem ultrapassar o objeto filtrado, então inspecione a região do filtro e seu sistema de coordenadas quando apenas o efeito estiver truncado. Ampliar a área externa não corrige necessariamente uma região interna de filtro menor.

O mesmo cuidado se aplica a uma máscara ou a uma ilustração intencionalmente recortada dentro de um logo. Identifique qual limite é responsável, preserve a construção intencional e compare qualquer correção com a referência aprovada. Definir overflow como visible não é uma estratégia completa de entrega: o layout de destino ainda pode recortar o resultado.

Leitura complementar: MDN: caminhos de recorte · MDN: regiões de filtro · MDN: sistemas de coordenadas de filtros

5. Teste o reparo sem alterar a marca

Confira a exportação corrigida no tamanho de exibição pretendido e ampliada. A visualização maior ajuda a revelar uma curva cortada; a menor mostra se a aplicação ainda funciona. Compare proporções, espaçamento, aparência dos traços e qualquer margem interna aprovada.

Teste novamente o destino real. Mantenha os nomes dos arquivos original e corrigido distinguíveis e peça ao destinatário que substitua o recurso antigo em vez de se basear em uma captura de tela da versão corrigida. Se o erro persistir em apenas um aplicativo, documente essa limitação em vez de prometer compatibilidade universal.

O SVG anterior cortava o traço inferior no limite da exportação. Esta substituição foi exportada do original aprovado e conferida no navegador e no cabeçalho de destino. A arte em si permanece inalterada; use o novo SVG em vez do anexo anterior.

6. Organize a arte verificada em um pacote

Quando o SVG original estiver correto, o logopack.app poderá ajudar a organizar o pacote de entrega. Inspecione também os arquivos de saída selecionados: um original bem preparado é um ponto de partida, não um substituto para revisar cada resultado.

Uma conta gratuita permite testar a demonstração fornecida, mantendo sua arte SVG inalterada. Exportar sua própria arte exige um plano pago. Confira os planos atuais antes de exportar e mantenha os arquivos específicos de fornecedores preparados separadamente.

Leitura complementar: Abra o gerador · Veja os planos atuais

Antes de enviar a substituição

• ✓O mesmo SVG foi testado isoladamente e no destino.
• ✓O limite responsável foi identificado, não presumido.
• ✓Símbolo, letras, traços e efeitos aprovados estão completos.
• ✓Nenhum recorte ou máscara intencional foi removido sem revisão.
• ✓A substituição corresponde à arte e ao espaçamento aprovados.
• ✓O destinatário sabe qual arquivo substitui o antigo.