Images SVG dans Gmail (et autres)

Bonjour,

J'envoie des mails au format HTML (des mails légitimes, pas des spams) avec en lien un logo et des dessins au format SVG.

<img src="https://www.monsite.com/de/D_7.svg" width="110" height="98" style="width: 110px; height: 97.76704861px" alt="Dessin Optique">

Très joli avec par exemple Thunderbird mais sur Gmail les images ne passent pas.

Sujet mal documenté mais confirmé sur stackoverflow.

Je suppose que pour Gmail je vais être obligé d'enregistrer les SVG en un autre format.

1) Y a-t-il un format conseillé (gif, png, autre) ?
2) Voyez-vous un moyen de permettre aux logiciels qui acceptent SVG de recevoir les images en SVG ?
@support dans la feuille de style me paraît assez aléatoire.
srcset n'est pas fait pour cela il me semble.

Tout cela concerne le vaste sujet des mails au format html, ce tuto est un peu ancien il me semble.

Merci d'avance de votre aide.
Modifié par boteha_2 (28 Aug 2024 - 22:12)

Bonjour,

à propos de Stack Overflow : nope, on a pas de souci avec les liens vers ce site mais ici dans ce cas précis il y a une ressource bien plus à jour qu'un sujet de 2015.

boteha_2 a écrit :
1) Y a-t-il un format conseillé (gif, png, autre) ?

Selon le type d'image (photo, logo, graphique) : gif, png ou jpg

Webp serait idéal mais pas supporté : https://www.caniemail.com/features/image-webp/

boteha_2 a écrit :
1) Y a-t-il un format conseillé (gif, png, autre) ?
2) Voyez-vous un moyen de permettre aux logiciels qui acceptent SVG de recevoir les images en SVG ?
@support dans la feuille de style me paraît assez aléatoire.
srcset n'est pas fait pour cela il me semble.

En effet, @supports() n'est… pas supporté (et ne serait pas forcément utile dans ce cas) : https://www.caniemail.com/features/css-at-supports/

La solution parfaite serait <picture>, mais devine quoi ? https://www.caniemail.com/features/html-picture/

Bienvenue dans le monde de l'e-mailing !

Felipe a écrit :

à propos de Stack Overflow : nope, on a pas de souci avec les liens vers ce site mais ici dans ce cas précis il y a une ressource bien plus à jour qu'un sujet de 2015.

Le sujet a été mis à jour il y a 10 mois mais c'est vrai que CanIemail est idéal.

À propos des images SVG et la question d'une alternative pour Gmail et autres clients ne voulant pas de SVG cet article sur CSS_tricks est ce que j'ai trouvé de mieux.
Il aborde bien le sujet mais sans trouver de solution.

Au stade où je suis je ne vois pas d'autre solution que d'enregistrer en PNG tous mes dessins SVG et de balancer les PNG à tout le monde, y compris aux braves clients acceptant les SVG.

Je m'intéresse aussi au favicon dans le mail, je reviens vers vous à ce sujet.

Bonjour,

boteha_2 a écrit :

Dans Gmail il s'affiche dans le mail reçu par le client en haut à gauche un rond avec une initiale.

Là je suppose qu'il y a moyen de passer une image façon favicon mais je ne vois pas trop comment le faire quand l'adresse mail de l'émetteur n'est pas une adresse Gmail.

Personne n'a d'idée, je suppose que c'est impossible.

Bonjour,

Après quelques travaux sur les mails je pense pouvoir dire que Gmail constitue un cas particulier.

La plupart des clients mails s'efforcent de gérer les règles CSS du mieux possible mais Gmail s'assoie volontairement dessus.

Quelques exemples :
Un lien <a> sera toujours couleur bleu Google et souligné. Si vous stylez un lien en bouton avec padding, background-color, etc, vous récupérez un texte bleu souligné...

list-style n'est pas géré. Donc si ul vous aurez forcément des grosses puces standard.

margin est géré ou non selon le contexte.

Tout est fait pour que tous les mails ressemblent au modèle mail de Google qui a ses mérites mais n'est pas passionnant.
Tous les prestataires d'envois de mails ont dû adopter le modèle Google.

Quand le mail est créé côté serveur, il est possible de savoir si l'adresse du destinataire est en Gmail et alors d'aménager un peu les codes HTML et CSS.