Encodeur SVG en Base64
Encodez n'importe quel SVG en Base64 et en data URI pour l'intégrer en ligne dans CSS, HTML ou React. Obtenez cinq variantes prêtes à copier, dont une version URL-encodée qui garde le balisage lisible dans votre feuille de style. Gratuit, privé et instantané.
Déposez votre SVG ici ou cliquez pour importer
Accepte les fichiers .svg, ou collez du code SVG ci-dessous
Pourquoi intégrer un SVG en Base64
Cinq Formats Prêts à l'Emploi
Obtenez le base64 brut, un data URI, une règle CSS background-image, une balise HTML img et une variante URL-encodée, chacun avec son propre bouton de copie.
Variante URL-encodée lisible
La variante utf8 URL-encodée garde le balisage SVG lisible dans le data URI, ce qui vous permet de changer une couleur de remplissage directement dans votre CSS. Comme chaque caractère réservé est échappé, elle est légèrement plus longue que la chaîne base64, et non plus courte.
Compatible UTF-8
L'encodage gère correctement les emoji, accents et caractères non-latins, afin que votre SVG ne casse jamais sur des caractères spéciaux.
Économisez une Requête HTTP
Intégrer un petit SVG en data URI supprime une requête réseau distincte, ce qui peut accélérer le premier affichage pour les icônes et logos.
100% Privé
L'encodage se fait entièrement dans votre navigateur. Votre SVG n'est jamais importé, ce qui le rend sûr pour les ressources de marque privées.
Gratuit et Illimité
Sans inscription, sans crédits, sans limites. Encodez autant de SVG que vous le souhaitez et copiez n'importe quelle variante en un clic.
Comment encoder SVG en Base64
Ajoutez votre SVG
Glissez-déposez un fichier .svg, cliquez pour parcourir, ou collez votre code SVG dans la zone.
Obtenez les variantes
L'encodeur génère instantanément le base64 brut, un data URI complet, une règle CSS background, une balise img et une version URL-encodée.
Choisissez la bonne variante
Utilisez le data URI dans src ou href, la variante CSS dans background-image, ou la variante URL-encodée quand vous voulez que le SVG reste lisible et modifiable en ligne.
Copiez et collez
Cliquez sur le bouton de copie à côté de la variante souhaitée et collez-la directement dans votre feuille de style, HTML ou composant.
Choisissez le bon outil
Pourquoi cette page existe
Use the SVG to Base64 encoder to embed a vector inline as a data URI for CSS, HTML, or JSON, removing a network request. Copy the raw base64, the data URI, a CSS background, an img tag, or a URL-encoded variant that keeps the markup readable in your stylesheet.
Idéal pour
- Inlining icons in CSS background-image rules
- Embedding small SVGs directly in HTML or React without a separate file
- Cutting an extra HTTP request for tiny vector assets
Outils connexes dont vous aurez probablement besoin ensuite
FAQ SVG en Base64
Un data URI vous permet d'intégrer une image directement dans CSS ou HTML au lieu de renvoyer vers un fichier séparé. Pour SVG, cela ressemble à data:image/svg+xml;base64,PHN2Zy... et le navigateur le décode et le restitue en ligne, sans requête réseau supplémentaire.
Utilisez le base64 quand un outil ou une plateforme exige spécifiquement une entrée base64. Utilisez la variante utf8 URL-encodée (data:image/svg+xml,...) quand vous voulez que le SVG reste lisible et modifiable dans votre CSS. Notez que notre encodeur échappe chaque caractère réservé : la chaîne URL-encodée est donc un peu plus longue que celle en base64, et non plus courte.
Copiez la variante CSS background-image et collez-la dans une règle, par exemple background-image: url("data:image/svg+xml;base64,..."). L'icône s'affiche alors en arrière-plan sans fichier image séparé à charger.
Oui. L'encodeur est compatible UTF-8, donc les accents, les scripts non-latins et les emoji dans votre SVG sont encodés correctement et s'afficheront sans problème.
L'intégration en data URI convient mieux aux petits SVG comme les icônes et logos, où supprimer une requête HTTP accélère le chargement. Pour les SVG volumineux ou fréquemment réutilisés, un fichier séparé mis en cache est généralement préférable car le data URI alourdit chaque page qui l'inclut.
Non. L'encodage se fait entièrement dans votre navigateur, donc le SVG ne quitte jamais votre appareil. Cela rend l'outil sûr pour les ressources confidentielles ou non publiées.
Encodeur SVG en Base64
Encodez n'importe quel SVG en Base64 et en data URI pour l'intégrer en ligne dans CSS, HTML ou React. Obtenez cinq variantes prêtes à copier, dont une version URL-encodée qui garde le balisage lisible dans votre feuille de style. Gratuit, privé et instantané.