• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Red Sift Blog

Red Sift Blog
  • redsift.com
  • Featured
  • Who are we?
  • Get in touch
You are here: Home / BIMI / How to create a BIMI-supported SVG Logo file

How to create a BIMI-supported SVG Logo file

by Harry Stephens
November 11, 2021September 1, 2022Filed under:
  • BIMI

BIMI (Brand Indicators for Message Identification) is a standard that displays validated trademarked logos for all DMARC authenticated emails. Before the logo can be displayed in the inbox, it must meet a number of specific requirements.

BIMI only supports Scaleable Vector Graphic Tiny Portable/Secure 1.2 format (SVG Tiny-PS 1.2). This specific SVG format was chosen by the BIMI Working Group as it is highly secure and lesser prone to potential malware or tracking-related vulnerabilities. Compared with popular bitmap formats like GIF, JPG, and PNG, the vector graphics are made out of lines and curves that can be scaled infinitely without loss of detail. SVG is often smaller in file size, loads quicker, and adapts to responsive sizing.

How to prepare your SVG file ready for BIMI

Using the SVG editor of your choice (we’ve used Adobe Illustrator for demonstration purposes), you can prepare your SVG file for export by following these simple steps:

    1. Inspect the objects within the “Layers” panel to make sure there are no bitmaps, linked files, texts or groups.

2. If your logo is image-based (contains embedded JPG or PNG files), the best option is to ask the designer of the logo to modify the file so that it is a fully vector-based file. If not, you can use the Trace Image button to convert your image into a graphic.

3. SVG files should not contain text objects, which appear in the “Layers” panel as “Type”. To meet the requirements, select your text layer and select the “Create Outlines” option from the “Type” menu.

    4. Finally, you’ll need to ungroup all groups to make sure exporting the SVG is a smooth process. Select all objects from your “Layers” panel using Ctrl+A and select the “Ungroup” option in the “Object” menu. You may have to repeat this process until all groups in the document are ungrouped.

Top tips for a better displayed BIMI logo

  1. Images are best with a square aspect ratio (1:1).
  2. The image should be centered so that it displays optimally in a square, a rounded square, or a circle.
  3. Non-transparent backgrounds are best, as rendering of transparency can be unpredictable.

Exporting as a SVG Tiny-PS 1.2 file

Since a BIMI SVG logo must use square dimensions with a 1:1 aspect ratio, the height/width of the SVG image must be the same. To achieve this, you can “Edit Artboards” within Adobe Illustrator.

When you are ready to save your file, click ‘File > Save As’. This will bring up a dialog box, where you can name your file. Make sure the file format is set as SVG and not SVG compressed.

Once clicked, an SVG dialogue box will popup entitled “SVG Options”. In the “SVG Profiles” dropdown, select “SVG Tiny 1.2” and ensure the “Image Location” is set to “Preserve”. Finally, click on the “SVG Code” button to review the code, which opens up in a file editor. Make sure that the file contains version=”1.2” and baseProfile=” tiny”. There should be no base64, meaning Adobe Illustrator was able to create a vector-only version of your logo.

Editing the code within a Text Editor

Next, you’ll need to open your SVG file in a text editor (e.g., Notepad or Notepad++), or a code editor like Sublime Text, Visual Studio Code, or similar. Complete the following steps to clean up the code:

  1. First you need to find the baseProfile=”tiny” and replace it with baseProfile=”tiny-ps”.
  2. Next, find the x=”0px” y=”0px” from the line starting with <svg as seen on the image. The same element also often contains overflow=”visible” attribute that needs to be removed as it is not supported by BIMI SVG standard.
  3. Then, you need to add the required <title> tag into your SVG below the <svg …>. The purpose of the title is to provide accessibility so that it reflects your brand.
  4. Finally, Save the file.

Uploading your SVG logo to OnDMARC

OnDMARC and Entrust – your one-stop shop for implementing BIMI

We have partnered with Entrust, one of two Google-approved certification authorities, to provide the only integrated BIMI and VMC integration available on the market. This is a game-changer for users who now don’t have to navigate different platforms and providers to reach the right DMARC policy and apply for a Verified Mark Certificate in order to be BIMI-ready. By using OnDMARC, users are able to successfully take care of both these actions from a single pane of glass, with full support from industry specialists included. 

If you’re looking for a market-leading, integrated BIMI and VMC solution, with full support from DMARC implementation through to logo advice and submission, contact us to book a consultation today.

Get in touch

Additional resources

  • Learn more about what BIMI is, how it works and why it matters.
  • Check to see if your brand could display a BIMI logo using our free BIMI Checker tool.
  • Find out which companies have already implemented BIMI with our unique BIMI Radar tool.
  • Discover the 7 things you’ll wish you knew before implementing BIMI.
  • Find out more about our innovative partnership with Entrust, giving you a one-stop shop BIMI solution.
  • Use the BIMI Working Group’s SVG Conversion tools.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)

Related

Tagged:
  • BIMI
  • Email Marketing
  • logo visibility

Post navigation

Previous Post 8 reasons to add BIMI to your marketing budget
Next Post Award: Red Sift’s OnDMARC wins at the FinTech Ascension Awards 2021

Primary Sidebar

Subscribe to our blog and be the first to get updates!

Categories

  • AI
  • BEC
  • BIMI
  • Brand Protection
  • Coronavirus
  • Cybersecurity
  • Deliverability
  • DMARC
  • DORA
  • Email
  • Finance
  • Labs
  • News
  • OnINBOX
  • Partner Program
  • Red Sift Tools
  • Work at Red Sift
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • October 2016

Copyright © 2023 · Milan Pro on Genesis Framework · WordPress · Log in