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 it has become clear that there are a few challenges when it comes to generating a widely-usable BIMI logo. This post will answer the biggest questions.
Excitement for BIMI is accelerating. Currently, Yahoo is running a trial program, and other mail systems — including Gmail — have announced their intention to do their own pilots of BIMI in 2020. Adopting BIMI provides a meaningful impact for emailing brands, from increased deliverability and open rates to brand protection.
Today, the requirements to implement BIMI include:
- Reaching DMARC enforcement with a policy of either “p=quarantine” or “p=reject” on your organizational domain, without gaps such as sp=none or pct<100
- Publishing a BIMI record for your domain in DNS
- Providing a BIMI-appropriate logo
Formatting of the logo can prove to be a tricky step. It’s not difficult to create an appropriate logo. But when inspecting handfuls of SVG images, we found that there are a few areas where brands may run into technical challenges. We will cover these in the troubleshooting area of this post.
Please note, the BIMI Working Group is the authority on defining the specifications for BIMI SVG logos. The below guidance may be subject to updates/change.
SVG for BIMI requirements
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.
Current BIMI logo requirements state that a logo should be:
- Square
- SVG Tiny 1.2 format
- Published via HTTPS
Note that these requirements may change as the standard develops. At this time, the software you use for publishing SVG Tiny 1.2 might include some attributes (like href and script) tags that you will need to remove manually.
There are many applications available to create and export SVG logos (you’ll find a list of these below). We will walk you through the process using one of the most popular applications available today, Adobe Illustrator.
Exporting to SVG 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’
After saving your file, try inspecting the image’s code. You can do this by opening your image in a browser.
- Right click your logo file, select “Open with,” then select your browser.
- When the image is visible, right click your logo and select “View page source.” It should look similar to the example below:
You can see that your image format is correct if the beginning of line 3 reads: “<svg version=”1.2” …”
For more information about saving your artwork in Adobe and other helpful SVG guidance, visit: https://helpx.adobe.com/illustrator/using/saving-artwork.html#save_in_svg_format
Note: Successful logos should have smaller file sizes. In the above logo example, the file size is roughly 1KB. If your file is hundreds of KB or more, it could be because it contains a bitmapped image or other unnecessary data. For more information on these problems, see some tips for troubleshooting below.
Troubleshooting SVG for BIMI Issues
Bitmap image embedded in the SVG file
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.
Additional resources on SVG and BIMI
For additional information on SVG 1.2 files, visit the W3C working draft on SVG 1.1/1.2/2.0 requirements.
To stay up to date on BIMI developments, visit the AuthIndicators Working Group website, bimigroup.org.
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)
The post How to create a BIMI-compatible logo using SVG images appeared first on Valimail.
*** This is a Security Bloggers Network syndicated blog from Valimail authored by Madeline McCaffrey. Read the original post at: https://www.valimail.com/blog/bimi-compatible-logos/
