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 plus compacte. 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 Plus Compacte
La version utf8 URL-encodée est généralement plus petite que le base64 pour les SVG, ce qui allège votre CSS et HTML tout en restant intégrée en ligne.
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 la chaîne la plus compacte.
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 smaller URL-encoded variant.
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.
Pour les SVG, la variante utf8 URL-encodée (data:image/svg+xml,...) est généralement plus petite que le base64 car le SVG est du texte. Utilisez la version URL-encodée quand vous voulez le CSS ou HTML le plus léger. Utilisez le base64 quand un outil ou une plateforme exige spécifiquement une entrée base64.
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 plus compacte. Gratuit, privé et instantané.