View original (French)

Email signature – SVG image and mobile display

Solved
Jimm15300 Posted messages 269 Registration date   Status Member Last intervention   -  
Jimm15300 Posted messages 269 Registration date   Status Member Last intervention   -
Hello,

I created a signature for my professional emails with an image in SVG format: 

<html>
 <body>
 <div style="min-height: 60px; line-height: 17px; margin: 0; padding: 10px 0; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #3a342c; min-width: 530px;"

id="sig"> <img src="https://sendeyo.com/up/d/471cea7f04" style="float: left; padding: 0 10px 0 0;"

height="102" width="200"> <strong style="color: #3a342c; font-size:12px;">Jimmy
 D.</strong><br>
 <span style="font-size: 12px; color: #666666;">Property Management Assistant
 </span><br>
 Address<br>
 Tel. 01 XX XX XX XX <br>
 <a href="mailto:etudecouderc@gmail.com" style="color: #403120; text-decoration: none">xxx@xxx.com</a><br>
 <a href="http://www.etudecouderc.com" style="color:#0095a2; text-decoration:none;">www.xxx.com</a>
 </div>
 </body>
</html>


I have two problems:
the logo does not display on some email clients (notably Gmail);
the alignment is not preserved when opening emails on mobile (see photo below).

Can you help me, please?

Best regards,
Jimmy

https://forums.cnetfrance.fr/filedata/fetch?id=6490991

3 answers

  1.
    jordane45 Posted messages 30427 Registration date   Status Moderator Last intervention   4 833
     
    Hello,

    Some email clients do not load images that are "linked".
    You could start by directly embedding the image into the email content by encoding it in base 64.

    The same goes for certain styles that are not interpreted.
    Each internet browser can have different behaviors when it comes to style (css) and html code.
    Each email "software" can also have different behavior.

    Some may simply ignore styles and/or links....
    This can be due to their settings and/or their functioning... and in these cases, unfortunately, there won't be much you can do.

    --
    Best regards,
    Jordane
    0
  2. [Dal] Posted messages 6122 Registration date   Status Contributor Last intervention   1 108
     
    Hello Jimm15300,

    1.

    For your image, some email clients do not display external images for security reasons. If you want to maximize the chances of your image displaying everywhere, you should include it in your email.

    I also suggest not using a .svg image, but rather a .png or .jpeg image, which are more commonly supported image formats.

    To embed the image in your .html, you can encode the file content in base64 and include it inline in the 
    <img>
    tag.

    You can find an encoding tool and explanations here: https://www.base64-image.de/tutorial

    This will increase the size of your emails, but at least the image should display on the maximum number of clients.

    2.

    Regarding the alignment issue, I understand you want the logo on the left and the contact information on the right. The simplest way is to put them in a single-row, two-column html table. 

    <table border="0"> <tr> <td>logo</td> <td>infos<br>de<br>contact</td> </tr> </table>


    You can also do it with divs and CSS, but in my opinion, that complicates things in your very simple case.

    Dal
    0
  3. Jimm15300 Posted messages 269 Registration date   Status Member Last intervention   15
     
    Hello,

    Thank you very much for your clarifications.

    I have thus modified the code accordingly and converted my .svg image to .bmp because the quality was not good in other formats (.png and .jpeg).

    I now have a new problem: the background of the image appears in black on some clients (notably Gmail). Is it a transparency issue? How can I fix this problem?

    Best regards,
    Jimmy
    0
    1. [Dal] Posted messages 6122 Registration date   Status Contributor Last intervention   1 108
       
      If you need transparency, the format you should use is .png. The .bmp format does not support transparency (and neither does .jpeg).

      The .png format is a lossless compression image format (unlike .jpeg, which is lossy). If your image doesn't look good in .png, it's related to something else.

      To work with .svg and export in different formats at the resolution I want, I usually use Inkscape. It's free and open-source software.
      0
      1. Jimm15300 Posted messages 269 Registration date   Status Member Last intervention   15 > [Dal] Posted messages 6122 Registration date   Status Contributor Last intervention  
         
        Hello,

        I was able to convert it to .png with good quality after all!

        Thank you very much :)
        0