Ir al contenido principal

Logo BIMI: crear un SVG Tiny-PS conforme en 4 pasos

Por CaptainDNS
Publicado el 28 de febrero de 2026

Diagrama de conversión de un logo SVG estándar al perfil SVG Tiny-PS requerido por BIMI
TL;DR
  • BIMI impone el perfil SVG Tiny 1.2 PS (Portable/Secure): sin script, sin enlace externo, sin imagen incrustada
  • Un logo BIMI debe ser cuadrado, centrado, con un viewBox de 0 0 X X y el atributo baseProfile="tiny-ps"
  • Usa el convertidor SVG Tiny-PS de CaptainDNS para limpiar y validar automáticamente tu archivo

Tu dominio pasa DMARC, tu registro BIMI está publicado, pero tu logo sigue sin aparecer en Gmail o Yahoo Mail. El problema suele estar en el propio archivo SVG: BIMI no acepta cualquier SVG. Exige un perfil muy específico llamado SVG Tiny 1.2 PS (Portable/Secure).

Este perfil prohíbe todo lo que pueda suponer un riesgo de seguridad: scripts JavaScript, enlaces a recursos externos, fuentes web, animaciones. Un logo exportado desde Illustrator o Figma casi siempre contiene elementos prohibidos. Sin limpieza, el proveedor de correo simplemente ignora el archivo.

Esta guía te acompaña desde la preparación del archivo fuente hasta la validación final. Está dirigida a administradores de sistemas, equipos de email marketing y CTO de pymes que quieren implementar BIMI sin dedicarle tres días.

Qué es el formato SVG Tiny-PS

SVG Tiny 1.2 es un subconjunto del estándar SVG definido por el W3C, diseñado originalmente para dispositivos con recursos limitados (teléfonos, PDA). El perfil PS (Portable/Secure) añade restricciones de seguridad específicas para BIMI:

  • Sin script (<script> prohibido)
  • Sin enlace externo (<image>, <use xlink:href="http://..."> prohibidos)
  • Sin interactividad (<a>, eventos onclick prohibidos)
  • Sin animación (<animate>, <set> prohibidos)

La lógica es simple: un logo mostrado en una bandeja de entrada nunca debe ejecutar código ni cargar un recurso externo. Es una superficie de ataque que los proveedores de correo se niegan a abrir.

Diferencias con un SVG estándar

FuncionalidadSVG estándarSVG Tiny-PS
Scripts JavaScriptNo
Enlaces externos (<image>)No
AnimacionesNo
Filtros (<filter>)No
Gradientes lineales/radiales simples
Formas básicas (<rect>, <circle>, <path>)
Texto (<text>)
Grupos (<g>)
ClipPath

El formato permite los elementos visuales necesarios para un logo (formas, colores, texto). Bloquea todo lo que podría servir como vector de ataque.

Requisitos técnicos de un logo BIMI

Dimensiones y relación de aspecto

El logo BIMI debe ser cuadrado. No hay una dimensión impuesta en píxeles, pero el viewBox debe respetar una relación 1:1:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2"
     baseProfile="tiny-ps"
     viewBox="0 0 100 100">

La mayoría de implementaciones usan un viewBox de 0 0 100 100 o 0 0 512 512. Lo importante es que los dos últimos valores sean idénticos.

Atributos XML obligatorios

Se requieren cuatro atributos en el elemento <svg> raíz:

AtributoValor requeridoFunción
xmlnshttp://www.w3.org/2000/svgNamespace SVG
version1.2Versión SVG Tiny
baseProfiletiny-psPerfil de seguridad BIMI
viewBox0 0 X X (cuadrado)Dimensiones lógicas

La ausencia de baseProfile="tiny-ps" es el error más común. Sin este atributo, los proveedores rechazan el archivo aunque el contenido sea válido.

Elementos permitidos y prohibidos

Permitidos: <svg>, <g>, <defs>, <title>, <desc>, <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path>, <text>, <tspan>, <linearGradient>, <radialGradient>, <stop>, <solidColor>, <clipPath>, <use> (solo referencia local)

Prohibidos: <script>, <image>, <foreignObject>, <a>, <animate>, <animateTransform>, <animateColor>, <set>, <filter>, <feGaussianBlur>, <pattern>, <mask>, <symbol>, <marker>, <switch>, <cursor>

Requisitos del formato SVG Tiny-PS para un logo BIMI

Crear un logo BIMI en 4 pasos

Paso 1: preparar el archivo fuente

Parte de un logo vectorial limpio. No importa la herramienta (Illustrator, Inkscape, Figma, Affinity Designer), el objetivo es obtener un SVG con:

  • Una mesa de trabajo cuadrada (512x512 px o 100x100)
  • El logo centrado en el marco
  • Sin zona transparente crítica (el logo se mostrará sobre un fondo variable según el cliente de correo)
  • Formas aplanadas: convierte los textos en trazados (<path>) si la fuente no es estándar

Consejo: exporta en "SVG estándar" desde tu herramienta. No intentes exportar directamente en Tiny-PS, ya que ninguna herramienta de diseño soporta este perfil de forma nativa.

Paso 2: limpiar el SVG

Un SVG exportado desde una herramienta de diseño casi siempre contiene elementos superfluos:

  • Metadatos del editor: comentarios de Illustrator, etiquetas <metadata>, namespace xmlns:inkscape
  • Estilos CSS: bloques <style> con clases
  • Atributos innecesarios: id, data-name, xml:space
  • Elementos invisibles: grupos vacíos, máscaras no utilizadas

Ejemplo de SVG bruto exportado desde Illustrator:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0 -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 512 512">
  <defs>
    <style>.cls-1{fill:#0EA5E9;}</style>
  </defs>
  <metadata><!-- ... --></metadata>
  <g id="Layer_1" data-name="Layer 1">
    <circle class="cls-1" cx="256" cy="256" r="200"/>
  </g>
</svg>

Este archivo no pasará la validación BIMI: faltan version, baseProfile, y contiene un bloque <style> y <metadata>.

Paso 3: convertir con el convertidor CaptainDNS

En lugar de limpiar manualmente (riesgo de olvido), usa un convertidor automático. El convertidor SVG Tiny-PS de CaptainDNS:

  1. Añade los atributos faltantes (version="1.2", baseProfile="tiny-ps")
  2. Elimina los elementos prohibidos (scripts, animaciones, imágenes externas)
  3. Convierte los estilos CSS inline en atributos SVG
  4. Limpia los metadatos, comentarios y namespaces superfluos
  5. Normaliza el viewBox en relación cuadrada

Pega tu SVG o sube el archivo, y recupera el resultado conforme.

Paso 4: validar el resultado

Después de la conversión, verifica que el archivo contenga:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2"
     baseProfile="tiny-ps"
     viewBox="0 0 512 512">
  <title>Logo captaindns.com</title>
  <circle cx="256" cy="256" r="200" fill="#0EA5E9"/>
</svg>

Puntos de control:

  • version="1.2" está presente
  • baseProfile="tiny-ps" está presente
  • viewBox es cuadrado
  • No hay <script>, <image>, <animate> o <style> residual
  • El elemento <title> es recomendado (accesibilidad)

Después prueba tu logo con la herramienta de verificación BIMI de CaptainDNS para confirmar que es recuperable en producción.

Pipeline de conversión de un logo SVG a SVG Tiny-PS conforme con BIMI

Errores frecuentes y cómo corregirlos

Bloque <style> en el archivo

Síntoma: el validador indica "CSS styles not allowed".

Causa: Illustrator y Figma exportan los colores como clases CSS.

Solución: convertir las clases en atributos fill y stroke directamente en cada elemento. El convertidor CaptainDNS realiza esta transformación automáticamente.

baseProfile ausente o incorrecto

Síntoma: el archivo es rechazado a pesar de tener un contenido válido.

Causa: el atributo baseProfile="tiny-ps" falta en el elemento <svg> raíz. Es el error más frecuente porque ningún editor gráfico lo añade.

Solución: añadir baseProfile="tiny-ps" y version="1.2" en la etiqueta <svg>.

Imágenes incrustadas en base64

Síntoma: el validador indica "image element not allowed".

Causa: un elemento <image> con un href="data:image/png;base64,..." está presente. Algunas herramientas integran bitmaps en el SVG.

Solución: recrear el elemento en puro vectorial (<path>, <circle>, etc.) o eliminarlo.

viewBox no cuadrado

Síntoma: el logo aparece deformado o no se muestra.

Causa: un viewBox="0 0 800 400" produce una relación 2:1, no 1:1.

Solución: recortar el logo en un marco cuadrado y ajustar el viewBox en consecuencia.

Elementos <filter> o <mask>

Síntoma: el validador indica "filter/mask element not allowed".

Causa: hay efectos como sombras paralelas, desenfoques gaussianos o máscaras de recorte avanzadas.

Solución: eliminar estos efectos y recrear la apariencia con formas simples si es necesario.

🎯 Plan de acción recomendado

  1. Verificar tu política DMARC: debe ser p=quarantine o p=reject con pct=100. Sin un DMARC válido, BIMI no funcionará.
  2. Exportar tu logo en SVG desde tu herramienta de diseño con una mesa de trabajo cuadrada
  3. Convertir el SVG con el convertidor SVG Tiny-PS de CaptainDNS para obtener un archivo conforme
  4. Alojar el archivo en HTTPS en una URL accesible públicamente (ejemplo: https://captaindns.com/bimi/logo.svg)
  5. Publicar el registro DNS BIMI: default._bimi.captaindns.com TXT "v=BIMI1; l=https://captaindns.com/bimi/logo.svg;"

FAQ

Cómo crear un logo BIMI conforme SVG Tiny-PS

Exporta tu logo en SVG desde una herramienta vectorial (Illustrator, Figma, Inkscape) con una mesa de trabajo cuadrada. Pasa el archivo por un convertidor SVG Tiny-PS para añadir los atributos obligatorios (version="1.2", baseProfile="tiny-ps") y eliminar los elementos prohibidos (scripts, animaciones, imágenes externas).

Cuáles son los requisitos técnicos del formato SVG Tiny-PS

El archivo debe contener version="1.2" y baseProfile="tiny-ps" en la etiqueta raíz, un viewBox cuadrado, y ningún elemento prohibido: sin &lt;script>, &lt;image>, &lt;animate>, &lt;filter>, &lt;style>, &lt;a> ni &lt;foreignObject>. Las formas básicas, gradientes simples y texto están permitidos.

Qué tamaño debe tener un logo BIMI

No hay un tamaño mínimo impuesto en píxeles. El viewBox debe ser cuadrado (relación 1:1). Los valores habituales son 0 0 100 100 o 0 0 512 512. Los proveedores de correo redimensionan el logo según sus propias restricciones de visualización.

Cómo convertir un SVG clásico en SVG Tiny-PS

Usa un convertidor dedicado que añada los atributos faltantes, elimine los elementos prohibidos, convierta los estilos CSS en atributos inline y limpie los metadatos. El convertidor CaptainDNS realiza todas estas operaciones en una sola pasada.

Es necesario un certificado VMC para mostrar un logo BIMI

Depende del proveedor. Gmail exige un VMC (Verified Mark Certificate) o un CMC (Common Mark Certificate). Yahoo Mail y Apple Mail pueden mostrar el logo sin certificado. Consulta nuestra guía VMC vs CMC para más detalles.

Cómo probar si mi logo BIMI es válido

Aloja el archivo SVG en HTTPS, publica tu registro DNS BIMI y luego usa una herramienta de verificación BIMI para comprobar que el archivo es accesible y conforme al perfil SVG Tiny-PS.

Qué elementos SVG están prohibidos en un logo BIMI

Los principales elementos prohibidos son: &lt;script>, &lt;image>, &lt;foreignObject>, &lt;a>, &lt;animate>, &lt;animateTransform>, &lt;set>, &lt;filter>, &lt;pattern>, &lt;mask>, &lt;symbol>, &lt;marker>, &lt;switch> y &lt;cursor>. Todo elemento que permita la ejecución de código, la carga de recursos externos o la interactividad está prohibido.

📖 Glosario

  • SVG Tiny 1.2 PS: perfil restringido del estándar SVG (W3C) diseñado para BIMI. El sufijo PS significa Portable/Secure y añade restricciones de seguridad más allá de SVG Tiny 1.2.
  • BIMI: Brand Indicators for Message Identification. Estándar que permite mostrar un logo de marca en los clientes de correo, condicionado a una autenticación de email estricta (DMARC).
  • VMC: Verified Mark Certificate. Certificado emitido por una autoridad (DigiCert, Entrust) que vincula un logo a una marca registrada. Requerido por Gmail para la insignia de verificación.
  • CMC: Common Mark Certificate. Alternativa al VMC que no requiere marca registrada. Aceptado por Gmail desde 2024.
  • DMARC: Domain-based Message Authentication, Reporting and Conformance. Política de autenticación de email que condiciona el funcionamiento de BIMI.

Convierte tu logo ahora: usa el convertidor SVG Tiny-PS de CaptainDNS para transformar tu archivo SVG en un logo BIMI conforme en pocos segundos.


📚 Guías BIMI relacionadas

  • SVG Tiny-PS: entender el perfil de seguridad BIMI (próximamente)
  • Configurar BIMI para una pyme: guía económica sin VMC (próximamente)

Fuentes

Artículos relacionados