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)

Hello,

Effectivement les SVG sont mal/pas supportés sur Gmail.

Il existe une ressource à jour et déjà évoquée plusieurs fois sur le forum qui indique le support des clients e-mail et où tu aurais trouvé cette information plus facilement qu'en passant du temps à chercher sur stackoverflow : https://www.caniemail.com/features/image-svg/

Bonne journée

Bonjour,

Merci de votre suivi.

Raphaël, si le lien vers stackoverflow vous dérange je peux le supprimer.

SVG n'est pas supporté par Gmail, c'est noté, mais pouvez-vous m'aiderr sur ces deux questions :

1) Y a-t-il un format conseillé pour les mails (gif, png, autre) ?
2) Voyez-vous un moyen de permettre aux logiciels qui acceptent SVG de recevoir les images en SVG ?

@support n'est pas supporté par Gmail ni par grand monde
srcset n'est pas fait pour cela il me semble (et pas supporté par Gmail).

Bonjour,

D'après CanIemail, PNG (non animé) est supporté par tous les clients eMail.

Cela me semble mieux pour des dessins que JPG ou GIF, également bien supportés.

Ce sera PNG pour tout le monde car après quelques recherches je n'ai trouvé aucun moyen de proposer SVG en priorité et PNG en secours.

Déçu, forcément, car SVG est plus net.

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 !

1) Favicon dans l'objet du mail.

Je viens de faire une recherche rapide à ce sujet, rien trouvé d'intéressant.
Je suppose que c'est impossible, pas moyen de faire entrer une image dans la ligne d'objet du mail.

2) 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.

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.