Mode d’emploi
- Déposez un fichier .svg sur la zone de dépôt, cliquez pour en choisir un ou collez une image.
- Gardez « Conserver l’original » pour encoder le code SVG lui-même, ou choisissez PNG, JPEG ou WebP dans « Convertir en » pour le transformer en pixels.
- Si vous le convertissez en image matricielle, définissez une « Largeur max. » pour contrôler la taille en pixels.
- Copiez la sortie background-image CSS pour une feuille de style, ou la version data URI, Base64 brut, balise img ou Markdown.
Le SVG en data URI
SVG (Scalable Vector Graphics, type MIME image/svg+xml) décrit des formes sous forme de texte XML : il reste net à n’importe quelle taille. Son Base64 commence généralement par PHN2Zy (le <svg encodé) ou par PD94bWw lorsque le fichier débute par une déclaration XML.
Lorsqu’un SVG est utilisé comme image, l’élément racine doit porter xmlns="http://www.w3.org/2000/svg". Beaucoup d’extraits copiés depuis du HTML l’omettent, et le data URI n’affiche alors rien. Les ressources externes sont également bloquées en mode image : les polices web et les images liées à l’intérieur du SVG ne se chargent pas. Convertissez d’abord le texte en tracés ou intégrez ces ressources.
Base64 ou encodage URL ?
Le SVG étant déjà du texte, un data URI peut contenir directement le balisage, en encodant en pourcentage seulement quelques caractères (<, >, #, % et les guillemets). Pour une icône typique en CSS, c’est plus court que le Base64 et cela se compresse mieux avec gzip. Base64 est le choix le plus sûr lorsque la chaîne traverse des systèmes qui altèrent les guillemets ou les caractères spéciaux, ou lorsqu’une API attend du Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Encodé en pourcentage */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Pour obtenir la forme encodée en pourcentage, utilisez le générateur de data URI et choisissez « Encodage-pourcent ».
Assainir les SVG non fiables
Un SVG peut contenir des éléments <script>, des attributs de gestionnaire d’événements comme onload et des liens vers d’autres documents. Les navigateurs n’exécutent pas les scripts d’un SVG affiché via <img> ou un arrière-plan CSS, mais le même fichier intégré directement dans du HTML ou ouvert seul peut les exécuter. Si des utilisateurs peuvent envoyer des fichiers SVG à votre application, assainissez-les, par exemple avec DOMPurify, avant de les stocker ou de les intégrer. Base64 ne fait que masquer le balisage à un coup d’œil rapide ; il ne le rend pas sûr.
Questions fréquentes
Base64 ou encodage URL : lequel est le meilleur pour le SVG ?
Pour du SVG dans du CSS, l’encodage URL est généralement plus compact et reste lisible. Base64 est plus robuste lorsque la chaîne transite par d’autres systèmes ou lorsqu’une API exige du Base64.
Pourquoi mon data URI SVG ne s’affiche-t-il pas ?
xmlns sur l’élément racine, un # non échappé dans un URI encodé en pourcentage, et des polices ou des images que le SVG charge depuis d’autres fichiers.Puis-je convertir un SVG en chaîne Base64 PNG ?
Oui. Choisissez PNG dans « Convertir en ». Le navigateur convertit le SVG en pixels, et l’option « Largeur max. » vous permet de réduire le résultat.