> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Área de proteção do logo: calcule e preserve a margem > Escolha uma unidade de proteção para o logo, calcule toda a zona de exclusão e preserve-a em SVG sem confundir a arte com o tamanho da tela com margens. Source: https://perfectvector.com/pt-BR/blog/logo-clear-space-calculation Language: pt-BR Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 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](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) 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](https://brand.vevo.com/logo/clearspace/) 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. ```text 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](https://perfectvector.com/pt-BR/blog/svg-bounding-box) explica essa distinção; aqui usamos deliberadamente geometria com preenchimento simples. ![A mesma composição original de círculo e logotipo com limites justos, uma guia de zona de exclusão de dez unidades e um SVG com margens em dois tamanhos](https://perfectvector.com/blog/logo-clear-space-calculation/clear-space-bounds.webp) *A arte preenchida mede 150 por 40 unidades. A margem escolhida de 10 unidades resulta em uma tela de 170 por 60. A guia é para documentação e não faz parte da arte entregue.* ## Leve a regra em um SVG com margens O [viewBox SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox) 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. ```xml ``` 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. > **A tela vazia ainda exige verificar o posicionamento** > > Um SVG com margens reserva espaço dentro do viewport. Ele não impede que outro objeto do layout se sobreponha a esse viewport nem garante que um importador preserve seus limites. Confira o posicionamento real segundo a regra escrita. ## 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. | O que você especifica | Largura do viewport com margens | Largura da arte visível | Margem lateral | | -------------------------- | ------------------------------- | ----------------------- | ---------------- | | Exemplo base | 170 px | 150 px | 10 px | | Dobro do exemplo | 340 px | 300 px | 20 px | | Arquivo inteiro com 300 px | 300 px | Cerca de 264,7 px | Cerca de 17,6 px | 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](https://perfectvector.com/pt-BR/blog/svg-preserveaspectratio) 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](https://perfectvector.com/pt-BR/vectorize-logo) 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](https://perfectvector.com/pt-BR/blog/logo-file-formats) ajuda a escolher os arquivos para entregar, e o [guia de como vetorizar um logo](https://perfectvector.com/pt-BR/blog/how-to-vectorize-a-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](https://perfectvector.com/pt-BR/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](https://www.buffalo.edu/brand/identity/usage/Clear-space.html) — 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](https://brand.vevo.com/logo/clearspace/) — Mostra como as orientações podem mudar com o tamanho da marca e o contexto digital. 3. [MDN — SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://perfectvector.com/pt-BR/vectorize-logo). 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. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/logo-clear-space-calculation) - [Centralize o logo opticamente e preserve o master](https://perfectvector.com/pt-BR/blog/logo-optical-centering.md) - [Arte para etiqueta tecida: logo claro em tamanho pequeno](https://perfectvector.com/pt-BR/blog/woven-label-logo-artwork.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)