SVG → Base64
Transforme un SVG en data URI à coller directement dans du HTML ou du CSS — Base64 et la forme URL-encodée, souvent plus légère, côte à côte.
ou clique pour parcourir — SVG uniquement
Fonctionne partout où une URL fonctionne. Toujours environ un tiers plus lourde que le fichier brut.
La même image, en général plus légère qu'en Base64 — et encore lisible, ce qui aide à déboguer le CSS.
une requête de moins
Une data URI place l'image dans le HTML ou le CSS lui-même : le navigateur ne fait donc jamais de seconde requête pour elle. Pour de petites icônes, c'est la différence entre apparaître immédiatement et apparaître un instant trop tard.
La contrepartie, c'est le cache : une icône intégrée est retéléchargée avec chaque page qui la contient et ne peut pas être mise en cache à part. Intègre la poignée d'icônes qui comptent pour le premier affichage et laisse le reste sous forme de fichiers.
trois étapes
Choisis un fichier .svg — il reste sur ton appareil.
Copie la data URI Base64 ou URL-encodée.
Utilise la balise img ou la règle de fond CSS déjà prêtes.
réponses rapides
Pour du SVG, l'URL-encodage est généralement plus léger, car le SVG est du texte et le Base64 alourdit d'environ 33 % tout ce qu'il touche. L'URL-encodage reste aussi lisible, tu reconnais donc la forme visée dans une feuille de style. Prends le Base64 quand un maillon de la chaîne abîme les caractères bruts.
Le Base64 encode trois octets en quatre caractères : un tiers de croissance est inévitable. Passe d'abord le fichier dans l'optimiseur SVG — les métadonnées d'éditeur et les coordonnées trop précises pèsent souvent plus lourd que l'encodage lui-même.
Oui — le bloc CSS est prêt à coller. Il utilise la forme URL-encodée entre guillemets doubles, et c'est pour cela que l'encodeur remplace les guillemets doubles du SVG par des simples.
Presque toujours un `#` non encodé. Une couleur comme `#fff` coupe l'URL à cet endroit et tout ce qui suit est traité comme un fragment. La sortie ci-dessus l'échappe déjà — le problème survient en général quand une data URI est retouchée à la main ensuite.
Non. L'encodage est un simple traitement de chaîne effectué dans ton navigateur.