Using SVG format in a HTML email | Community
Skip to main content
F
fern1
Level 5
August 21, 2024
Question

Using SVG format in a HTML email

  • August 21, 2024
  • 2 replies
  • 3384 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Craig_Thonis
Adobe Employee
Craig_ThonisAdobe Employee
Adobe Employee
August 23, 2024

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
    Community Advisor
    ccg1706Community Advisor
    Community Advisor
    August 23, 2024

    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

    F
    fern1Author
    Level 5
    August 23, 2024

    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
    Community Advisor
    ccg1706Community Advisor
    Community Advisor
    August 23, 2024

    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

    Terms & ConditionsAccessibility statement

    Loading footer...