Cómo Convertir una Imagen de Logo BIMI a SVG (Manual)

rgando el Logo BIMI para tu marca

BIMI tiene ciertas especificaciones al subir tu logo de marca:

• Una de estas especificaciones cruciales es que la imagen de tu logo debe estar en formato SVG. Scalable Vector Graphics o SVG es un formato popular que impulsa varios elementos de sitios web y aplicaciones modernos. A diferencia de los formatos de mapa de bits populares como GIF, JPG y PNG, los gráficos vectoriales están hechos de líneas y curvas que se pueden escalar fácilmente sin pérdida de detalle. SVG es comparativamente más ligero, carga rápidamente y se adapta fácilmente a tamaños responsivos.
• Para la implementación de BIMI, las dimensiones exactas del logo no importan, ya que al subirse en formato SVG es fácilmente escalable. Sin embargo, la imagen debe ser cuadrada y la relación de aspecto debe ser 1:1.
• El logo debe cumplir con el perfil SVG BIMI. Mientras que el estándar SVG es muy versátil y tiene una variedad de versiones para elegir, el ajuste más cercano a las especificaciones SVG BIMI es SVG 1.2 Tiny.

¿Cómo Preparar el Archivo SVG Correctamente?

La herramienta más comúnmente utilizada para exportar el SVG correcto es Adobe Illustrator.

Para preparar tu SVG correctamente, todo lo que necesitas hacer es:

• Abre el logo en Adobe Illustrator e inspecciona sus objetos para asegurarte de que no haya mapas de bits, archivos vinculados, textos o grupos. Asegúrate de que la Barra de Control esté activada en el Menú Ventana para inspeccionar el logo.
• En caso de que tu logo esté basado en una imagen, puedes usar el botón de Trazar Imagen para convertir tu imagen en un gráfico.
• SVG para BIMI no admite objetos de texto. En caso de que tu logo tenga algún texto, este aparece en la Barra de Control como “Type”. Para eliminar objetos de texto, selecciona tu capa de texto y selecciona la opción “Crear Contornos” del menú “Type”. La Barra de Control ya no identifica el objeto de texto como “Type” sino como un “Group”.
• Finalmente, necesitarías desagrupar todos los grupos para asegurarte de que la exportación del SVG sea un proceso sencillo. La forma más simple es presionar Ctrl+A para seleccionar todos los objetos y luego hacer clic en la opción “Desagrupar” en el menú “Object”. Puede que tengas que repetir este proceso hasta que todos los grupos en el documento estén desagrupados.

Exportando archivo SVG

• Para cumplir con las especificaciones SVG de BIMI, el logo debe tener dimensiones cuadradas. Para lograrlo, necesitas crear un nuevo archivo sin cerrar el actual. Asegúrate de que el nuevo archivo tenga dimensiones cuadradas con una relación de aspecto de 1:1, y que el modo de color seleccionado sea RGB y no CMYK.
• Navega al archivo original y presiona Ctrl+A para seleccionar todos los objetos. Copia todos los objetos del archivo original y pégalos en el nuevo archivo que creaste con dimensiones cuadradas.
• Haz clic en la opción “Guardar” en el menú Archivo para guardar el archivo. En la carpeta de destino, asegúrate de que el formato del archivo esté configurado como SVG y no SVG comprimido.
• Ten en cuenta que se abrirá un cuadro de diálogo SVG. Bajo “Perfiles SVG” en el cuadro, selecciona “SVG Tiny 1.2”. Bajo el botón “Más Opciones” ajusta los criterios de “Lugares Decimales” a 1, 2 o 3 para preservar los detalles, dependiendo de la complejidad de tu logo.

Limpieza de Código

• Puedes usar cualquier editor de texto para limpiar manualmente el código después de exportar tu archivo SVG.
• Puedes empezar eliminando la sección resaltada con la información sobre la versión de Adobe Illustrator utilizada.
• Luego, encuentra x=”0px” y y=”0px” en la línea que comienza con <svg como se ve en la imagen. El mismo elemento a menudo contiene el atributo overflow=”visible” que debe ser eliminado ya que no es compatible con el estándar SVG de BIMI.
• Luego necesitas encontrar baseProfile=”tiny” y reemplazarlo con baseProfile=”tiny-ps”.
• A continuación, necesitas agregar la etiqueta requerida <title> en tu SVG debajo de <svg…>. El propósito del título es proporcionar accesibilidad para que refleje tu marca.
• Finalmente, guarda el archivo y usa nuestro validador para asegurarte de que tu SVG se valide correctamente.