SVG en Base64 et Data URI
Intégrez vos SVG directement dans le CSS ou le HTML. Obtenez des data URI encodés URL et Base64, des extraits CSS prêts à l’emploi et une balise <img>.
- Aucun envoi
- Fonctionne hors ligne
- Gratuit, sans inscription
- Vos fichiers restent dans votre navigateur
Déposez vos fichiers SVG ici
ou collez du code SVG dans l’éditeur. Vous pouvez ouvrir plusieurs fichiers à la fois.
Votre SVG reste sur cet appareil. Rien n’est envoyé.
Mode d’emploi : Convertisseur SVG en Base64 / Data URI
- 1
Collez votre SVG
Collez le code SVG ou déposez un fichier. Vous pouvez aussi coller un data URI existant pour le décoder en SVG.
- 2
Choisissez une sortie
Choisissez un data URI encodé URL (généralement le plus léger), Base64, un fond CSS, un masque CSS ou une balise HTML <img>.
- 3
Copiez
Copiez l’extrait dans votre feuille de style ou votre HTML. La taille de chaque option s’affiche à côté.
Quand intégrer un SVG en data URI
Un data URI place toute l’image dans votre CSS ou votre HTML : le navigateur n’a pas besoin d’une requête séparée. C’est idéal pour les petits graphismes très utilisés : icônes en CSS, cases à cocher et flèches de liste personnalisées, motifs de fond et images de remplacement.
Pour les grandes illustrations, un fichier .svg séparé est généralement préférable : le navigateur peut le mettre en cache indépendamment et il n’alourdit pas votre feuille de style.
SVG encodé URL ou Base64 ?
Le Base64 transforme chaque groupe de 3 octets en 4 caractères : il ajoute donc toujours environ 33 % à la taille. Un SVG encodé URL n’échappe que les quelques caractères dangereux dans une URL (<, >, #, % et les guillemets) : il reste lisible et généralement plus léger, surtout après gzip. viewsvg affiche les deux, avec leur taille, pour vous laisser choisir.
Tout ce qu’il faut pour travailler avec le SVG
Convertisseur SVG en Base64 / Data URI fait partie d’un même espace de travail pour afficher, modifier, optimiser et convertir des fichiers SVG, sans inscription, sans publicité et sans envoi de fichiers.
Aperçu instantané
Zoom jusqu’à 6400 %, déplacement, ajustement à l’écran et vérification sur fond transparent, blanc, noir ou de la couleur de votre choix.
Éditeur de code en direct
Coloration syntaxique, repères d’erreur par ligne, formatage et minification, recherche et historique d’annulation complet.
Contour et grille de pixels
Voyez chaque tracé en mode contour et vérifiez l’alignement des pixels avec la grille en zoomant.
Inspecter
Taille du fichier et avec gzip, viewBox, arbre des éléments avec mise en évidence et remplacement des couleurs en un clic.
Optimiser avec SVGO
Allégez vos fichiers avec aperçus avant/après et précision réglable. Optimisez tous les fichiers ouverts d’un coup.
PNG, JPG, WebP et ICO
Exportez à n’importe quelle taille jusqu’à 16384 px, avec transparence, ou copiez le PNG directement dans le presse-papiers.
React, Vue et Svelte
Composants JSX/TSX, React Native, Vue et Svelte propres, avec prise en charge de currentColor et des props.
Plusieurs fichiers à la fois
Ouvrez de nombreux SVG en onglets, puis optimisez-les en lot ou téléchargez-les dans un ZIP de SVG ou de PNG.
Privé et hors ligne
Aucun envoi, aucun compte. Votre travail est enregistré dans le navigateur et l’appli fonctionne hors ligne après la première visite.
Questions fréquentes
Faut-il utiliser un data URI SVG en Base64 ou encodé URL ?
Pour un SVG, un data URI encodé URL est généralement 20 à 30 % plus léger que le Base64 et se compresse mieux avec gzip. Le Base64 est pratique quand les caractères spéciaux posent problème.
Comment recolorer une icône SVG utilisée en CSS ?
Utilisez l’extrait de masque CSS. Le SVG devient un masque rempli par le background-color de l’élément (currentColor par défaut) : vous changez la couleur de l’icône en CSS.
Puis-je reconvertir un data URI en SVG ?
Oui. Collez un URI data:image/svg+xml ou une chaîne Base64 brute dans l’éditeur : viewsvg le décode automatiquement en SVG.
Mes fichiers SVG sont-ils envoyés quelque part ?
Non. viewsvg fonctionne entièrement dans votre navigateur. Les fichiers sont lus, affichés, optimisés et convertis sur votre appareil, et rien n’est envoyé à un serveur. Après la première visite, il fonctionne même hors ligne.
viewsvg est-il gratuit ?
Oui. Toutes les fonctions sont gratuites, sans inscription, sans filigrane et sans limite de fichiers.