Décodeur Base64 en SVG

Collez un SVG encodé en Base64 pour l’afficher et enregistrer le fichier vectoriel d’origine. Vous pouvez aussi le pixelliser en PNG, JPG ou WebP, ou placer une image bitmap dans une enveloppe SVG.

Fonctionne entièrement dans votre navigateur. Aucune donnée n’est envoyée.

Mode d’emploi

  1. Collez la chaîne Base64 ou l’URI data:image/svg+xml;base64.
  2. Vérifiez l’aperçu ainsi que le format détecté et les dimensions.
  3. Laissez SVG dans « Télécharger en ». Pour une entrée SVG, le fichier est enregistré sous forme de texte SVG.
  4. Téléchargez le fichier .svg et ouvrez-le dans un éditeur si vous souhaitez lire ou modifier le balisage.

Repérer un SVG dans du Base64

Contrairement aux autres formats d’image, le SVG est du texte XML brut. Un fichier qui commence par <svg donne un Base64 débutant par PHN2Zy, et un fichier qui commence par une déclaration XML (<?xml) donne un Base64 débutant par PD94bWwg. Les SVG en Base64 sont courants dans les images d’arrière-plan CSS, les jeux d’icônes, les exports d’outils de design et les modèles d’e-mails. Le type MIME est image/svg+xml.

Beaucoup de data URI SVG ne sont pas du tout en Base64, mais contiennent du texte encodé en pourcentage, comme data:image/svg+xml,%3Csvg.... Cet outil attend du Base64 : analysez plutôt ces URI avec le générateur de data URI.

Lire le code SVG

L’aperçu montre le rendu du graphique, mais c’est souvent le balisage qui est intéressant : données de tracé, couleurs, viewBox ou polices intégrées. Téléchargez le fichier avec « Fichier d’origine » ou en SVG et ouvrez-le dans n’importe quel éditeur de texte, ou collez le même Base64 dans Décoder du Base64 pour voir immédiatement le XML sous forme de texte.

Du matriciel au SVG : une enveloppe, pas une vectorisation

Si les données Base64 sont un PNG, un JPEG ou une autre image bitmap, choisir SVG produit un fichier SVG qui contient les pixels d’origine dans un élément <image>. C’est utile lorsqu’un outil n’accepte que des fichiers SVG, mais l’image n’est pas vectorisée en formes : elle devient toujours floue à l’agrandissement, et le fichier est plus lourd que le bitmap, car les pixels y sont stockés en Base64. Pour obtenir de vrais tracés vectoriels, utilisez un logiciel de vectorisation comme Potrace ou la fonction « Vectoriser un objet matriciel » d’Inkscape.

Manipuler des SVG non fiables

Un SVG peut contenir des éléments <script>, des attributs de gestionnaires d’événements et des liens vers des ressources externes. Les navigateurs bloquent tout cela lorsqu’un SVG est affiché en tant qu’image, via une balise <img> ou un arrière-plan CSS. En revanche, les scripts peuvent s’exécuter et les ressources externes se charger lorsque le fichier est ouvert directement dans un onglet du navigateur ou que son balisage est collé en ligne dans une page. Vérifiez ou assainissez les SVG de source inconnue avant de les utiliser de cette façon.

Questions fréquentes

Cet outil peut-il transformer un PNG en véritable SVG vectoriel ?

Non. Convertir un bitmap en SVG ne fait qu’intégrer l’image dans un fichier SVG. Le résultat se redimensionne comme le bitmap d’origine, et non comme un dessin vectoriel.

Pourquoi mon data URI SVG ne se décode-t-il pas ?
Vérifiez s’il contient ;base64,. Sinon, le SVG est encodé en pourcentage ou en texte brut, et non en Base64. Le générateur de data URI peut l’analyser.
Est-il sûr de décoder un SVG de source inconnue ?

Le décoder et l’enregistrer est sans danger, car le résultat n’est que du texte. Les scripts d’un SVG ne peuvent s’exécuter que lorsqu’il est ouvert en tant que document ou inséré en ligne dans une page web.

Pourquoi des polices ou des images liées manquent-elles après la conversion d’un SVG en PNG ?

Pour pixelliser un SVG, le navigateur le charge en tant qu’image, et dans ce mode un SVG ne peut pas récupérer de fichiers externes. Les polices web et les images liées sont ignorées, et des polices par défaut sont utilisées à la place. Intégrez les polices et les images dans le SVG pour le rendre autonome.