May 21, 2020
How to create a BIMI-compatible logo using SVG images
*updated 11/3/20 to reflect the release of SVG conversion tools by the BIMI Working Group
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.
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.
BIMI-compatible logos can be created by making some tweaks to an SVG Tiny 1.2 logo — either manually or through conversion tools produced by the BIMI Working Group.
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)
- For the next step, you have two options:
- If you would like to use the BIMI Group tools to convert your SVG Tiny 1.2 image to SVG Tiny Portable/Secure: Visit the BIMI Group Conversion Tools page: https:/bimigroup.org/svg-conversion-tools-released/
- If you are making the changes by hand: Open the SVG Tiny 1.2 logo in your code editor of choice and move to Step 3
- 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.
*As previously mentioned, the BIMI Working Group released conversion tools to help you create an SVG Tiny P/S logo from your SVG Tiny 1.2 version. If you would like to use one of these tools, visit: https://bimigroup.org/svg-conversion-tools-released/
If you would like to make these tweaks by hand using a code editor, see Step 2.
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>)
4 After making these changes, save your image. Your image’s XML code will look similar to the following:
Additional resources on SVG and BIMI
- See our SVG troubleshooting guide to fix 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)