SVG en data URI

Comment transformer un SVG en data URI

1. Collez le balisage SVG dans la zone Texte. Ouvrez un fichier .svg dans n’importe quel éditeur de texte pour le copier. La zone contient au départ une icône d’exemple.
2. Le Type MIME est déjà image/svg+xml, et l’Encodage est réglé sur SVG optimisé.
3. Regardez le tableau sous les options. Il indique la longueur de l’URI et la taille compressée en gzip pour Base64, Encodé en URL et SVG optimisé, signale la plus petite et propose un bouton Utiliser pour chacune.
4. Choisissez un Format de sortie : Data URI brute, CSS url(), HTML <img>, HTML <a> ou Markdown. Puis Copier la sortie.

Vous pouvez aussi déposer un .svg en mode Depuis un fichier, qui propose le Base64 et l’encodage URL du fichier tel quel. La variante optimisée et le tableau comparatif nécessitent le balisage dans la zone de texte.

Taille d’un SVG en Base64 ou encodé en URL

Pour l’exemple intégré, une icône de 309 octets avec un carré arrondi, un cercle et une ligne, le tableau affiche :

L’encodage URL simple est le plus long à l’état brut, car chaque espace, guillemet, <, > et saut de ligne devient trois caractères. Après gzip, il bat pourtant largement Base64, car le balisage garde sa structure répétitive alors que Base64 la brouille. Les feuilles de style sont presque toujours servies compressées : c’est la colonne gzip qui compte pour les utilisateurs.

Le SVG optimisé l’emporte dans les deux colonnes. Pour une petite icône triangulaire de 103 octets, l’écart est le même : 166 caractères en Base64, 172 encodé en URL, 136 en version optimisée. SVG en Base64 compare un jeu d’icônes complet.

Ce que fait « SVG optimisé »

L’optimiseur apporte quatre modifications au balisage :

1. Il réduit chaque suite d’espaces, sauts de ligne compris, à une seule espace et supprime celles des extrémités.
2. Il remplace " par ', mais seulement si le SVG ne contient pas déjà de '.
3. Il encode en pourcent avec encodeURIComponent, puis remet les caractères sûrs dans une URI : espace, =, :, /, , et ;.
4. Il écrit les échappements restants en minuscules (%3c au lieu de %3C), ce qui se compresse un peu mieux : 220 octets au lieu de 222 pour l’exemple.

Le résultat pour l’icône triangulaire :

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1 15 15H1z' fill='%23e33'/%3e%3c/svg%3e

Le # de la couleur est devenu %23. Cet échappement est obligatoire : un # non échappé ouvre un fragment d’URL, et tout ce qui suit est ignoré sans avertissement.

Règles de guillemets et de contexte

La sortie optimisée contient des guillemets simples, des espaces et des parenthèses non échappés, ce qui fonctionne entre guillemets doubles et nulle part ailleurs :

.icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e"); }

<img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e" alt="">

Un url(...) sans guillemets casse sur les espaces, et un attribut entre guillemets simples se termine au premier '. Si l’URI est assemblée en JavaScript, insérée par un moteur de templates ou collée dans un système qui réécrit les guillemets, Base64 est le choix le plus sûr : il ne contient que des lettres, des chiffres, +, / et =, et survit donc à n’importe quel contexte. Utilisez le bouton Utiliser du tableau pour changer.

Les autres limites sont mineures. Le SVG optimisé est toujours en UTF-8 et ignore, avec un avertissement, tout autre jeu de caractères choisi. La réduction des espaces peut modifier le texte des éléments <text> qui préservent les espaces. Et le SVG a toujours besoin de xmlns="http://www.w3.org/2000/svg" sur son élément racine, comme tout SVG utilisé en tant qu’image.

L’optimiseur en JavaScript

La même transformation tient en quelques lignes, pour des scripts de build ou du CSS-in-JS :

function svgToDataUri(svg) {
  let s = svg.trim().replace(/\s+/g, " ");
  if (!s.includes("'")) s = s.replaceAll('"', "'");
  const keep = { "%20": " ", "%3D": "=", "%3A": ":", "%2F": "/", "%2C": ",", "%3B": ";" };
  return "data:image/svg+xml," + encodeURIComponent(s)
    .replace(/%[0-9A-F]{2}/g, m => keep[m] || m.toLowerCase());
}

Elle produit l’URI du triangle montrée plus haut. Pour l’encodage dans le navigateur et dans Node, voir Base64 en JavaScript. Pour lire une data URI SVG existante, collez-la dans Base64 en SVG ou dans l’analyseur de data URI.

FAQ