← Tous les outils texte

SVG en data URI

Transformez un SVG en data URI pour des arrière-plans CSS ou des balises <img>.

  • Gratuit
  • Sans inscription
  • Fonctionne sur tous les appareils

À propos de SVG en data URI

Transformez un SVG en URI de données pour l'utiliser dans un background-image CSS ou un src d'img, ce qui évite une requête de fichier supplémentaire. Le SVG encodé en URL est généralement plus petit que le Base64, qui ajoute environ un tiers. Les petites icônes se prêtent bien à l'intégration en ligne, tandis que les grandes images sont préférables en fichiers séparés mis en cache.

Comment utiliser SVG en data URI

  1. Collez votre code SVG.
  2. Choisissez l'encodage et le type de sortie, comme background CSS ou img src.
  3. Copiez l'URI de données dans votre feuille de style ou votre HTML.

Pourquoi utiliser cet outil ?

Aussi appelé

Questions fréquentes

Le SVG en Base64 ou encodé en URL est-il plus petit ?

Le SVG encodé en URL est généralement plus petit, car le Base64 gonfle les données d'environ 33 %. Le Base64 reste plus sûr dans certains anciens outils.

Pourquoi mon URI de données ne fonctionne-t-elle pas en CSS ?

Les guillemets à l'intérieur du SVG peuvent entrer en conflit avec ceux autour de l'URL. Utilisez l'option de sortie CSS, qui gère les guillemets pour vous.

Puis-je changer la couleur d'un SVG utilisé comme URI de données ?

Pas avec la couleur CSS, car l'image est traitée comme une image. Modifiez le remplissage dans le SVG avant de l'encoder.

SVG en data URI est-il gratuit ?

Oui. SVG en data URI est gratuit sur Toolipedia, sans inscription et sans filigrane.

Est-ce sûr ?

Oui. Tous les calculs se font dans votre navigateur et rien de ce que vous saisissez n’est envoyé à notre serveur.

Est-ce que ça fonctionne sur mon téléphone ?

Oui. L’outil fonctionne dans tout navigateur récent sur Android et iPhone, ainsi que sur tablette et ordinateur. Il n’y a rien à installer.

Faut-il un compte ?

Non. Ouvrez simplement la page et utilisez l’outil. Aucune inscription ni adresse e-mail n’est nécessaire.

Puis-je mettre SVG en data URI sur mon propre site ?

Oui. Utilisez le bouton « Intégrer sur votre site » sous l'outil pour copier un court extrait de code et le coller dans votre page. C'est gratuit, sans compte, et l'outil continue de fonctionner dans votre page.

Outils similaires