Brand Indicators Message Identification - Creating a BIMI SVG Logo

This article contains information on BIMI logo requirements and steps to create a valid SVG file, including vector-based design, SVG Tiny 1.2 format, and troubleshooting for bitmap images or unnecessary code to ensure compliance with BIMI standards.

The BIMI logo must meet a number of requirements before it can be displayed in the inbox. If the logo does not meet the requirements, it may not be shown. The guide below describes the BIMI requirements and how to create a valid SVG file.

This is an info callout

The BIMI Working Group is the authority on defining the specifications. The requirements and ‘how-to’ below may be subject to updates/changes.

BIMI Logo requirements

1. Make sure the logo is vector-based. Files with the extension: PDF, Ai SVG, or EPS are often vector-based files. If in doubt, please contact the designer.
2. Format: SVG Tiny 1.2.
3. Logo dimensions: square.
4. The BIMI logo must be published on a domain with an SSL Certificate in place (https).

How to create a validated BIMI SVG File

Go through the steps below and create an SVG file that can be used for the BIMI record.

1. Open the vector-based file in Adobe Illustrator.

2. Save the file as (file > Save as…).

Choose SVG (not: svgz) | Avoid uppercase letters, spaces, underscores, or strange characters in the file name. Keep it simple. For example, brand-name-bimi.svg

3. Save the file with the following settings:

Settings: SVG Profiles: SVG Tiny 1.2 | Image location: Preserve.

4. Open the just-created SVG file in a code/text editor.

If no code editor is available, open the standard available software. For example: TextEdit (Mac) or Notepad (Windows)

5. On line 3: Change the base Profile from “tiny” to “tiny-ps”.

6. On line 3: Remove the x/y attributes.

If the SVG tag (<svg…) contains the x/y attributes (for example: x=”0” y=”0”), remove these attributes.

        

7. Add a title on line 4

After the <svg… and before the <g> tag) add <title></title>. Example: <title>Brand name</title> More than 65 characters are not allowed.

      

8. Save the modified (SVG) file: 

If the customized SVG file looks similar to this example. The file is ready.

 

9. Upload the SVG file to the server for which the BIMI record is also published.

Troubleshooting the BIMI SVG File

Determine if the BIMI logo contains bitmap images

To find out if a bitmap image has been added, check the SVG file. There are several ways to check the source code of an SVG file. Two are mentioned below:

1. Save/download the SVG File (option 1)

• • • • • Open the SVG file in TextEdit (Mac) or Notepad (Windows)

2. Open the SVG file in Google Chrome (option 2)

• • • • • View the source code (view > developer > source code)

3. After the source code is visible, search for: img/

If the search returns a result it can be assumed that the SVG file contains a bitmap image and therefore does not match the guidelines of the BIMI logo.

Example:

• When the next line (file.Xlink:href=”data:img/png;base64, i) is found, the SVG file contains a reference to a PNG (Bitmap).

Solution

• Ask the designer of the logo to modify the file so that it is a fully vector-based file.

Large SVG files without bitmap images

• It is possible that the SVG file was created in a different way and therefore contains more (unnecessary) code.

Solution

• In that case, open the SVG file in Adobe Illustrator and follow the steps mentioned above. This will create a well-encoded SVG file.

Resources

• The full BIMI SVG specification