Área de protección del logo: calcula y conserva el margen

Calcula el área de protección del logo a partir de una unidad definida en el diseño aprobado y mide hacia afuera desde los límites visibles del logo completo. Si la unidad elegida es 10 y el logo mide 150 por 40, una zona de exclusión de una unidad a cada lado ocupa 170 por 60. El logo en sí sigue midiendo 150 por 40.

El área de protección es el espacio que otros contenidos deben dejar vacío alrededor de un logo. Los márgenes del archivo pueden ayudar a llevar ese espacio a una composición, pero el lienzo vacío es solo una forma de entrega. La guía de marca define la regla. Si preparas recursos de una marca existente, aplica su regla aprobada antes de crear una nueva.

Esta guía sigue una composición original a través del cálculo, la exportación SVG y el cambio de tamaño. Si solo tienes una imagen rasterizada, recupera primero las formas visibles: un vectorizador de imágenes no puede deducir la zona de exclusión aprobada.

Elige una unidad que pertenezca a este logo

Usa un elemento medible que mantenga su proporción al escalar el logo aprobado: la altura de un símbolo, una dimensión de una letra concreta o una fracción especificada de toda la imagen. Indica exactamente qué mediste. Evita reglas como «deja algo de espacio» o un cuadrado marcado con X sin explicación.

Las guías oficiales muestran por qué se trata de una política de diseño y no de una proporción universal. La guía del área de protección de la Universidad de Buffalo usa la altura de las letras UB entrelazadas alrededor de la composición principal de marca, con indicaciones aparte para los trazos. La guía de Vevo distingue los logos de más y menos de 30 px de alto y establece espacios según el contexto web o tablet. Sigue la regla del logo y la aplicación reales.

En nuestro ejemplo original, el símbolo circular mide 40 unidades de alto. Elegimos X como un cuarto de esa altura: X = 10. El margen requerido es una X a cada lado. Es una regla inventada para este ejemplo, no una recomendación para que todas las marcas usen el 25% de la altura de su símbolo.

Escribe la regla con palabras claras: «Para esta composición horizontal, X equivale a un cuarto del diámetro del círculo. Deja al menos una X fuera de cada borde de la composición completa». El texto transmite la política incluso si una aplicación recorta el lienzo vacío.

Mide la composición completa y agrega el margen

Una composición de logo es la disposición aprobada del símbolo y el nombre gráfico usados juntos. Mide toda esa disposición. Usar solo los límites del círculo dejaría las letras fuera del cálculo de la zona de exclusión.

Nuestro círculo y las tres letras dibujadas abarcan de x = 0 a 150 y de y = 0 a 40. En este ejemplo no hay trazos, sombras ni objetos ocultos. Por lo tanto, el rectángulo de exclusión va de x = -10 a 160 y 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

Si tu diseño tiene trazos o efectos visibles, incluye su extensión visible en la revisión. Una medición de la geometría sola puede diferir del resultado pintado. La guía del cuadro delimitador SVG explica esa distinción; aquí usamos deliberadamente geometría con relleno simple.

Lleva la regla en un SVG con márgenes

El viewBox de SVG mapea un rectángulo de coordenadas internas al área de visualización. En este ejemplo, viewBox="-10 -10 170 60" incluye el margen calculado sin mover ni ampliar el diseño.

Guarda este ejemplo completo como logo-padded.svg. Las letras del nombre gráfico son formas dibujadas, por lo que no depende de fuentes. El diseño de círculo y letras es una imagen original del ejemplo, no un recurso aprobado de otra 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 crear un recurso complementario ajustado, usa width="150", height="40" y viewBox="0 0 150 40" conservando el mismo círculo y los mismos trazados. Nombra los archivos para que quien los reciba pueda distinguir cuál incluye el margen. Mantén las guías de medición en el documento de marca o en una capa de revisión separada, no en la imagen que se colocará.

Cambia el tamaño sin reducir el logo previsto

Decide si una anchura se refiere al diseño visible o a todo el archivo con márgenes. Con un archivo de 170 px de ancho, la imagen del ejemplo mide 150 px y el margen es de 10 px. Con un archivo de 340 px, la imagen mide 300 px y el margen es de 20 px. La regla proporcional se conserva al cambiar el tamaño de manera uniforme.

Si el encargo pide un logo visible de 300 px, configura este archivo con márgenes a 340 px de ancho. Darle 300 px al archivo dejaría solo unos 264.7 px de imagen visible, porque 300 × 150 / 170 es aproximadamente 264.7.

Nota del método: renderizamos los SVG completos, tanto ajustado como con márgenes, en Chromium. Los límites geométricos de la imagen eran de 150 por 40 unidades. Con anchuras con márgenes de 170 px y 340 px, medimos anchuras horizontales de imagen de 150 px y 300 px, y márgenes de 10 px y 20 px. Esto verifica el ejemplo creado en el navegador; no demuestra el comportamiento de importación de todos los editores.

Cuando el logo parezca demasiado pequeño, revisa el lienzo del archivo antes de ampliar objetos al azar. Si el espacio desaparece al importar, inspecciona los límites importados en el destino y restaura el margen según la regla X escrita. Para un logo ancho en otro marco, usa el ajuste de proporción SVG para entender el espacio vacío adicional que introduce la colocación.

Dónde encaja PerfectVector en la entrega del logo

PerfectVector puede recuperar formas vectoriales cuando una marca solo tiene una copia rasterizada de su logo. Una vez que tengas esas formas, compara el logo completo con la referencia aprobada, elimina piezas de fondo involuntarias y aplica por separado la regla documentada del área de protección. El flujo de vectorización de logos aborda la recuperación de formas.

Pide primero el original vectorial y las guías de marca. Esos archivos conservan mejor el diseño y las decisiones de espaciado que un trazado nuevo. El borde vacío de un JPG puede ser un margen accidental de exportación; no demuestra una política de marca. La guía de formatos de archivos de logo ayuda a elegir qué entregar, y la guía para vectorizar un logo trata la preparación e inspección de la fuente.

Termina revisando el diseño completo, la definición escrita de X, las dimensiones del archivo con márgenes y la composición real que lo rodea. Conserva un original ajustado además del recurso previsto para colocar. Encontrarás más revisiones de entrega en la biblioteca de flujos del blog.

Preguntas frecuentes

¿El área de protección siempre es un cuarto de la altura del logo?

No. Un cuarto de la altura del círculo es la regla elegida para este ejemplo original. Las marcas existentes pueden definir otras unidades, proporciones y excepciones para aplicaciones concretas.

¿Debo agregar un rectángulo blanco para conservar el área de protección?

Puedes reservar espacio vacío con el viewBox de SVG sin agregar un rectángulo pintado. Un rectángulo blanco cambia la imagen sobre un fondo de color. Prueba el archivo transparente con márgenes en su colocación prevista.

¿Un SVG con márgenes aplica automáticamente la guía de marca?

No. Lleva espacio vacío dentro de su área de visualización, pero un importador puede recortar los límites y otros objetos pueden superponerse. La regla escrita y la revisión final de colocación siguen siendo necesarias.

Fuentes

1. Universidad de Buffalo — Área de protección — Ofrece un ejemplo oficial de una unidad basada en el logo y excepciones según la aplicación.
2. Vevo — Área de protección del logo — Muestra cómo las indicaciones pueden variar según el tamaño del logo y el contexto digital.
3. MDN — SVG viewBox — Explica el rectángulo de coordenadas usado para llevar el margen vacío del ejemplo.

Si falta el vector original, recupera tu logo rasterizado con PerfectVector. Compara la composición completa con la referencia, aplica su regla aprobada de protección y revisa el tamaño visible del logo en la colocación final.