SVG en Base64

Comment convertir un SVG en Base64

1. Déposez un fichier .svg dans la zone ou choisissez-le avec le sélecteur de fichiers.
2. Sortie en démarre sur CSS background-image. Passez à Data URI, HTML <img>, Markdown ou Base64 brut s’il vous faut une autre forme.
3. Appuyez sur Copier la sortie et collez la règle dans votre feuille de style.

Le SVG est encodé exactement tel qu’il a été enregistré. Il n’y a pas d’options de redimensionnement ni de qualité ici : un vectoriel n’en a pas besoin. Passez d’abord le fichier dans un optimiseur SVG si vous voulez une chaîne plus courte ; supprimer les métadonnées de l’éditeur fait souvent gagner plus que n’importe quel choix d’encodage.

SVG en Base64 ou encodé en URL

Le SVG est du texte : il n’a pas besoin d’être en Base64. Une data URI peut transporter le balisage directement si quelques caractères sont encodés en pourcent. Voici la même icône triangulaire de 104 octets des deux façons :

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

La version encodée en URL est plus courte, et l’écart se creuse après gzip : les deux règles ci-dessus se compressent en 200 et 162 octets. Avec 20 petites icônes dans une même feuille de style, la version Base64 faisait 4 421 octets (801 avec gzip) et la version encodée en URL 3 720 octets (615 avec gzip). Le balisage répété se compresse bien, et Base64 brouille cette répétition.

Base64 n’impose aucune règle d’échappement, survit à tout contexte qui accepte une URL, et c’est ce qu’attendent de nombreuses API et outils de build. La forme encodée en URL casse si vous oubliez d’échapper # (qui ouvre un fragment d’URL) ou si vous mélangez les guillemets avec ceux du url("...") qui l’entoure. SVG en data URI construit les deux versions et affiche leurs tailles.

Ce qu’exige une data URI SVG

• Le type MIME image/svg+xml. Les navigateurs reconnaissent les données PNG et JPEG même sous un mauvais type, mais pas le SVG. Avec tout autre type, l’image ne s’affiche pas.
• L’attribut xmlns. Un <svg> inline dans le HTML fonctionne sans, mais en tant qu’image, l’élément racine doit déclarer xmlns="http://www.w3.org/2000/svg". Beaucoup d’icônes écrites à la main ne l’ont pas et échouent sans message.
• Du XML bien formé. Une balise non fermée ou un & non échappé fait échouer toute l’image, sans rendu partiel.

Le Base64 d’un SVG commence généralement par PHN2Zy (<svg) ou PD94bWwg (<?xml ). Tout autre début, comme un commentaire ou une marque d’ordre des octets (BOM), ne gêne pas les navigateurs mais rend le format plus difficile à reconnaître à son préfixe.

Styles et couleurs

Un SVG utilisé en background-image ou dans <img> est un document séparé. Le CSS de votre page ne peut pas y pénétrer : les couleurs au survol et currentColor ne fonctionnent donc pas. Deux contournements courants :

• Utiliser la data URI comme masque, puis la colorer avec background-color :

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• Intégrer le balisage <svg> dans le HTML quand l’icône doit changer selon l’état ou le thème.

Décoder et corriger

Base64 en SVG retransforme une chaîne Base64 en balisage lisible et modifiable. Si un SVG s’affiche dans un éditeur mais pas en data URI, décodez-le là-bas et vérifiez d’abord la présence de xmlns sur l’élément racine.

FAQ