What is SVG Tiny 1.2 or SVG Tiny P/S format for BIMI?

BIMI requires logos in SVG Tiny 1.2 or SVG Tiny Portable/Secure (P/S) format. These are simplified profiles of the SVG specification designed for resource-constrained environments like mobile devices, ensuring smaller file sizes and reduced complexity. Most vector editing software allows you to select this specific profile during the export process.

Why can't I use a PNG or JPG embedded in my BIMI SVG?

BIMI strictly requires pure vector graphics. Embedding raster images (like PNG or JPG) within an SVG file makes it non-compliant because SVG's core benefit is scalability without loss of quality. A BIMI SVG logo must be composed entirely of vector paths, shapes, and colors.

What is the maximum file size for a BIMI SVG logo?

The maximum file size for a BIMI SVG logo is 32 kilobytes (KB). Some email clients or providers might even recommend or enforce a smaller limit, such as 16 KB. It is crucial to optimize your SVG file by removing any unnecessary data or elements to stay within this limit, as larger files may not display.

My BIMI SVG logo looks blurry, why is that?

A blurry SVG logo typically indicates that a raster image (e.g., a PNG or JPG) has been embedded within the SVG file. SVG files are vector-based and should remain sharp at any scale. To fix this, you must ensure your logo is a pure vector graphic, free of any embedded bitmaps, and exported correctly as SVG Tiny 1.2.

Why does my BIMI SVG need a solid background?

BIMI requires your logo to have a solid background color, not transparency. This ensures consistent rendering across different email clients and prevents issues where a logo might appear on a default white background or blend incorrectly with various inbox themes. You should add a solid color background layer to your SVG if it's currently transparent.

What are the recommended SVG dimensions for BIMI and how should I create the SVG? - Technical - Email deliverability - Knowledge base

Getting your brand's logo to display next to your sender name in email inboxes is a powerful way to build trust and brand recognition. This capability, enabled by Brand Indicators for Message Identification (BIMI), relies on a precisely crafted SVG file. However, questions often arise regarding the exact dimensions and specific creation methods for these SVG logos.

Unlike traditional raster image formats like JPGs or PNGs, Scalable Vector Graphics (SVG) are resolution-independent. This means an SVG logo can scale to any size without becoming blurry or pixelated. This inherent scalability often leads to confusion about specific pixel dimensions, as the emphasis shifts from fixed sizes to adherence to strict technical specifications that ensure proper rendering across various email clients.

The key to a successful BIMI logo isn't about setting arbitrary pixel dimensions, but rather ensuring the SVG file itself meets a precise set of criteria. These requirements govern everything from the SVG's version to its internal structure and content, all designed to maintain consistency and security within the email ecosystem. Understanding these nuances is vital for your logo to appear correctly, whether in a large inbox view or a small mobile notification.

Core BIMI SVG requirements

While SVGs are scalable, there are still important guidelines regarding the aspect ratio and overall characteristics of your BIMI logo. The BIMI Group, the standard body for BIMI, provides comprehensive guidelines for creating BIMI SVG logo files that ensure compatibility and optimal display.

The most critical dimension requirement is that your logo must be square, maintaining a 1:1 aspect ratio. Although there isn't a strict minimum or maximum pixel size, it's generally recommended that the original vector art is large enough to ensure high fidelity, such as 512x512 pixels or even 1024x1024 pixels. This practice helps to preserve detail and quality across various rendering environments. For specific mail clients, minimum sizes can vary, for example, Gmail requires a minimum of 96x96 pixels.

Another crucial aspect is the file size. Your BIMI SVG logo must not exceed 32 kilobytes. Some providers may even recommend a smaller size, such as 16 KB, for optimal performance. This constraint necessitates optimizing your SVG file, removing any unnecessary elements or metadata to keep it as lean as possible. The logo should also have a solid background color, as transparency is not supported, and be centered within the canvas.

Key technical requirements for BIMI SVG

Format: The SVG file must be in SVG Tiny 1.2 or SVG Tiny Portable/Secure (P/S) format.
Aspect Ratio: Your logo should be square (1:1 aspect ratio).
File Size: The SVG file must be 32 KB or smaller.
Content: No embedded raster images (like JPG or PNG), solid background, and no text in the logo itself.
Accessibility: Include <title> and <desc> elements for your logo.

Creating your BIMI SVG

Creating a BIMI-compliant SVG generally involves using a vector graphic editing software. Tools like Adobe Illustrator or Inkscape are commonly used for this purpose. The process usually starts with your brand's existing vector logo. If you only have a raster image (like a PNG or JPG), you'll need to vectorize it first, or ask your design team for the original vector file. Simply saving a raster image as an SVG will embed the bitmap, which is not permitted for BIMI.

When exporting from your chosen software, ensure you select the SVG Tiny 1.2 profile. After the initial export, you'll likely need to perform some manual edits to the SVG's XML code to make it fully BIMI compliant. These edits often involve setting the baseProfile to tiny-ps, adding <title> and <desc> elements, and ensuring the viewBox attribute is space-delimited, not comma-delimited. Sometimes, it is also necessary to remove width and height attributes, as the viewBox attribute handles scaling.

These manual adjustments are critical for ensuring your SVG is fully compliant with BIMI standards. They help to prevent common issues such as logos not displaying or appearing incorrectly in different email clients. For a detailed guide on these modifications, you can refer to the official BIMI Group recommendations. It's also vital to ensure the logo itself has a solid, non-transparent background. If your logo currently uses transparency, you will need to add a solid color background to the SVG file.

Example of a BIMI-compliant SVG structurexml

<svg width="100" height="100" viewBox="0 0 100 100" version="1.2" baseProfile="tiny-ps">
  <title>Your Company Name</title>
  <desc>Logo of Your Company Name</desc>
  <rect x="0" y="0" width="100" height="100" fill="#FFFFFF"/>
  <path d="M50 10 L90 50 L50 90 L10 50 Z" fill="#0000FF"/>
</svg>

After creating your SVG, it's highly recommended to validate it. Several online tools can help you check if your SVG meets all the BIMI technical specifications. This step is crucial before deploying your BIMI record, as it helps catch any errors that might prevent your logo from displaying correctly.

Common pitfalls and troubleshooting

Even with clear guidelines, some common pitfalls can hinder your BIMI logo's display. One of the most frequent issues is when an SVG logo appears blurry, which is counter-intuitive for a vector graphic. This almost always indicates that a bitmap image (like a PNG or JPG) has been embedded within the SVG file, rather than the logo being composed purely of vector paths. BIMI requires logos to be 100% vector based, free of any rasterized elements.

Another common mistake is neglecting the requirement for a solid background. While transparent logos might be common for web use, BIMI specifically mandates a non-transparent background. This ensures consistency in how logos are displayed across various email clients, some of which might render transparent backgrounds unpredictably or simply display a white background behind your logo, which might not align with your branding.

Incorrect SVG profile versions or missing crucial XML elements like <title> and <desc> can also lead to issues. These elements are vital for accessibility and proper rendering. It's a precise process, and overlooking any of these details can result in your logo not showing up or even triggering a blocklist (or blacklist) filter if the SVG is malformed.

Common pitfalls

Blurred logo: This usually indicates an embedded raster image, not a true vector SVG.
Transparent background: BIMI requires a solid color background for proper display across all clients.
Incorrect SVG version: Using a version other than SVG Tiny 1.2 or Tiny P/S.
Missing elements: Forgetting the <title> and <desc> tags.

Best practices

Pure vector graphics: Always start with the original vector source file for your logo.
Solid background: Fill the background with a solid color, even if it matches the email client's default background.
Correct export settings: Export as SVG Tiny 1.2 or SVG Tiny P/S from your design software.
Manual XML edits: Verify and add required XML elements, and clean up unnecessary attributes.

Views from the trenches

Best practices

Always use the original vector source file for your logo; avoid converting raster images to SVG for BIMI.

Ensure the SVG is exported as SVG Tiny 1.2 or SVG Tiny P/S, as other versions may not be compliant.

Manually check the SVG code to confirm it includes the required <title> and <desc> elements for accessibility.

Confirm that the SVG file uses a solid background color and no transparency, which is a key BIMI requirement.

Common pitfalls

Embedding raster images (e.g., PNG, JPG) within the SVG, leading to blurry logos and non-compliance.

Exporting the SVG in a non-compliant format, such as SVG 1.1, instead of SVG Tiny 1.2 or Tiny P/S.

Forgetting to include the necessary <title> or <desc> elements within the SVG code, which are essential for accessibility.

Using a transparent background for the logo, as BIMI mandates a solid background to ensure consistent rendering.

Expert tips

Use an SVG validator to check your file against BIMI specifications before deployment.

When designing, aim for a simple, clear logo that looks good at small sizes, as it will be displayed prominently in inboxes.

Ensure your SVG's viewBox attribute is correctly defined and does not contain comma-delimited values.

Host your SVG file on an HTTPS-secured web server, as this is a fundamental requirement for BIMI.

Expert view

Expert from Email Geeks says an SVG cannot be blurry, so if it appears blurry, it means a bitmap format like PNG or JPG was likely embedded into the SVG.

March 20, 2020 - Email Geeks

Expert view

Expert from Email Geeks says brand design should export the logo from its source file as a true SVG, not a converted bitmap.

March 20, 2020 - Email Geeks

Final considerations for your BIMI SVG

Implementing BIMI involves more than just selecting an image. It requires a deep understanding of SVG specifications and how email clients render these files. While precise pixel dimensions are less relevant for vector graphics, adhering to the 1:1 aspect ratio, maintaining a small file size, and ensuring the correct SVG Tiny 1.2 or Tiny P/S format are non-negotiable.

The distinction between true vector graphics and embedded bitmaps is paramount. A blurry SVG is a clear indicator of a bitmap image within the file, which BIMI does not support. Ensuring your logo is purely vector, has a solid background, and includes the necessary XML elements will significantly increase your chances of successful BIMI implementation and consistent logo display across different inboxes.

By following these guidelines and rigorously validating your SVG file, you can confidently prepare your brand's logo for BIMI, enhancing your email deliverability and bolstering your brand's presence in the inbox. Remember that a well-prepared SVG is a cornerstone for successful BIMI adoption.