How to Create BIMI SVG Logo?
BIMI Logo Requirements
To prepare for BIMI, DMARC enforcement, which comes with some restrictions, needs to be established. You will also need a BIMI logo in the correct format, as well as a Verified Mark Certificate (VMC) that verifies the logo as belonging to your company. If the logo does not meet the prerequisites, it may not be visible. Here are some of the requirements of a BIMI logo:
- The logo should be square so that proper fitting is ensured
- It must be in SVG Tiny Portable/Secure format
- It must have a solid background so that brand guidelines are not impacted by different display environments
- The BIMI logo must be published on a domain with a SSL Certificate (via HTTPS)
- The logo must be vector-based
- The SVG file should be compact and cannot exceed 32KB
Steps to Create a BIMI SVG Logo
The following steps guide you through the process of creating an SVG file that can be used for the BIMI record:
- Open your vector-based file in Adobe Illustrator.
- Click ‘File > Save As’, following which the ‘Save As’ dialog box appears.
- In the ‘Save As’ dialog box, provide the name for your file. From the ‘Format’ dropdown, select ‘SVG (svg)’, and then click ‘Save’. This will bring up another dialog box.
- In the dialog box, from the ‘SVG Profiles’ dropdown, select ‘SVG Tiny 1.2’, from the ‘Image Location’ dropdown, select ‘Preserve’, and click ‘OK’.
- Open the SVG file that you just created in a code/text editor. There are a number of free tools that you can use. Here are some suggestions:
Atom
CodePen (no sign up necessary)
Nano
Sublime Text
Vim
Visual Studio Code - In the code editor, make the following changes to the file:
6.1. If your image contains x/y attributes, remove them.
6.2. Change the base Profile from ‘tiny’ to ‘tiny-ps’.
6.3. Add a title. This must not be more than 64 characters.
6.4. Save the modified (SVG) file.
6.5. Upload the SVG file to the server for which the BIMI record is configured.
Troubleshooting the BIMI SVG File
1. Check for bitmap image embedded in the SVG file
Non-vector (bitmap) elements like scripting and external linking, and referencing according to the BIMI logo specifications are incompatible with the standard and will affect logo display. This can be difficult and sometimes impossible to see with naked eyes. To find out if a bitmap image has been added, check the SVG file.
To inspect your SVG file for bitmap images, follow these steps:
- Download your logo and inspect it by opening your image in a browser. To do this, right-click your logo > Open with > Select your browser.
- When the image is visible, right-click your logo > View page source.
- In the image code, search for ‘img/’. If the search returns a result it can be assumed that the SVG file contains a bitmap image and, hence, does not match the prerequisites of the BIMI logo.
Example: When the next line (file.Xlink:href=”data:img/png;base64) is found, the SVG file contains a reference to a PNG (Bitmap) making it incompatible.
Solution: Reach out to the designer of the logo to modify the file to make it a completely vector-based file.
2. Ensure that the file does not contain any unnecessary data or links
Even if the format of the file indicates that it is a ‘.svg’ file, it may still contain data or links that are not required, which could generate issues. Follow the same steps mentioned above to inspect your logo for unnecessary data. If you find any, delete it by editing your file using any text editor of your choice.
For more detailed information, read what is BIMI?
Follow these steps to create a BIMI record.