Outils images, SVG et ressources

Gratuit Convertisseur SVG en URI de Donnees CSS

Convertissez du SVG en URI de donnees CSS. Options URL-encodé et Base64 avec apercu en direct.

Chargement de l'outil...

Qu'est-ce que Convertisseur SVG en URI de Donnees CSS ?

Transforme le SVG brut en URI de donnees pour CSS et HTML. Deux methodes: encodage URL et Base64.

Réponse rapide

Obtenez des URI de donnees CSS compatibles depuis du SVG. URL-encode ou Base64. background-image, mask, img src.

Last updated: 2026-06-09

Limites

  • URI de plus de 4KB deconseillees.
  • Pas de validation SVG.
  • Comportement variable selon navigateurs pour mask-image.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Collez votre SVG.
  2. Choisissez l'encodage: URL (recommande) ou Base64.
  3. Selectionnez le format de sortie.
  4. Copiez le code genere dans votre CSS ou HTML.

A quoi il sert

  • Integrer des icones SVG dans CSS pour reduire les requetes HTTP.
  • Utiliser des URI en CSS mask-image.
  • Integrer des SVG dans des emails.

Cas d'usage

Exemples concrets

Exemple

Icones sans sprites CSS

10 icones SVG converties en URI de donnees et integrees dans la feuille de style.

Exemple

Signature email autonome

Logo SVG converti en URI Base64 pour signature email.

Erreurs frequentes

  • Base64 inutile. L encodage URL est plus compact.
  • Espaces superflus avant encodage.
  • URI de donnees pour grands SVG (plus de 2-4KB).

Vérification

  1. Convertissez un cercle SVG avec URL-encodage et verifiez le rendu.
  2. Comparez avec le rendu Base64.

FAQ

Questions sur Convertisseur SVG en URI de Donnees CSS

Quel encodage choisir?

URL-encodé, environ 10-20% plus petit.

Compatibilite navigateurs?

Tous les navigateurs modernes.

Dans les attributs style?

Oui, attention aux guillemets.

Taille maximale?

Sous 2KB pour les performances.

Outils lies

Autres outils outils images, svg et ressources

A essayer aussi

A essayer aussi

Outils CSS et design

Générateur de carrousel CSS

Générez le balisage d’un carrousel CSS natif avec scroll-snap, boutons de défilement, repères de défilement et structure de liste accessible. Aucun JavaScript requis.

Ouvrir l'outil