Using SVG format in a HTML email

[fern1]

Hi, 
we are looking into using media query in our HTML emails so our logo will work for both devices with dark mode and regular ones.

The idea is to use our logo in SVG format. Whenever the app uses dark mode, the color of the word/font will change to white.

just an example:

 (prefers-color-scheme: dark) {
  .darkmode { background-color: #111111 !important; }
  .darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff !important; }
  .dark-logo { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
  .light-logo { display:none; display:none !important; }

However, we are not able to upload SVG on ACS. We have found previous posts about this here but without a specific answer. 
is it possible to use SVG on Campaign Standard?

cheers

PS: We already tried inserting the SVG code inside the HTML, but ACS does not like it. It keeps uploading the template forever.

[Craig_Thonis]

Hi Fern,

At this time, SVG is not supported. If necessary, I recommend opening a ticket with Campaign Support for an enhancement request.

Thank you,

Craig

[ccg1706]

Hi @fern1,

@Craig_Thonis is right, in the meantime while contacting support you can try to convert your SVG files into PNG files.

Regards, 

Celia

[fern1]

With PNG our issue remains the same with our logo not working properly on darkmode.
And applying media query does not work for all apps.

[ccg1706]

Hi @fern1 ,

An alternative approach:

- Convert to SVG logos into two separate PNG files - one for light mode and one for dark mode. 

-Conditional image loading: Instead of just using media queries only, use a mix of HTML and inline CSS to conditionally load the correct PNG image based on the user's theme. This can be made by embedding both images in the email and using a media query to hide/show the appropriate one. Here is a code example:

<style>
@media (prefers-color-scheme: dark) {
.dark-logo { display: block !important; }
.light-logo { display: none !important; }
}
@media (prefers-color-scheme: light) {
.dark-logo { display: none !important; }
.light-logo { display: block !important; }
}
</style>
<img src="light-logo.png" class="light-logo" alt="Light Mode Logo" />
<img src="dark-logo.png" class="dark-logo" alt="Dark Mode Logo" style="display:none;" />

-Ensure that the light mode logo is the default in case the media query fails , so it displays correctly in all the devices.

¡Hope this helps!

Regards,

Celia

[fern1]

Thank you so much for your help Celia!

we tried it and it works way better. the only app it didn't work was gmail app. do you know how can we fix that?

regards

[ccg1706]

Hi @fern1 

I share with you some tips to try to solve the Gmail part.

-Design a Universal Logo: Design a logo that works well in both light and dark modes by using a middle-ground colour palette or an outline that stands out against both backgrounds. This eliminates the need for conditional loading altogether.

-Image Inversion: If your brand guidelines allow you to, create a logo with a background that can be inverted to suit both themes. This approach is less ideal but can be a workaround for emails where dark mode support is critical.

-Transparent Logos: Use a transparent PNG for your logo and set the background colour using inline CSS or HTML attributes. This approach can work well if the logo itself does not rely heavily on colour but instead uses transparency to blend with the background.

-CSS Fallbacks: In cases where the background colour cannot be controlled by CSS, consider using a background colour within the PNG itself that matches your default email background.

-Vector Markup Language (VML): VML can be used to insert images with specific conditions that ensure compatibility with email clients like Outlook and Gmail. Although VML is typically associated with Outlook, it can be used creatively for Gmail as well by embedding image tags in a way that is more reliable across email clients.

Example of an implementation:

<!-- Fallback background colour for clients that don't support prefers-color-scheme -->

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px;height:100px;">

    <v:fill type="frame" src="light-logo.png" color="#FFFFFF" />

    <v:textbox inset="0,0,0,0">

        <img src="light-logo.png" width="200" height="100" alt="Logo" />

    </v:textbox>

</v:rect>

Gmail-Specific Workaround:

• Avoid Media Queries for Critical Content: Since Gmail doesn’t fully support media queries, avoid relying on them for critical content. Instead, use a more static approach where the logo is either universally suitable or can be swapped using inline styles.
• Fallback Image: Ensure the default (light mode) logo is prominent and displays well in dark mode by perhaps adding a subtle outline or shadow. This makes the logo visible irrespective of the background.

Test:

Use Litmus or Email on Acid to test and preview your emails.

Implementation Example:

Given the limitations, here’s a simplified approach using a fallback mechanism:

<!-- Default to light logo, show dark logo only in supported clients -->

<img src="light-logo.png" alt="Light Mode Logo" style="display:block;" />

<img src="dark-logo.png" alt="Dark Mode Logo" style="display:none;" class="dark-logo" />

<style>

@media (prefers-color-scheme: dark) {

    .dark-logo { display: block !important; }

    .light-logo { display: none !important; }

}

</style>

Try these, hope it solves the problem.

Regards,

Celia