How To Create A BIMI SVG Logo

Create a BIMI logo that meets all requirements

The BIMI logo must meet a number of requirements before it can be displayed in the inbox. If the logo does not meet those requirements, it may not be shown. Read on and find out what the BIMI requirements are and how to create a valid SVG file.

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

BIMI Logo requirements

• 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.
• Format: SVG Tiny 1.2
• Logo dimensions: square
• The BIMI logo must be published on a domain with an SSL Certificate in place (https)

How to create a validated BIMI SVG file

• Open your file in Adobe Illustrator

  Start with a vector-based version of your logo.

• Save as SVG

  Go to File > Save As and select SVG (not SVGZ). Keep the filename simple — lowercase, no spaces, underscores, or special characters. For example: brand-name-bimi.svg

• Apply the correct export settings

  In the SVG export dialog, set SVG Profile to SVG Tiny 1.2 and Image Location to Preserve.

• Open the file in a text or code editor

  Any text editor works — TextEdit on Mac or Notepad on Windows if no code editor is available.

• Change the base profile

  On line 3, find baseProfile="tiny" and change it to baseProfile="tiny-ps".

• Remove x/y attributes

  On the same <svg tag, remove any x="0" and y="0" attributes if present.

• Add a title element

  After the <svg tag and before the <g> tag, add: <title>Brand name</title>. Keep the title under 65 characters. 

• Save the file

  Save the modified SVG. Your file is now ready to upload.

• Upload the SVG to your server

  Host the file on the same domain for which your BIMI DNS record is published.

Troubleshooting the BIMI SVG file

Find out 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:

• Save/download the SVG File (option 1) > Open the SVG file in TextEdit (Mac) or Notepad (Windows)
• Open the SVG file in Google Chrome (option 2) > View the source code (view > developer > source code) > 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.

Additional resources

• The full BIMI SVG specification
• More information about creating SVG files with Adobe Illustrator