Skip to main content

Fix BIMI logo validation errors

Fix common errors in your BIMI logo file so that it passes validation.

Written by Gareth Burroughes

BIMI logos must be SVG files that follow a strict format called SVG Tiny Portable/Secure (SVG Tiny PS). If your logo doesn't follow it, BIMI validators show an error and mailbox providers don't display your logo.

Most errors are fixed in one go by the BIMI Group's SVG Assistant tool. Start there, then use the other sections in this article to fix anything that's left.

Before you start

  • You need your logo as an SVG file.

  • To edit the file, you need a code editor, for example Visual Studio Code or Notepad++, or a vector design tool, for example Adobe Illustrator or Inkscape.

  • To check your logo, use a BIMI validator such as the BIMI Group's BIMI inspector.

  • For the full list of requirements, see Create and publish your BIMI logo.

Fix most errors with the BIMI SVG Assistant

The BIMI SVG Assistant removes unnecessary code from your file and converts it to SVG Tiny PS. This fixes most errors about the title, version, profile and metadata.

  1. Open your SVG file in a code editor.

  2. Copy all of the code.

  3. Go to the BIMI SVG Assistant tool.

  4. In Title, enter your company name.

  5. Paste your code into Input SVG.

  6. Select Validate and Normalize.

  7. Copy the code from Output SVG.

  8. In your code editor, replace all of your code with the code you copied, then save the file.

  9. Check your logo with a BIMI validator again.

The BIMI SVG Assistant doesn't change the shape of your logo or add a background. If your validator still shows an error about the size or background, follow the steps in the sections Make your logo square or Add a solid background.

Fix your file in a code editor

If you want to fix your file by hand, or the BIMI SVG Assistant doesn't fix an error, open your SVG file in a code editor.

Most of these fixes are in the opening <svg> tag, which is usually on the first line or two of the file. A correct opening tag looks like this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny-ps" viewBox="0 0 512 512"> <title>Your company name</title>

If you use a design tool such as Adobe Illustrator, exporting as SVG Tiny 1.2 gets you close, but you still need to fix the baseProfile attribute and remove the x and y attributes. Each time you export the file from your design tool, run it through the BIMI SVG Assistant or check these fixes again.

The title is missing

You might see: No <title> element found

Add a <title> element with your company name directly after the opening <svg> tag.

For example:

<title>Dotdigital</title>

The SVG version is wrong

You might see: version="1.1" found - must be "1.2"

In the opening <svg> tag, change the version attribute to version="1.2". If there's no version attribute, add it.

The base profile is missing or wrong

You might see: No baseProfile attribute - must declare baseProfile="tiny-ps"

In the opening <svg> tag, change the baseProfile attribute to baseProfile="tiny-ps". If there's no baseProfile attribute, add it.

The svg tag has x or y attributes

SVG Tiny PS doesn't allow x or y attributes on the opening <svg> tag. Delete them, for example x="0px" and y="0px".

The file has unnecessary code or is too large

You might see: SVG should be clean and minimal with no unnecessary metadata

Your logo file must be 32 KB or smaller. Design tools often add metadata, comments and editor-specific code that BIMI doesn't allow and that make the file bigger.

To remove it, run your file through the BIMI SVG Assistant. Learn how in the section Fix most errors with the BIMI SVG Assistant.

If your file is still too large, simplify the design. For example, reduce the number of shapes or points, or remove details that aren't visible at small sizes.

BIMI files also can't include:

  • Scripts, animation or interactive elements

  • Embedded images, such as PNG or JPG files

  • Links or references to external files

Make your logo square

You might see: Must have a valid viewBox with equal width and height

Your logo must be square. Mailbox providers show it in a circle or a square with rounded corners, so keep the logo in the centre with some space around the edges.

The viewBox attribute in the opening <svg> tag sets the size of the canvas. It has four values:

viewBox="min-x min-y width height"

To make the canvas square without moving your logo off centre:

  1. Find the larger of the last two values, width and height. This is the new size of your canvas.

  2. Change the smaller value to match it.

  3. Work out how much space you've added: subtract the old value from the new one, then halve it.

  4. Subtract that number from min-y if you changed the height, or from min-x if you changed the width.

  5. If the opening <svg> tag has width and height attributes, set them both to the new size, or delete them.

For example, a logo that's 1427 wide and 455 tall:

  • Before: viewBox="0 0 1427 455"

  • Add 972 to the height, which is 1427 − 455. Half of that is 486.

  • After: viewBox="0 -486 1427 1427"

If you use a design tool, change the canvas or artboard to a square, for example 1427 × 1427, then centre your logo on it. Make sure the option to keep the aspect ratio is turned off, or the tool resizes your logo as well.

Add a solid background

You might see: Background should be solid (transparency may cause issues)

Your logo must have a solid background colour. Transparent backgrounds might not display as expected.

To add a background in a code editor:

  1. Put all of the elements that make up your logo inside one group, using a single <g> tag.

  2. Directly after the <title> element, and before the group, add a <rect> element.

  3. Set the x, y, width and height attributes of the <rect> to match the four values in your viewBox, in that order.

  4. Set the fill attribute to the hex code of your background colour.

For example, with viewBox="0 -486 1427 1427":

<title>Dotdigital</title> <rect x="0" y="-486" width="1427" height="1427" fill="#FFFFFF"/> <g>   <!-- all of your logo's shapes --> </g>

The background must come first in the code so that it's drawn behind your logo. Validators only recognise it as the background if everything else is inside one group.

If you use a design tool, draw a rectangle the same size as your canvas, align it to the centre, and move it to the bottom layer. Put all of your other layers in one group above it.

Choose a background colour that contrasts with your logo, so that it stands out.

Avoid gradients

You might see: Should use simple gradients only (no complex gradients)

Flat colours display most reliably. If your logo uses gradients, replace them with solid colours where you can. If you need a gradient, keep it simple, going from one colour to one other colour.

Related Articles
Did this answer your question?