From Illustrator to Inbox: Perfecting Your BIMI Logo SVG


If you're working on implementing a BIMI (Brand Indicators for Message Identification) logo for your email domain, congratulations! BIMI is an excellent way to boost your brand visibility, increase trust with email recipients and increase engagement. But creating a compliant SVG logo for BIMI can be tricky, as it requires adhering to strict formatting and technical specifications.

BIMI Logo Technical Requirements

BIMI logo files are tricky to format correctly, because while they use SVG (Scalable Vector Graphic) format, they support only a subset of the SVG spec. For more details, see this page from the Authindicators Working Group, but the quick hits are:
  • The logo must be in "SVG Tiny 1.2" aka "tiny-ps" format.
  • No bitmaps -- everything has to be vector shapes. This is a common point of confusion, because the broader SVG spec allows for embedded bitmaps.
  • Gradients, patterns, and transparencies are disallowed. This is a tough one, because designers love all of these. Fake it when you can, but note the size limitation in the next bullet point.
  • SVG file size must be 32k or smaller.
  • A title tag is required (this is usually set to the company name), and a description tag is recommended.
  • CSS "style" tags in the header are not allowed. Things like fill colors must be specified directly inline within your typical elements like path, polygon, rect, etc.
If you really want to geek out, here's the draft RFC with the format specification.

An SVG graphics file is just a text file, meaning that you can open it up in your favorite text editor and you can actually sort of read it and see what's happening. (I lately have just been manually doing a "search and replace" in the text editor to convert embedded head styling to inline style fills.) While I don't expect you to become an SVG super hacker, it can come in handy to at least take a glimpse at how these things are put together.

BIMI Logo Conversion & Testing Tools and Guide

Assuming you've got no plans to manually edit, convert or correct SVG image files (no super hacker badge for you!), here are some tools that can help you with the job of formatting your BIMI logo SVG file properly (and allow you to confirm that you've got it right):
  • SVG Conversion Tools from the Authindicators Working Group. I use the MacOS version of this SVG converter quite regularly. One thing to watch out for is that it can fumble conversion of style references to inline fills. Occasionally a logo will end up 100% black, instead of the original colors. Be sure to view the logo after converting, and visually inspect that it looks the way you expect.
  • EPS to SVG Converter from Cloud Convert. I'm using an older version of Adobe Illustrator, and this tool allows me to take my logo from Illustrator, exported as EPS, and convert it into SVG format. (I then take the second step of converting it to tiny-ps format using the SVG conversion tool noted above.)
  • Mailhardener BIMI Validator. This free online tool is a comprehensive solution for validating your BIMI logo. It checks your SVG file against the BIMI specification and provides detailed feedback on any errors or warnings, covering syntax validation and logo format best practice issues (valid metadata, file size, aspect ratio, etc.).
  • DigiCert VMC Logo Format Validator. I like fun, nerdy tools and this is a good one. It is an API endpoint that allows you to ask certificate provider DigiCert to confirm that your BIMI logo SVG file is compatible with the requirements necessary when obtaining a Verified Mark Certificate (VMC). Don't be afraid to open the Terminal app on your mac and fire this one up.
  • A guide on How to create a BIMI-compatible logo using SVG images from Valimail.
Getting your BIMI logo whipped into shape can feel like a daunting task, but these tools make it manageable -- it's easy to get your logo converted into the right format, and validate that you've done so correctly. They'll allow you to confidently create an SVG file that's both compliant and optimized for BIMI.

Ready to take the next step? Give these tools a try, and ensure your brand logo stands out in (almost) every inbox!

(Thanks to Ryan Wall and Jennifer Nespola Lantz for tips and inspiration for this guide!)
Post a Comment

Comments