How to Create an SVG Logo for BIMI
The Brand Indicators for Message Identification (BIMI) is a relatively new and rapidly evolving standard that allows brands to display their logos in customers' Inboxes. Why is it gaining hype? BIMI complements digital signatures such as SPF, DKIM, and DMARC, but there are several conditions to consider if you want to use BIMI.
To display the BIMI logo in Gmail, you need to:
1. Set up digital signatures.
2. Register the logo as a trademark.
3. Create the BIMI logo in SVG format and add it to the MX record.
Here we’ll consider exclusively the third point: how to create the BIMI logo in SVG format.
Creating Brand Logo SVG File
Logo requirements look like this:
The logo must be square with a 1:1 ratio. Since the logo in the mailbox can be placed in circles, squares, etc., the image should be centered.
The logo must be in SVG 1.2 Tiny format.
The file size must not exceed 32 KB.
The logo must not contain text.
Creating an SVG file in Adobe Illustrator
If the logo is created from an image, then you can select an element and click Image Trace in the Object tab to convert it to vector graphics. You can also use a logo generator to generate a vector logo for you.
If the quality of the image has suffered, then first undo the action (Edit tab → Undo Scale).
Next, in the Window tab, select the Image Trace item.
Here you will find settings to improve the quality of a vector element.
If the logo contains text, then it must be removed, as it isn’t supported by BIMI. Select the text layer and in the Type menu click Create Outlines. The text is now displayed as "Group".
Select all the objects and then go to Object → Ungroup. You should repeat this step until all items are ungrouped.
Exporting the SVG file
To conform to the BIMI specification, the logo must be square. Create a new 1:1 file in the current file with RGB color mode.
Copy all the elements of the original file and paste them into the new one.
Then click Save As..., and select the SVG format in the Save as type:.
Select SVG Tiny 1.2 in the SVG Profiles from the drop-down list.
Converting the file to SVG P/S
Check out converting SVG Tiny 1.2 file to SVG P/S format in source code. You can use the following tools:
- Standalone GUI Tool for Windows 10;
- Standalone GUI Tool for macOS;
- Sublime Text;
- Visual Studio Code;
- Adobe Illustrator – a tool for creating, converting, and saving SVG files.
The first two tools automatically convert files, while the rest is for manual editing.
If you created a file from scratch, then the easiest way to edit code is right there, in Adobe Illustrator, by clicking on the SVG Code button.
If you have only a ready-made SVG file, then it will be easier to install and use one of the other services. Let's consider an example to make the roadmap clear.
Converting a file in the Sublime Text editor
By clicking on the SVG file, it will open in Sublime Text. In the XML code, you need to:
Remove x/y attributes: clean out x=“0px” and y=“0px” in the code.
Change baseProfile=“tiny” to baseProfile=“tiny-ps” in line 3.
Remove all style tags and attributes.
The version attribute has a value “1.2”.
Add the line title. This can be your company name, with a maximum of 64 characters. For example, tag title Yourcompany /title.
Also, note that in the logo XML file
there should be no external links,
no animation or other interactive elements.
The result should be the following XML:
Placing the Logo in DNS
Now you can proceed to the final step: place the picture on your hosting. Go to the admin panel where you registered the domain, set up digital signatures, and add in the Value field:
v – protocol version,
l – path to your logo in SVG format.
Note that the DMARC policy must contain a rule with the value p=quarantine or p=reject to display the BIMI logo.
Send campaigns according to all the rules
How to Identify and Fix Errors
1. If you have already added the logo
To do this, enter your domain name in the search bar. Here you can check:
digital signature settings,
displaying the logo in light and dark mode,
availability of Verified Mark Certificate (VMC).
2. If you are just planning to add a BIMI logo
You can pre-generate BIMI on bimigroup.org/bimi-generator/:
Click on the Generate BIMI button.
In the block that opens, specify the domain name.
Download the generated SVG file.
Click on the Generate BIMI Record button.
If there are errors in the BIMI record, you’ll see the full list and hints on how to fix them.
If there are no errors and everything is done correctly, the following notification will be displayed: “BIMI record generated successfully!!!✔️”
3. If nothing helped
If you are sure that everything is configured correctly and your certificate is accepted, but the logo is still not displayed, contact Verizon Media support.
Ready! Now your subscribers will see your logo in their Inboxes in AOL, Verizon, Yahoo, and Gmail.