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