SVG vers Data URI — Générateur CSS background

Transformez un SVG brut en data URI compacte à coller dans un background-image CSS ou du HTML inline. Tout se fait localement.

Chargement…

SVG vers Data URI — guide d’intégration CSS

Transformez un SVG en data URI pour les backgrounds CSS, pseudo-éléments ou intégrations inline quand un fichier séparé serait excessif.

Notes développeur

• Parse un seul <svg> racine puis normalise le markup avant encodage. • Idéal pour icônes, badges et petites illustrations intégrées au CSS. • Gardez les visuels plus lourds en fichier séparé si le cache compte. • Combinez avec optimize-svg pour raccourcir encore la data URI.

Quand utiliser cet outil

• Intégrer un petit logo dans un background-image CSS. • Livrer une icône décorative sans requête réseau supplémentaire. • Construire des badges de pseudo-éléments dans un design system. • Comparer l’URI encodée après un passage SVGO.

Exemples

Badge prêt pour intégration CSS

Entrée

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc">
  <title id="badge-title">Badge livraison rapide</title>
  <desc id="badge-desc">Badge arrondi avec icône éclair et fond en dégradé.</desc>
  <defs>
    <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f97316"/>
      <stop offset="100%" stop-color="#fb923c"/>
    </linearGradient>
  </defs>
  <rect width="240" height="72" rx="18" fill="url(#badgeGradient)"/>
  <text x="76" y="31" font-size="18" font-weight="700" fill="#fff">FastMinify</text>
</svg>

Sortie

background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;

Optimiser puis encoder

Entrée

<svg viewBox="0 0 24 24"><!-- comment --><path fill="currentColor" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z"/></svg>

Sortie

Un markup plus petit produit une data URI plus courte et plus facile à embarquer dans le CSS.

Outils SVG associés

Réduisez d’abord la source avec optimize SVG, inspectez les dimensions sur redimensionner SVG, ou ouvrez le hub SVG.

FAQ SVG vers Data URI

Encodage pour backgrounds CSS

Quand utiliser une data URI ?

Pour de petits assets UI quand réduire les requêtes compte plus que la mise en cache d’un fichier séparé.

Faut-il optimiser le SVG avant ?

Oui — un SVG plus compact produit une URI plus courte et un CSS plus léger.

Le SVG est-il envoyé ?

Non. Le parsing et l’encodage se font localement dans le navigateur.

Autres outils SVG

Minifier SVG Optimiser SVG SVG ViewerSVG vers Data URIBeautifier SVG Déminifier SVG SVG vers JSX Redimensionner SVG Valider SVG

Convertisseurs, encodeurs, formateurs et minificateurs au même endroit ? Outils développeurs Ouvrez le catalogue des outils développeurs.

Outils SVG

Déminifier SVG

Redimensionner SVG

Voir tout

Outils SVG

Redimensionner SVG

Minifier

Beautifier

Beautifier JSON

Beautifier HTML

Déminifier

Déminifier CSS

Déminifier JSON

Déminifier HTML

Encodage

Outils JSON

Validateur JSON

Sérialisation

PHP Unserialize