Aller au contenu principal

Logo BIMI : créer un SVG Tiny-PS conforme en 4 étapes

Par CaptainDNS
Publié le 28 février 2026

Schéma de conversion d'un logo SVG standard vers le profil SVG Tiny-PS requis par BIMI
TL;DR
  • BIMI impose le profil SVG Tiny 1.2 PS (Portable/Secure) : pas de script, pas de lien externe, pas d'image embarquée
  • Un logo BIMI doit être carré, centré, avec un viewBox de 0 0 X X et l'attribut baseProfile="tiny-ps"
  • Utilisez le convertisseur SVG Tiny-PS de CaptainDNS pour nettoyer et valider automatiquement votre fichier

Votre domaine passe DMARC, votre enregistrement BIMI est publié, mais votre logo ne s'affiche toujours pas dans Gmail ou Yahoo Mail. Le problème vient souvent du fichier SVG lui-même : BIMI n'accepte pas n'importe quel SVG. Il exige un profil très spécifique appelé SVG Tiny 1.2 PS (Portable/Secure).

Ce profil interdit tout ce qui pourrait poser un risque de sécurité : scripts JavaScript, liens vers des ressources externes, polices web, animations. Un logo exporté depuis Illustrator ou Figma contient presque toujours des éléments interdits. Sans nettoyage, le fournisseur de messagerie ignore simplement le fichier.

Ce guide vous accompagne de la préparation du fichier source jusqu'à la validation finale. Il s'adresse aux admins sys, aux équipes email marketing et aux CTO de PME qui veulent mettre en place BIMI sans y passer trois jours.

Qu'est-ce que le format SVG Tiny-PS ?

SVG Tiny 1.2 est un sous-ensemble du standard SVG défini par le W3C, initialement conçu pour les appareils à ressources limitées (téléphones, PDA). Le profil PS (Portable/Secure) ajoute des restrictions de sécurité spécifiques à BIMI :

  • Pas de script (<script> interdit)
  • Pas de lien externe (<image>, <use xlink:href="http://..."> interdits)
  • Pas d'interactivité (<a>, événements onclick interdits)
  • Pas d'animation (<animate>, <set> interdits)

La logique est simple : un logo affiché dans une boîte de réception ne doit jamais exécuter de code ni charger de ressource externe. C'est une surface d'attaque que les fournisseurs de messagerie refusent d'ouvrir.

Différences avec un SVG standard

FonctionnalitéSVG standardSVG Tiny-PS
Scripts JavaScriptOuiNon
Liens externes (<image>)OuiNon
AnimationsOuiNon
Filtres (<filter>)OuiNon
Gradients linéaires/radiaux simplesOuiOui
Formes de base (<rect>, <circle>, <path>)OuiOui
Texte (<text>)OuiOui
Groupes (<g>)OuiOui
ClipPathOuiOui

Le format autorise les éléments visuels nécessaires à un logo (formes, couleurs, texte). Il bloque tout ce qui pourrait servir de vecteur d'attaque.

Exigences techniques d'un logo BIMI

Dimensions et ratio

Le logo BIMI doit être carré. Il n'y a pas de dimension imposée en pixels, mais le viewBox doit respecter un ratio 1:1 :

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2"
     baseProfile="tiny-ps"
     viewBox="0 0 100 100">

La plupart des implémentations utilisent un viewBox de 0 0 100 100 ou 0 0 512 512. L'important est que les deux dernières valeurs soient identiques.

Attributs XML obligatoires

Quatre attributs sont requis sur l'élément <svg> racine :

AttributValeur requiseRôle
xmlnshttp://www.w3.org/2000/svgNamespace SVG
version1.2Version SVG Tiny
baseProfiletiny-psProfil de sécurité BIMI
viewBox0 0 X X (carré)Dimensions logiques

L'absence de baseProfile="tiny-ps" est l'erreur la plus courante. Sans cet attribut, les fournisseurs rejettent le fichier même si le contenu est valide.

Éléments autorisés et interdits

Autorisés : <svg>, <g>, <defs>, <title>, <desc>, <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path>, <text>, <tspan>, <linearGradient>, <radialGradient>, <stop>, <solidColor>, <clipPath>, <use> (référence locale uniquement)

Interdits : <script>, <image>, <foreignObject>, <a>, <animate>, <animateTransform>, <animateColor>, <set>, <filter>, <feGaussianBlur>, <pattern>, <mask>, <symbol>, <marker>, <switch>, <cursor>

Exigences du format SVG Tiny-PS pour un logo BIMI

Créer un logo BIMI en 4 étapes

Étape 1 : préparer le fichier source

Partez d'un logo vectoriel propre. Peu importe l'outil (Illustrator, Inkscape, Figma, Affinity Designer), l'objectif est d'obtenir un SVG avec :

  • Un plan de travail carré (512x512 px ou 100x100)
  • Le logo centré dans le cadre
  • Aucune zone transparente critique (le logo sera affiché sur un fond variable selon le client mail)
  • Des formes aplaties : convertissez les textes en chemins (<path>) si la police n'est pas standard

Conseil : exportez en "SVG standard" depuis votre outil. Ne cherchez pas à exporter directement en Tiny-PS, car aucun outil de design ne supporte ce profil nativement.

Étape 2 : nettoyer le SVG

Un SVG exporté depuis un outil de design contient presque toujours des éléments superflus :

  • Métadonnées éditeur : commentaires Illustrator, balises <metadata>, namespace xmlns:inkscape
  • Styles CSS : blocs <style> avec des classes
  • Attributs inutiles : id, data-name, xml:space
  • Éléments invisibles : groupes vides, masques non utilisés

Exemple de SVG brut exporté depuis Illustrator :

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0 -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 512 512">
  <defs>
    <style>.cls-1{fill:#0EA5E9;}</style>
  </defs>
  <metadata><!-- ... --></metadata>
  <g id="Layer_1" data-name="Layer 1">
    <circle class="cls-1" cx="256" cy="256" r="200"/>
  </g>
</svg>

Ce fichier ne passera pas la validation BIMI : il manque version, baseProfile, et il contient un bloc <style> et des <metadata>.

Étape 3 : convertir avec le convertisseur CaptainDNS

Plutôt que de nettoyer manuellement (risque d'oubli), utilisez un convertisseur automatique. Le convertisseur SVG Tiny-PS de CaptainDNS :

  1. Ajoute les attributs manquants (version="1.2", baseProfile="tiny-ps")
  2. Supprime les éléments interdits (scripts, animations, images externes)
  3. Convertit les styles CSS inline en attributs SVG
  4. Nettoie les métadonnées, commentaires et namespaces superflus
  5. Normalise le viewBox en ratio carré

Collez votre SVG ou uploadez le fichier, et récupérez le résultat conforme.

Étape 4 : valider le résultat

Après conversion, vérifiez que le fichier contient bien :

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2"
     baseProfile="tiny-ps"
     viewBox="0 0 512 512">
  <title>Logo captaindns.com</title>
  <circle cx="256" cy="256" r="200" fill="#0EA5E9"/>
</svg>

Points de contrôle :

  • version="1.2" est présent
  • baseProfile="tiny-ps" est présent
  • viewBox est carré
  • Aucun <script>, <image>, <animate> ou <style> résiduel
  • L'élément <title> est recommandé (accessibilité)

Testez ensuite votre logo avec l'outil de vérification BIMI CaptainDNS pour confirmer qu'il est récupérable en production.

Pipeline de conversion d'un logo SVG vers SVG Tiny-PS conforme BIMI

Erreurs fréquentes et comment les corriger

Bloc <style> dans le fichier

Symptôme : le validateur signale "CSS styles not allowed".

Cause : Illustrator et Figma exportent les couleurs sous forme de classes CSS.

Solution : convertir les classes en attributs fill et stroke directement sur chaque élément. Le convertisseur CaptainDNS effectue cette transformation automatiquement.

baseProfile absent ou incorrect

Symptôme : le fichier est rejeté malgré un contenu valide.

Cause : l'attribut baseProfile="tiny-ps" manque sur l'élément <svg> racine. C'est l'erreur la plus fréquente car aucun éditeur graphique ne l'ajoute.

Solution : ajouter baseProfile="tiny-ps" et version="1.2" sur la balise <svg>.

Images embarquées en base64

Symptôme : le validateur signale "image element not allowed".

Cause : un élément <image> avec un href="data:image/png;base64,..." est présent. Certains outils intègrent des bitmaps dans le SVG.

Solution : recréer l'élément en pur vectoriel (<path>, <circle>, etc.) ou le supprimer.

viewBox non carré

Symptôme : le logo apparaît déformé ou n'est pas affiché.

Cause : un viewBox="0 0 800 400" produit un ratio 2:1, pas 1:1.

Solution : recadrer le logo dans un cadre carré et ajuster le viewBox en conséquence.

Éléments <filter> ou <mask>

Symptôme : le validateur signale "filter/mask element not allowed".

Cause : des effets comme les ombres portées, flous gaussiens ou masques de découpe avancés sont présents.

Solution : supprimer ces effets et recréer l'apparence avec des formes simples si nécessaire.

🎯 Plan d'action recommandé

  1. Vérifier votre politique DMARC : elle doit être p=quarantine ou p=reject avec pct=100. Sans DMARC valide, BIMI ne fonctionnera pas.
  2. Exporter votre logo en SVG depuis votre outil de design avec un plan de travail carré
  3. Convertir le SVG avec le convertisseur SVG Tiny-PS de CaptainDNS pour obtenir un fichier conforme
  4. Héberger le fichier en HTTPS sur une URL accessible publiquement (exemple : https://captaindns.com/bimi/logo.svg)
  5. Publier l'enregistrement DNS BIMI : default._bimi.captaindns.com TXT "v=BIMI1; l=https://captaindns.com/bimi/logo.svg;"

FAQ

Comment créer un logo BIMI conforme SVG Tiny-PS ?

Exportez votre logo en SVG depuis un outil vectoriel (Illustrator, Figma, Inkscape) avec un plan de travail carré. Passez le fichier dans un convertisseur SVG Tiny-PS pour ajouter les attributs obligatoires (version="1.2", baseProfile="tiny-ps") et supprimer les éléments interdits (scripts, animations, images externes).

Quelles sont les exigences techniques du format SVG Tiny-PS ?

Le fichier doit contenir version="1.2" et baseProfile="tiny-ps" sur la balise racine, un viewBox carré, et aucun élément interdit : pas de &lt;script>, &lt;image>, &lt;animate>, &lt;filter>, &lt;style>, &lt;a> ou &lt;foreignObject>. Les formes de base, gradients simples et texte sont autorisés.

Quelle taille doit faire un logo BIMI ?

Il n'y a pas de taille minimale imposée en pixels. Le viewBox doit être carré (ratio 1:1). Les valeurs courantes sont 0 0 100 100 ou 0 0 512 512. Les fournisseurs de messagerie redimensionnent le logo selon leurs propres contraintes d'affichage.

Comment convertir un SVG classique en SVG Tiny-PS ?

Utilisez un convertisseur dédié qui ajoute les attributs manquants, supprime les éléments interdits, convertit les styles CSS en attributs inline et nettoie les métadonnées. Le convertisseur CaptainDNS effectue toutes ces opérations en une seule passe.

Faut-il un certificat VMC pour afficher son logo BIMI ?

Cela dépend du fournisseur. Gmail exige un VMC (Verified Mark Certificate) ou un CMC (Common Mark Certificate). Yahoo Mail et Apple Mail peuvent afficher le logo sans certificat. Consultez notre guide VMC vs CMC pour les détails.

Comment tester si mon logo BIMI est valide ?

Hébergez le fichier SVG en HTTPS, publiez votre enregistrement DNS BIMI, puis utilisez un outil de vérification BIMI pour contrôler que le fichier est accessible et conforme au profil SVG Tiny-PS.

Quels éléments SVG sont interdits dans un logo BIMI ?

Les principaux éléments interdits sont : &lt;script>, &lt;image>, &lt;foreignObject>, &lt;a>, &lt;animate>, &lt;animateTransform>, &lt;set>, &lt;filter>, &lt;pattern>, &lt;mask>, &lt;symbol>, &lt;marker>, &lt;switch> et &lt;cursor>. Tout élément permettant l'exécution de code, le chargement de ressources externes ou l'interactivité est interdit.

📖 Glossaire

  • SVG Tiny 1.2 PS : profil restreint du standard SVG (W3C) conçu pour BIMI. Le suffixe PS signifie Portable/Secure et ajoute des restrictions de sécurité au-delà de SVG Tiny 1.2.
  • BIMI : Brand Indicators for Message Identification. Standard qui permet d'afficher un logo de marque dans les clients de messagerie, conditionné à une authentification email stricte (DMARC).
  • VMC : Verified Mark Certificate. Certificat émis par une autorité (DigiCert, Entrust) qui lie un logo à une marque déposée. Requis par Gmail pour le badge de vérification.
  • CMC : Common Mark Certificate. Alternative au VMC qui ne nécessite pas de marque déposée. Accepté par Gmail depuis 2024.
  • DMARC : Domain-based Message Authentication, Reporting and Conformance. Politique d'authentification email qui conditionne le fonctionnement de BIMI.

Convertissez votre logo maintenant : utilisez le convertisseur SVG Tiny-PS de CaptainDNS pour transformer votre fichier SVG en un logo BIMI conforme en quelques secondes.


📚 Guides BIMI connexes

  • SVG Tiny-PS : comprendre le profil de sécurité BIMI (à venir)
  • Configurer BIMI pour une PME : guide économique sans VMC (à venir)

Sources

Articles similaires