SVG vers Data URI en ligne — 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.

Options

Encodage
UTF-8 (défaut) produit une data URI lisible data:image/svg+xml, encodée URL. Base64 utilise data:image/svg+xml;base64, pour les outils ou navigateurs qui l’exigent. Le snippet CSS suit le même encodage.

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.

Outils SVG

Prévisualisez, optimisez avec SVGO, exportez en Data URI, redimensionnez, formatez, convertissez en JSX et validez vos SVG — tout dans le navigateur.

Découvrez les autres catégories d'outils

Minifier

Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.

Beautifier

Rendez le code lisible avec une indentation cohérente — beautifiez JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML et plus encore dans votre navigateur.

Déminifier

Développez du code minifié ou compressé — déminifiez JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML et d'autres formats pour déboguer ou relire.

Conversion

Transformez des données entre JSON, YAML, XML et CSV localement — sans envoi serveur.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Outils JSON

Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.

DevOps & Infra

Format/validate/minify HCL, format & lint Dockerfile, validation Compose et .env.

CI/CD

GitHub Actions et GitLab CI — formater le YAML et vérifier la structure des workflows/jobs dans le navigateur.

Logs & observabilité

JSON/NDJSON ligne à ligne et access logs Nginx/Apache — format, filtre, validation et CSV/TSV.

Kubernetes

Manifestes multi-docs, validation structurelle, starters Ingress/Deployment et formatage values Helm.

Réseau / IP

CIDR, sous-réseaux et helpers IPv4/IPv6 — dans le navigateur.

Sécurité & tokens

JWKS, certificats X.509 et scan de secrets — locaux navigateur.

API & schémas

Outils OpenAPI pour formater, valider et analyser vos specs.

Encodage

Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.

Utilitaires développeur

Timestamps, UUID, ULID, Nanoid, cron, mots de passe, regex, slugify, bases, casse, diff texte et chmod — tout côté client.

Texte & Markdown

Comptez, générez un sommaire Markdown et nettoyez des listes de lignes — dans le navigateur.

IA & LLM

Comptage de tokens, estimation des coûts et fenêtre de contexte — 100 % local.

Sérialisation

Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.