Générateur de badges Markdown
Créez des badges style shields.io pour votre README (build, version, licence...), générés entièrement en local en SVG, sans aucun appel à un service tiers.
Aperçu
Des badges sans appel réseau
Les badges de type « build passing » ou « version 1.2.3 » que l'on voit en haut des README de projets open source viennent historiquement d'un service comme shields.io : chaque fois qu'une page GitHub s'ouvre, le navigateur du visiteur va chercher l'image du badge sur ce serveur tiers. Ce générateur fait l'inverse : le badge est un fichier SVG entièrement calculé dans votre navigateur, puis encodé en data URI directement dans le lien Markdown. Le README qui en résulte n'a plus besoin de contacter aucun serveur pour afficher le badge — il l'embarque.
Choisissez un libellé (la partie grise à gauche, comme « build » ou « licence »), un message (la partie colorée à droite, comme « passing » ou « MIT »), une couleur parmi la palette ou une teinte personnalisée, et un style de coins. L'aperçu se met à jour instantanément et vous pouvez copier directement le code Markdown prêt à coller dans votre fichier, ou télécharger le SVG brut si vous préférez l'héberger vous-même sur votre propre infrastructure plutôt que de l'intégrer en data URI.
Le principe technique est simple : chaque badge est composé de deux rectangles accolés (un fond gris foncé pour le libellé, la couleur choisie pour le message), avec un texte centré dans chacune des deux moitiés. Ce SVG est construit caractère par caractère en JavaScript, directement dans votre navigateur, sans bibliothèque de rendu ni police téléchargée. Une fois le SVG obtenu, deux formats de sortie sont proposés : une balise Markdown image dont la source est le SVG encodé en base64 sous forme de data URI (le format attendu par les README GitHub, GitLab ou npm), et le fichier .svg brut à télécharger si vous préférez l'héberger vous-même ou l'intégrer ailleurs qu'un README, par exemple dans une page HTML ou une documentation.
Limites à connaître
La largeur des rectangles est estimée à partir du nombre de caractères, pas d'une mesure réelle de police : pour un rendu irréprochable au pixel près sur des textes très longs ou avec des caractères inhabituels, un service qui mesure la police exacte comme shields.io restera plus précis. Le compromis assumé ici est de gagner en confidentialité et en fiabilité hors ligne ce que l'on perd en précision de quelques pixels, ce qui est largement invisible à l'œil nu sur des libellés courts comme ceux utilisés dans un README.
Autre point à garder en tête : un badge en data URI alourdit légèrement la taille du fichier Markdown lui-même, puisque l'image est intégrée en base64 dans le texte plutôt que référencée par une simple URL. Pour un badge isolé, l'écart est de l'ordre de quelques centaines d'octets, ce qui reste négligeable dans un README, mais si vous multipliez les badges par dizaines sur une même page, le fichier source gagnera en poids en échange de son indépendance vis-à-vis de tout service externe.
Un badge shields.io classique est une image chargée depuis le serveur de shields.io à chaque fois que quelqu'un ouvre votre README (sur GitHub, GitLab, npm...). Cet appel réseau révèle des informations sur qui consulte la page : adresse IP, moment de la consultation, éventuellement le referrer. Ce générateur produit un SVG directement encodé en data URI dans le lien Markdown : l'image est intégrée telle quelle dans le document, aucune requête n'est faite vers un serveur externe quand le badge s'affiche.
Oui, les data URI en image/svg+xml sont supportées par le moteur de rendu Markdown de GitHub, GitLab et de la page npm d'un paquet. C'est la même technique que shields.io utilise en interne pour certains rendus, sauf qu'ici tout est calculé une fois pour toutes dans votre navigateur, pas régénéré à chaque affichage.
Non, c'est une approximation. Le générateur calcule la largeur de chaque partie en multipliant le nombre de caractères par une largeur fixe, sans mesurer réellement le rendu de la police (ce qui nécessiterait de charger une police et de mesurer chaque glyphe, une opération que les navigateurs ne permettent pas de faire de façon fiable en dehors du rendu final). Pour la grande majorité des libellés courts en minuscules ou majuscules standard, le résultat est visuellement correct, mais des caractères très larges (majuscules multiples, emojis) ou très étroits (i, l, 1) peuvent légèrement décaler le centrage du texte.
Oui, le champ « Personnalisée » accepte n'importe quel code hexadécimal (#rrggbb ou #rgb). Les huit couleurs nommées de la palette reprennent les teintes les plus courantes du style shields.io (brightgreen, green, yellowgreen, yellow, orange, red, blue, lightgrey) pour rester familières aux lecteurs habitués à ce format de badge.
Oui, c'est un fichier SVG autonome et valide : vous pouvez l'utiliser directement comme image dans une page HTML, un site web ou tout autre document acceptant les images vectorielles, sans dépendance à ce générateur.
Non. Le texte du libellé, du message et la couleur choisie ne sont jamais envoyés nulle part : le SVG est construit en JavaScript directement dans la page, et l'encodage en data URI se fait aussi localement.