How to create a BIMI-compatible logo using SVG images
Brand Indicators for Message Identification (BIMI) is an emerging standard that allows brands to display their logos alongside authenticated email messages. BIMI was designed to be easy, but due to logo security specifications, a few manual tweaks are required to create a widely-usable BIMI logo.
Eventually, the goal is to have a program that exports directly to a BIMI-compatible logo, but until such a tool is available, this post will guide you through the steps to create a proper image.
To get ready for BIMI, you’ll need to reach DMARC enforcement, with some specific conditions. Here’s some more information on the steps to get ready for BIMI.
You’ll also need a BIMI logo in the proper format, and for some implementations, you may also need a Verified Mark Certificate (VMC) that validates the logo as belonging to your organization.
Current BIMI logo requirements state that a logo should be:
- SVG Tiny Portable/Secure format
- Solid background
- Published via HTTPS
The AuthIndicators (BIMI working group) penned a specification for BIMI logos, called SVG Tiny Portable/Secure.
SVG stands for Scalable Vector Graphics, which is an image comprised of one or more shapes defined by points connected by lines and curves. This is different from bitmap or raster images (PNG, GIF, JPEG), which are made of many colored pixels. Unlike bitmaps, SVG files can scale to any size without losing resolution.
Currently, an export tool does not exist to create an SVG Tiny P/S image, so below you will find guidance to help you manually make these changes.
Factors to consider when formatting your logo:
- The image should be a square aspect ratio to ensure proper fitting
- Consider where your image will be displayed — inbox images may be hosted in circles, squares, and anything in between; for this reason, the image should be centered
- Use a solid background color to ensure brand guidelines are not impacted by different image display environments
- The SVG file should be compact and may not exceed 32KB
Instructions at a Glance
- Export an SVG Tiny 1.2 version of your logo (more information on that in the troubleshooting guide)
- Open the SVG Tiny 1.2 logo in your code editor of choice
- Make the following tweaks to the XML code:
- Change the baseProfile to “tiny-ps”
- Delete x/y attributes
- Add a title (this can be your company name)
Step-by-Step: Creating SVG Tiny Portable/Secure Images for BIMI
Step 1: Export to SVG Tiny 1.2 using Adobe Illustrator
- Open your file in Adobe Illustrator.
- Make sure your image is vector-based. Files ending in ‘.ai’, ‘.eps’, ‘.pdf’, ‘.svg’ indicate that it is likely a vector-based file.
- When you are ready to save your file, click ‘File > Save As…’
- This will bring up a dialog box. Name your file, and in the ‘Format’ dropdown, select ‘SVG (svg)’
- Click “Save.”
- This will bring up another dialog box. In the ‘SVG Profiles’ dropdown, select ‘SVG Tiny 1.2’
- In the ‘Image Location’ dropdown, select ‘Preserve’
- Click ‘Ok’
As you now know, the SVG Tiny P/S guidelines call for some manual tweaks to exported SVG Tiny 1.2 logos. After successfully exporting an SVG Tiny 1.2 logo, you can make your image compliant by using a code editor to adjust two lines of the XML code that makes up your logo.
Step 2: Open your SVG Tiny 1.2 logo in a code editor to update image to SVG Tiny Portable/Secure
There are a number of free tools; you will find a handful of recommendations below:
When opened in a code editor, the XML code will look similar to the following image:
Next, follow the below steps to make minor changes to the XML:
- If your image contains x/y attributes, remove them – (in this example, simply delete “x=:0px” y=”0px”)
- Change the baseProfile to “baseProfile=”tiny-ps” (write “-ps” following “tiny” within line 3).
- Add a <title> (This can be your company name; it must be no more than 64 characters). (Example: <title>Valimail</title>)
- After making these changes, save your image. Your image’s XML code will look similar to the following:
Troubleshooting SVG Tiny Exports for BIMI
Bitmap image embedded in the SVG file
While your BIMI logo’s final state should be SVG Tiny Portable/Secure, you’ll want to ensure the starting file (SVG Tiny 1.2) doesn’t contain any problematic elements. While SVG is, at its core, a mathematical way to describe an image, the standard supports broader use cases. As contradictory as it may sound, SVG even supports the inclusion of bitmap images inside an SVG file – and this may cause display issues.
According to the BIMI logo specifications, non-vector (bitmap) elements, scripting, and external linking and references are incompatible with the standard and will impact logo display. This can be difficult and sometimes impossible to see with the naked eye. Furthermore, it isn’t possible to convert a bitmap image to vector format by exporting it as a vector file, even though the file extension may indicate that it is vector-based (such files usually end in the suffix ‘ai’, ‘eps’, ‘pdf’, or ‘svg’).
To inspect your SVG file for bitmap images, follow these steps:
- Download your logo and inspect it by opening your image in a browser. You can do this by right clicking your logo > “Open with” > select your browser.
- When the image is visible, right click your logo > select “View page source”
- In the image code, search for “img/.” You’ll notice a PNG image is embedded in line 3 of the below example (where it says “data:img/png;base64”), thus making it incompatible with BIMI specifications:
Recommendation: If you detect a bitmap image in your SVG, you will need to upload a new, purely vector-based version of your logo, which will require you or your designer to edit the file in an illustration application. Here are some of the most popular apps to create and export vector files:
As a reminder, when you export your image, it is imperative that you save it in format “SVG tiny 1.2.”
External links/references and unnecessary data
While the format of some images may indicate that they are “.svg,” when exported, some files can contain extra, unnecessary data. As is true for most web files, the more compact/smaller the file, the better.
To inspect your logo for unnecessary data, follow the below steps:
- Download your logo and right click “View page source”
- The image code should contain the essential information instructing the points and curves (see the code snippet above for an example of a typical SVG logo).
- If your image contains hundreds of lines of scrolling code (usually a giant, nonsensical block of letters), your image contains unnecessary data. This will add unnecessary bulk to your image.
- If your image contains a reference or URL (which would look something like “xlink:href=”#” or “url(#”) you will need to delete these references and/or links in a code editor.
Recommendation: If you detect unnecessary data within your SVG, you can edit the file using a text editor. Here are some suggested applications to edit text within your SVG logo:
When inspecting the image, you will most likely be able to remove all data found within the <i:pgf>…</i:pgf> tags. The logo will not be impacted so long as the content housing instructions for the visible parts of the image (the points) are left intact. This article contains helpful information to help you clean up your image: https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually
If your image contains linked or referenced external data, you will need to remove these lines of code. Because these lines are not essential to your logo, it should appear unchanged after it’s edited and saved.
As a reminder, when you export your image, it is imperative that you save it in format “SVG tiny 1.2.” Depending on the application you are using, this may not be your default setting.
Ensuring your logo is properly formatted as “SVG Tiny 1.2” before you make the XML code edits is critical to creating a BIMI-compliant logo.
Additional resources on SVG and BIMI
- See our SVG FAQ to troubleshoot problems with SVG logos for BIMI
- To read the full BIMI SVG specification, see SVG Tiny Portable/Secure – IETF draft v00
- To stay up to date on BIMI developments, visit the AuthIndicators Working Group website, bimigroup.org. For more information about formatting an SVG Tiny P/S logo, visit the AuthIndicators blog post.
- For more information on using Adobe Illustrator, see: Adobe Illustrator User Guide: Save Artwork
- For details on cleaning up extraneous data in SVG files, see: Cleaning up SVG Files Manually (Wikimedia Commons User: Quibik)