BIMI Dark Mode Guidelines: How to Format Your SVG Logo

If your BIMI logo uses a transparent background or dark text without a background shape, it will become invisible or distorted when viewed in dark mode on mobile and desktop email clients.

Because mailbox providers do not allow dynamic CSS media queries (@media (prefers-color-scheme: dark)) inside BIMI SVG files for security reasons, your vector graphic must be designed to render clearly against any background from the outset.

The core problem with dark mode in email inboxes

Email clients like Gmail, Apple Mail, and Yahoo Mail automatically adjust their interface colors based on system preferences. However, they render your BIMI logo as a static image inside a standard avatar frame:

• Gmail: Renders logos inside a circular crop frame. Transparent backgrounds default to dark gray or black in dark mode, turning black logo marks completely invisible.
• Apple Mail: Displays square or circular avatar containers depending on the device. Dark logos on transparent backgrounds blend directly into the dark background header.
• Yahoo Mail: Applies a neutral backdrop, but ungrounded vector paths often suffer from contrast degradation.

Required SVG design standards for universal rendering

To guarantee your logo displays correctly across all lighting modes, follow these explicit SVG construction guidelines:

1. Include a solid background shape

Never use a transparent canvas. Fill the entire 1:1 square canvas of your SVG file with a solid background color—typically white, a primary brand color, or a contrasting brand tone.

2. Standardize target aspect ratios and padding

• Set the viewBox attribute strictly to 0 0 512 512 (or another square aspect ratio).
• Maintain an internal padding of 15% to 20% around the central logo mark so that circular cropping in Gmail or Apple Mail does not clip the edges of your design.

3. Strip prohibited SVG attributes

The SVG Tiny Portable/Secure (SVG Tiny PS) standard required for VMC validation explicitly bans:

• External CSS stylesheets or external link references (href).
• Embedded JavaScript or animation tags (<script>, <animate>).
• Embedded raster images (PNG/JPEG binaries inside the vector).
• CSS media queries for dark/light theme switching.

Pre-flight testing your logo file

Before publishing your logo URL in your DNS TXT record or submitting it for VMC validation, preview the file across four rendering contexts:

1. Light Mode (White Circle Crop): Verify text contrast and edge clarity.
2. Dark Mode (Dark Gray/Black Circle Crop): Ensure background fill prevents black-on-black blending.
3. Small Scaling (32px x 32px): Confirm legibility on mobile message list views.
4. Validation Tooling: Run your file through an SVG Tiny PS XML parser to check for compliance.

How Signume optimizes your vector assets

Signume handles SVG reformatting and validation directly as part of our certificate preparation service. We convert vector assets into fully compliant SVG Tiny PS files engineered for dark mode compatibility across all major email clients.

Frequently asked questions

Can I use CSS media queries to swap logo colors in dark mode? No. Security rules in the SVG Tiny PS specification strip dynamic scripts and CSS media queries from BIMI files to prevent potential security vectors.

Why is a solid background recommended for BIMI SVGs? A solid background shape prevents email clients from filling transparent areas with dark system default colors, ensuring your logo maintains consistent brand colors regardless of user theme settings.

What happens if my SVG contains invalid elements when submitting for a VMC? The Certificate Authority’s automated and manual validation checks will reject the file, delaying certificate issuance until the vector parameters meet SVG Tiny PS standards.