Área de proteção do logo: calcule e preserve a margem

Calcule a área de proteção do logo a partir de uma unidade definida na arte aprovada e meça para fora dos limites visíveis do logo completo. Se a unidade escolhida é 10 e o logo mede 150 por 40, uma zona de exclusão de uma unidade em cada lado ocupa 170 por 60. O próprio logo continua medindo 150 por 40.

A área de proteção é a região que outros conteúdos precisam deixar vazia ao redor do logo. As margens do arquivo podem ajudar a levar esse espaço para um layout, mas a tela vazia é apenas uma forma de entrega. O manual da marca define a regra. Se você está preparando recursos de uma marca existente, use sua regra aprovada antes de criar outra.

Este guia acompanha uma composição original pelo cálculo, exportação SVG e redimensionamento. Se sua única origem é uma imagem raster, recupere primeiro as formas visíveis; um vetorizador de imagens não consegue deduzir a zona de exclusão aprovada.

Escolha uma unidade que pertença a este logo

Use uma característica mensurável que continue proporcional ao escalar o logo aprovado: a altura de um símbolo, uma dimensão de uma letra específica ou uma fração definida da arte completa. Diga exatamente o que mediu. Evite regras como “deixe algum espaço” ou um quadrado marcado com X sem explicação.

Manuais oficiais mostram por que essa é uma política de design, não uma proporção universal. O guia de área de proteção da University at Buffalo usa a altura do UB entrelaçado ao redor da composição principal da marca, com orientação separada para a arte de linhas. O guia da Vevo diferencia marcas acima e abaixo de 30 px de altura e indica espaçamentos específicos para web e tablet. Siga a regra da marca e da aplicação reais.

Em nosso exemplo original, o símbolo redondo tem 40 unidades de altura. Escolhemos X como um quarto dessa altura: X = 10. A margem exigida é de um X em cada lado. É uma regra inventada para este exemplo, não uma recomendação de que toda marca use 25% da altura do símbolo.

Escreva a regra de forma clara: “Nesta composição horizontal, X equivale a um quarto do diâmetro do círculo. Deixe pelo menos um X para fora de cada borda da composição completa.” O texto mantém a política mesmo quando um aplicativo apara a tela vazia.

Meça a composição completa e adicione a margem

Uma composição de logo é a disposição aprovada do símbolo e do logotipo usados juntos. Meça toda essa disposição. Usar apenas os limites do círculo deixaria as letras fora do cálculo da zona de exclusão.

Nosso círculo e as três letras desenhadas vão de x = 0 a 150 e de y = 0 a 40. Não há traços, sombras ou objetos ocultos neste exemplo. Portanto, o retângulo de exclusão vai de x = -10 a 160 e de y = -10 a 50.

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

Se sua arte tem traços ou efeitos visíveis, inclua sua extensão visível na revisão. Uma medida apenas geométrica pode ser diferente do resultado pintado. O guia de caixa delimitadora SVG explica essa distinção; aqui usamos deliberadamente geometria com preenchimento simples.

Leve a regra em um SVG com margens

O viewBox SVG mapeia um retângulo interno de coordenadas para o viewport exibido. Neste exemplo, viewBox="-10 -10 170 60" inclui a margem calculada sem mover ou ampliar a arte.

Salve este exemplo completo como logo-padded.svg. As letras do logotipo são formas desenhadas, por isso não há dependência de fonte. O desenho de círculo e letras é uma arte original de exemplo, não um recurso aprovado de outra marca.

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

Para criar um recurso complementar com limites justos, use width="150", height="40" e viewBox="0 0 150 40" mantendo o mesmo círculo e os mesmos caminhos. Dê nomes que permitam ao destinatário identificar qual arquivo inclui a margem. Mantenha guias de medição no documento da marca ou em uma camada de revisão separada, não na arte que será posicionada.

Redimensione o recurso sem diminuir o logo pretendido

Decida se uma largura se refere à arte visível ou ao arquivo inteiro com margens. Com largura de arquivo de 170 px, a arte do exemplo tem 150 px de largura e a margem é de 10 px. Com 340 px, a arte tem 300 px e a margem é de 20 px. A regra proporcional sobrevive ao redimensionamento uniforme.

Se o briefing pede um logo visível de 300 px, defina este arquivo com margens para 340 px de largura. Definir o arquivo com margens para 300 px resultaria em apenas cerca de 264,7 px de arte visível, porque 300 × 150 / 170 é aproximadamente 264,7.

Nota do método: renderizamos os SVGs completos, com limites justos e com margens, no Chromium. Os limites geométricos da arte eram de 150 por 40 unidades. Nas larguras com margens de 170 px e 340 px, as larguras horizontais medidas da arte foram 150 px e 300 px, com margens de 10 px e 20 px. Isso verifica o exemplo criado no navegador; não comprova o comportamento de importação de todos os editores.

Quando o logo parecer pequeno demais, confira a tela do arquivo antes de ampliar objetos aleatórios. Quando o espaço desaparecer após a importação, inspecione os limites importados no destino e restaure a margem pela regra X escrita. Para um logo largo em outra moldura, use o ajuste de proporção SVG para entender o espaço vazio adicional introduzido pelo posicionamento.

Onde o PerfectVector entra na entrega do logo

O PerfectVector pode recuperar formas vetoriais quando uma marca só tem uma cópia raster do logo. Depois de obter essas formas, compare a marca completa com a referência aprovada, remova partes de fundo indesejadas e aplique separadamente a regra documentada de área de proteção. O fluxo de vetorização de logos trata da recuperação das formas.

Peça primeiro o master vetorial original e o manual da marca. Esses arquivos preservam a arte e as decisões de espaçamento melhor que um novo traçado. A borda vazia de um JPG pode ser uma margem acidental de exportação; não é prova de uma política da marca. O guia de formatos de arquivo de logo ajuda a escolher os arquivos para entregar, e o guia de como vetorizar um logo aborda preparação e inspeção da origem.

Termine conferindo a arte completa, a definição escrita de X, as dimensões do arquivo com margens e o layout real ao redor. Preserve um master com limites justos e o recurso destinado ao posicionamento. Outras verificações de entrega estão na biblioteca de fluxos do blog.

Perguntas frequentes

A área de proteção do logo é sempre um quarto da altura dele?

Não. Um quarto da altura do círculo é a regra escolhida para este exemplo original. Marcas existentes podem definir outras unidades, proporções e exceções para aplicações específicas.

Devo adicionar um retângulo branco para preservar a área de proteção?

Você pode reservar espaço vazio com o viewBox SVG sem adicionar um retângulo pintado. Um retângulo branco muda a arte sobre um fundo colorido. Teste o arquivo transparente com margens no posicionamento pretendido.

Um SVG com margens aplica o manual da marca automaticamente?

Não. Ele leva espaço vazio dentro do viewport, mas um importador pode aparar os limites e objetos do layout podem se sobrepor. A regra escrita e uma verificação final de posicionamento continuam necessárias.

Fontes

1. University at Buffalo — Área de proteção — Apresenta um exemplo oficial de unidade baseada na marca e exceções específicas de aplicação.
2. Vevo — Área de proteção do logo — Mostra como as orientações podem mudar com o tamanho da marca e o contexto digital.
3. MDN — SVG viewBox — Explica o retângulo de coordenadas usado para levar a margem vazia do exemplo.

Se o vetor original estiver ausente, recupere seu logo raster com o PerfectVector. Inspecione a composição completa comparando-a com a referência, aplique sua regra aprovada de área de proteção e confira o tamanho visível do logo no posicionamento final.