Categories
BIMI

How to Create a BIMI-Compatible Logo Using SVG Images

Creating a properly sized and formatted BIMI logo is easier said than done. Struggling? You’re not the only one. Read this quick-and-easy how-to article.

How to create a BIMI logo using SVG images

Brand Indicators for Message Identification (BIMI) is an emerging email specification that enables the use of brand-controlled logos within supporting email clients. The BIMI specification is being developed by the AuthIndicators Working Group, an email industry organization that Valimail is a proud member of. 

BIMI was designed to be easy, but logo security specifications require a few manual tweaks to create a widely-usable BIMI logo. 

This post will guide you through the steps to create a proper image.

BIMI requirements

To get ready for BIMI, you’ll have to reach a few basic requirements. These requirements include:

  • Your sending domain (the domain in the visible From header of your emails) and your organizational domain (if different) must be at DMARC enforcement.
  • You must have a logo in the proper SVG Tiny Portable/Secure format
  •  Some mailbox providers that support BIMI, including Gmail and Apple, currently require a Verified Mark Certificate (VMC) as proof that your BIMI logo is yours to use.

Let’s look at each of these requirements in more depth.

DMARC requirements

To use BIMI, you must achieve a DMARC policy of p=reject or p=quarantine. Here at Valimail, we call that DMARC enforcement. You’ll need this DMARC enforcement for both the organizational and sending domains. However, you’ll only need DMARC enforcement for your organizational domain if it’s different than your sending domain. 

For example, if a company wanted to use BIMI with mail, it sends its customers from the domain “marketing.company.com.” Both “marketing.company.com” and “company.com” (the organizational domain) must be at DMARC enforcement.

Getting to DMARC enforcement, especially for the organizational domain, can be challenging, but Valimail can make it much easier. But BIMI is a reward for the companies who have done the hard work for their domains. Now, your brand can put its logo in front of every email you send customers.

SVG tiny P/S format requirements

Scalable Vector Graphics (SVG) is a graphical image format defined by the World Wide Web Consortium (W3C). SVG image files consist 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.

One particular profile of SVG is known as “SVG Tiny 1.2,” and the SVG Tiny P/S profile used in BIMI is a variant of that profile. The critical differences between SVG Tiny 1.2 and SVG Tiny P/S are these:

  • The “baseProfile” attribute must be “tiny-ps”
  •  A “<title>” element must be included
  •  External links or references are not allowed
  •  Scripts, animations, or other interactive elements are forbidden
  •  “x=” and “y=” attributes must not appear within the “<svg>” root element

Verified mark certificate (VMC) requirements

The BIMI specifies a DNS record that a domain must publish when it wants to participate in BIMI, and this record includes two key-value pairs:

  • The “l=” tag, the value for which is a URL (HTTPS) for the BIMI logo file
  •  The “a=”, the value for which is a URL (HTTPS) for what’s referred to as a “BIMI Evidence Document,” which is a digital certificate that attests that a third party has validated the use of the logo by this domain.

The most common form of these BIMI Evidence Documents is a VMC, and while not all mailbox providers that display BIMI logos require a corresponding VMC, both Gmail and Apple do. Given the footprint of both mailbox providers, this makes VMCs a requirement for any domain that wants full exposure to its BIMI logo.

Step-by-Step: Creating SVG Tiny Portable/Secure Images for BIMI

While this isn’t intended to be a step-by-step guide for creating a logo file for use with BIMI, we will cover the basics here. We recommend consulting the links on the AuthIndicators Working Group website for more details.

1. Pick an existing logo

We assume your organization already has a logo it regularly uses. To use this logo, it must be trademarked, but these requirements may loosen over time. Valimail and the vendor you choose to issue your VMC can help you navigate this part of the journey.

In addition, the logo you choose should meet the following criteria:

  • Square aspect ratio
  • Centered logo
  • Solid color background
  • SVG file shouldn’t be larger than 32 kilobytes

Once you have a logo source file, move on to creating an SVG Tiny P/S version of it.

2. Export to SVG Tiny 1.2 using Adobe Illustrator

  1. Open your file in Adobe Illustrator.
  2. Make sure your image is vector-based. Files ending in “.ai”, “.eps”, “.pdf”, or “.svg” indicate that it is likely a vector-based file.
  3. When you are ready to save your file, click “File > Save As.”
  4. This will bring up a dialog box. Name your file, and in the “Format” dropdown, select “SVG (svg).”
  5. Click “Save.”
  6. This will bring up another dialog box. In the “SVG Profiles” dropdown, select “SVG Tiny 1.2.”
  7.  In the “Image Location” dropdown, select “Preserve.”
  8.  Click “Ok.”

The SVG Tiny P/S guidelines require 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 text editor to adjust two lines of the XML code that makes up your logo.

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 want to use a text editor to make these tweaks by hand, see Step 2.

3. Open your SVG Tiny 1.2 logo in a text editor to update image to SVG Tiny Portable/Secure

There are several free tools to take care of this for you:

4. Make minor changes to the XML

  1. If your image contains x/y attributes, remove them – (in this example, delete “x=:0px” y=” 0px”).
  2.  Change the baseProfile to “baseProfile=” tiny-ps” (write “-ps” following “tiny” within line 3).
  3.  Add a <title> (This can be your company name; it must be no more than 64 characters) (Example: <title>Valimail</title>).
  4.  Save your image.

TLDR: Creating a BIMI logo with an SVG image

  1. Export an SVG Tiny 1.2 version of your logo.
  2.  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.
  3.  If you are making the changes by hand: Open the SVG Tiny 1.2 logo in your text editor of choice and move to Step 4.
  4.  Make the following tweaks to the XML code: Change the baseProfile to “tiny-ps”.
  5.  Delete x/y attributes.
  6.  Add a title (this can be your company name).

Additional resources on SVG and BIMI

The AuthIndicators Working Group maintains several reference pages on its website for creating a proper logo file for use with BIMI:

Get started with BIMI

Still need some extra help? See our SVG troubleshooting guide to fix problems with SVG logos for BIMI, or read the full BIMI SVG specification. You could also check out the BIMI group’s article on creating BIMI SVG logo files.

Want to make it really easy? Check out Valimail Amplify. Amplify automates BIMI for your brand to fast-track your logos to all participating mailbox providers. 

Schedule a demo to see Amplify in action.