Base64 en SVG

Comment décoder du Base64 en SVG

1. Collez le Base64, une URI data:image/svg+xml;base64,..., ou le CSS ou HTML qui la contient. Les data URI SVG encodées en URL (data:image/svg+xml,%3Csvg...) fonctionnent aussi.
2. L’aperçu dessine le graphique et indique ses dimensions, ou « vectoriel » quand le navigateur ne signale pas de taille fixe. En dessous se trouve la source XML complète.
3. Appuyez sur Télécharger le fichier pour enregistrer un .svg, ou sélectionnez le code dans le panneau de source pour le copier.

Le SVG est du texte brut : le décodage vous donne donc un code lisible. En plus d’enregistrer le fichier, vous pouvez découvrir ce que dessine réellement une icône d’une feuille de style, quelles couleurs elle utilise ou pourquoi elle ne s’affiche pas.

Sécurité du SVG : aperçu en image ou code intégré

Un fichier SVG est un document. Il peut contenir des éléments <script>, des attributs d’événement comme onload, des liens, du HTML intégré via <foreignObject> et des références à des images et polices externes. Ce que le navigateur en fait dépend de la façon dont le SVG est chargé :

Cette page décode les octets et les passe à une balise <img> sous la forme data:image/svg+xml;base64,... : quel que soit le contenu du fichier, il est seulement dessiné. Le panneau de source affiche le texte sans l’interpréter.

Si vous comptez intégrer le SVG dans une page, lisez d’abord la source et cherchez :

• les éléments <script> et les attributs qui commencent par on, comme onload ou onclick
• javascript: dans href ou xlink:href
• <foreignObject>, qui peut transporter du HTML arbitraire
• des valeurs href qui pointent vers des adresses http:// ou https://, utilisables pour le suivi
• des déclarations <!ENTITY, que certains analyseurs XML côté serveur développent de façon dangereuse

Le Base64 cache tout cela à un coup d’œil rapide, et c’est pour cela qu’un SVG malveillant arrive souvent encodé. Le Base64 lui-même ne protège rien ; voir encodage ou chiffrement.

Comment le SVG est reconnu

La plupart des fichiers SVG commencent par <svg ou par une déclaration XML : leur Base64 commence donc par PHN2Zy ou PD94bWwg. Une marque d’ordre des octets UTF-8 en tête ajoute 77u/, comme dans 77u/PHN2Zy....

L’outil traite les données comme du SVG quand la balise <svg est le premier élément, après une éventuelle déclaration XML, des commentaires et une ligne <!DOCTYPE svg ...>, le tout dans les 2 premiers Ko. Dans une data URI qui déclare image/svg+xml, le type déclaré est utilisé dans tous les cas. Si un SVG est intégré dans autre chose, comme une page HTML, ou si un très long commentaire repousse la balise au-delà de 2 Ko, vous obtenez une note « Cela ne ressemble pas à un fichier SVG » ; saisissez image/svg+xml dans Type MIME pour l’afficher.

Quand le SVG ne s’affiche pas

• « Ce SVG n’a pas pu être rendu ». Le XML est mal formé : une balise non fermée, un & non échappé, ou une chaîne tronquée à laquelle il manque le </svg> final. Regardez d’abord la fin de la source.
• Il s’affiche ici mais pas sur votre site. Vérifiez comment le site le sert. Avec une data URI, le type doit être image/svg+xml ; un fichier servi en text/plain ou application/octet-stream ne s’affiche pas non plus comme image.
• Il s’affiche intégré, mais pas en data URI. L’élément racine n’a pas d’attribut xmlns="http://www.w3.org/2000/svg". Le SVG intégré dans du HTML n’en a pas besoin, les images si.
• Les couleurs sont fausses. Un SVG utilisé comme image ne peut hériter ni de currentColor ni du CSS de la page. Il est dessiné avec les couleurs définies dans le fichier, noir par défaut.

Utiliser le SVG décodé dans le code

Dans le navigateur, la façon sûre d’afficher un SVG en Base64 est de le garder sous forme d’image :

const img = new Image();
img.src = "data:image/svg+xml;base64," + b64;
document.body.append(img);

Écrire plutôt element.innerHTML = atob(b64) insère le code dans votre page, où ses scripts et ses gestionnaires d’événements s’exécutent avec les privilèges de votre page. Notez aussi que atob() renvoie les octets sous forme de caractères Latin-1, ce qui casse le texte non ASCII du SVG ; Base64 en JavaScript montre comment décoder correctement l’UTF-8. Pour encoder un SVG, utilisez SVG en Base64.

FAQ