Signature e-mail – image SVG et affichage sur mobile [Résolu]

Signaler
Messages postés
270
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
31 janvier 2020
-
Messages postés
270
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
31 janvier 2020
-
Bonjour,


J’ai créé une signature pour mes e-mails professionnels avec une image au format SVG :


<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;">Assistant de gestion
locative</span><br>
Adresse<br>
Tél. 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>



J’ai deux problèmes :
le logo ne s’affiche pas sur certains clients de messagerie (notamment Gmail) ;
l’alignement n’est pas conservé lorsqu’on ouvre les e-mails sur mobile (cf. photo ci-dessous).

Pouvez-vous m’aider, s’il vous plaît ?

Cordialement,
Jimmy

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

3 réponses

Messages postés
29735
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 octobre 2020
2 838
Bonjour,

Certains clients de messagerie ne chargent pas les images qui sont mises en "lien".
Déjà, tu pourrais commencer à intégrer directement l'image au contenu du mail en l'encodant en base 64.

Idem pour certains styles qui ne sont pas interprétés.
Chaque navigateur internet peut avoir des comportements différents lorsqu'il s'agit de style (css) et du code html.
Chaque "logiciel" de messagerie peut également avoir un comportement différent.

Certains peuvent tout simplement ignorer les styles et/ou les liens....
Cela peut venir de leur paramétrage et/ou de leur fonctionnement ... et dans ces cas la, tu ne pourras malheureusement pas y faire grand chose.






Messages postés
5429
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
10 octobre 2020
904
Salut Jimm15300,

1.

Pour ton image, certains clients de messagerie n'affichent pas les images externes pour des raisons de sécurité. Si tu veux maximiser les chances que ton image s'affiche partout, tu dois l'inclure dans ton e-mail.

Je te suggère aussi de ne pas utiliser d'image .svg, mais une image .png ou .jpeg, qui sont des formats d'images plus communément supportés.

Pour embarquer l'image dans ton .html, tu peux encoder le contenu du fichier en base64, et l'inclure en ligne dans le tag
<img>
.

Tu as un outil d'encodage et des explications là : https://www.base64-image.de/tutorial

Cela va augmenter la taille de tes e-mails, mais au moins l'image devrait s'afficher sur un maximum de clients.

2.

Pour le problème d'alignement, je comprends que tu veux que le logo soit à gauche et les informations de contact à droite. Le plus simple est de les mettre dans un tableau html à une ligne et deux colonnes.

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


Tu peux aussi faire avec des div et css, mais à mon sens cela complique les choses dans ton cas très simple.

Dal
Messages postés
270
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
31 janvier 2020
15
Bonjour,

Merci beaucoup pour vos éclaircissements.

J’ai donc modifié le code en conséquence et j’ai converti mon image .svg en .bmp car dans les autres formats (.png et .jpeg) la qualité n’était pas bonne.

J’ai maintenant un nouveau problème : le fond de l’image appraît en noir sur certains clients (notamment Gmail). Est-ce un problème de transparence ? Comment corriger ce problème ?

Cordialement,
Jimmy
Messages postés
5429
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
10 octobre 2020
904
S'il y a de la transparence, c'est le format .png que tu dois utiliser. Le format .bmp ne gère pas la transparence (et .jpeg non plus).

Le format .png est un format d'images avec compression mais sans perte (contrairement à .jpeg, qui est avec perte). Si ton image n'a pas l'air jolie en .png c'est lié à autre chose.

Pour travailler avec .svg et exporter dans différents formats dans la résolution que je souhaite, j'utilise habituellement Inkscape. C'est un logiciel libre et gratuit.
Messages postés
270
Date d'inscription
samedi 27 janvier 2007
Statut
Membre
Dernière intervention
31 janvier 2020
15 >
Messages postés
5429
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
10 octobre 2020

Bonjour,

J'ai pu faire la conversion en .png avec une bonne qualité finalement !

Merci beaucoup :)