Convertisseur SVG en CSS. Data URIs encodées en URL dans votre navigateur.
Convertissez du code SVG en Data URIs CSS encodées en URL, règles background-image, masques mask-image et classes Tailwind arbitraires — directement dans votre navigateur. Aucun téléversement, zéro latence, sans compte requis.
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");Ce que la conversion SVG vers CSS apporte concrètement aux développeurs frontend.
En intégrant un SVG directement dans une feuille de style CSS sous forme de Data URI, le navigateur affiche le graphique vectoriel de manière synchrone sans requête HTTP distincte. Cela élimine la latence réseau et les clignotements de contenu invisible (FOIC) pour les icônes critiques d'interface : coches, chevrons, loaders et boutons d'action.
Deux modèles CSS régissent l'intégration vectorielle moderne. Avec background-image et l'encodage URL, toutes les définitions XML multicolores d'origine sont conservées dans votre feuille de style. Avec mask-image et currentColor, le SVG agit comme un pochoir dynamique qui hérite de la couleur de texte CSS au survol, en mode sombre et lors des états actifs sans modifier le balisage.
Le XML brut encodé en URL se compresse nettement mieux sous Gzip et Brotli que le surcoût de 33% imposé par Base64. SVG2CSS gère l'analyse, la désinfection XSS et la minification SVGO à 100% côté client dans votre navigateur. Pour les illustrations volumineuses (supérieures à 10–15 Ko), la mise en cache externe autonome reste optimale, tandis que l'intégration CSS est la référence pour les ressources d'interface fréquentes.
Cette architecture sans backend reflète une nouvelle norme parmi les utilitaires web ciblés. Qu'il s'agisse de calculer des formules mathématiques dans un SGPA to CGPA calculator ou d'analyser du XML vectoriel dans SVG2CSS, exécuter la logique directement dans le navigateur élimine la latence, protège la confidentialité des données et prouve que les outils web modernes n'ont pas besoin de serveurs lourds pour des calculs déterministes.
Les graphiques vectoriels intégrés s'affichent de façon synchrone avec le CSS.
Utilisez mask-image et currentColor pour adapter vos thèmes sans effort.
Traitement SVG local sans stockage sur serveur ni télémétrie.
Six modes d'exportation et utilitaires vectoriels
Formats vectoriels prêts pour la production, optimisés pour les architectures CSS modernes, Tailwind JIT et l'ingénierie inverse.
Data URI encodée en URL
Encode le balisage SVG brut en Data URIs conformes à la RFC 3986. Surpasse Base64 avec une structure plus propre et une meilleure compression Gzip/Brotli.
Guide encodage URL →CSS Background
Génère des déclarations background-image prêtes à l'emploi préservant les tracés multicolores, dégradés linéaires et illustrations sans requête HTTP.
Guide CSS Background →CSS Mask (currentColor)
Crée des règles mask-image et -webkit-mask-image avec background-color: currentColor pour teinter dynamiquement les icônes au survol et en mode sombre.
Guide CSS Mask →Classe Tailwind
Formate les vecteurs en classes arbitraires JIT comme bg-[url(...)] avec conversion des espaces en traits de soulignement pour Tailwind v3 et v4.
Guide Tailwind SVG →Data URI Base64
Convertit le XML vectoriel en chaînes binaires Base64 data:image/svg+xml;base64,... pour les clients de messagerie HTML et intégrations autonomes.
Comparatif Base64 →Décodage inverse CSS & Data URI
Collez des Data URIs existantes, chaînes Base64 ou règles CSS background-image dans Studio pour reconstruire du XML SVG propre et éditable en temps réel.
Docs décodage inverse →Le pipeline de conversion en trois étapes
Comment le XML vectoriel brut devient du code CSS prêt pour la production.
Analyse AST et désinfection XSS
Le DOM XML est validé à l'aide des parseurs natifs du navigateur. Les balises <script> malveillantes, gestionnaires d'événements en ligne et balises dangereuses sont supprimés.
Minification SVGO dans le navigateur
Les en-têtes DOCTYPE superflus, métadonnées d'éditeurs (Figma, Sketch, Illustrator) et commentaires XML sont nettoyés pour réduire la taille en octets avant l'encodage.
Synthèse de code multiformat
Génère en parallèle des Data URIs encodées en URL (RFC 3986), des chaînes Base64, des règles mask-image multi-navigateurs avec préfixes et des classes Tailwind arbitraires.
Comparatif des méthodes d'intégration SVG
Évaluez la stratégie d'intégration vectorielle qui correspond le mieux à vos exigences de performance et de style.
| Fonctionnalité / Compromis | Data URI Encodée en URL | Masque CSS (currentColor) | Data URI Base64 | Fichier .svg Externe |
|---|---|---|---|---|
| Distribution Réseau | CSS En Ligne Intégré dans la feuille de style ; aucune requête HTTP distincte | CSS En Ligne Intégré dans la feuille de style ; aucune requête HTTP distincte | CSS En Ligne Intégré ; engendre 33% de surcoût d'expansion textuelle | Fichier Externe Requête HTTP séparée ; mis en cache indépendamment par CDN/navigateur |
| Teinte Dynamique | Couleurs Fixes Couleurs figées dans le XML ; nécessite une nouvelle URI pour chaque variante | currentColor Dynamique Hérite dynamiquement de la couleur de texte au survol et changement de thème | Couleurs Fixes Couleurs figées dans la chaîne binaire ; ré-encodage requis | Filtres Limités Nécessite l'injection du SVG en ligne ou des filtres CSS approximatifs |
| Compression (Gzip/Brotli) | Haute Efficacité Le texte XML brut structuré se compresse très efficacement | Haute Efficacité Le texte XML brut structuré se compresse très efficacement | Taux Plus Faible Chaînes alphanumériques à haute entropie avec un taux de compression plus bas | Niveau Fichier Compressé en tant que ressource autonome via Gzip/Brotli sur le serveur |
| Idéal Pour | Graphismes Multicolores Icônes multicolores, arrière-plans décoratifs CSS et badges | Icônes Monochromes Icônes d'interface nécessitant des états hover, active ou dark mode | Clients Anciens Clients de messagerie HTML anciens ou environnements stricts | Illustrations Complexes Grandes illustrations vectorielles avec mise en cache autonome |
Foire Aux Questions
Réponses techniques aux questions courantes sur l'intégration de SVG et CSS.
Collez ou déposez votre SVG dans l'outil Studio ci-dessus. SVG2CSS analyse et désinfecte le balisage dans votre navigateur, puis génère une Data URI CSS encodée en URL (data:image/svg+xml,...) prête à être utilisée dans background-image ou mask-image. La conversion se déroule 100% localement sans envoi sur serveur.
Utilisez l'onglet CSS Mask. En appliquant un SVG comme masque via mask-image et -webkit-mask-image avec background-color: currentColor, la silhouette du SVG sert de pochoir et la couleur de texte de l'élément remplit la forme. Cela permet de teinter l'icône en CSS au survol ou en mode sombre sans toucher au balisage.
Dans la syntaxe d'URL, # indique un identifiant de fragment. Dans une Data URI au sein d'un url() CSS, un # non échappé provoque l'arrêt de l'analyse par le navigateur, laissant le graphique vide. Le remplacer par %23 assure la conformité RFC 3986 pour tous les navigateurs.
La syntaxe de valeurs arbitraires de Tailwind utilise des crochets : bg-[url(...)]. Cependant, ces valeurs ne peuvent pas contenir d'espaces. SVG2CSS remplace les espaces par des tirets bas (_), produisant des classes comme bg-[url('data:image/svg+xml,...')] compatibles avec Tailwind v3 et v4.
Non. SVG2CSS fonctionne selon une architecture sans backend pour la conversion. L'analyse, la désinfection XSS, l'optimisation SVGO et l'encodage s'exécutent intégralement dans votre navigateur via des APIs JavaScript natives.
La propriété standard mask-image est supportée par tous les navigateurs modernes basés sur Chromium, Firefox et Safari. Pour garantir la compatibilité avec iOS WebKit et les versions antérieures de Safari, SVG2CSS génère automatiquement la déclaration standard et sa version préfixée -webkit-mask-image.
Le SVG encodé en URL est généralement le meilleur choix pour les feuilles de style. Base64 ajoute 33% de surcoût textuel et se compresse moins bien avec Gzip/Brotli. Le SVG encodé en URL conserve la structure XML et compresse avec une grande efficacité.
Oui. Les éléments SVG intégrés en ligne dans le HTML peuvent être stylisés directement avec du CSS (fill, stroke, transformations, variables CSS). La conversion présentée ici transforme un fichier SVG en Data URI CSS pour l'utiliser comme arrière-plan ou masque sans alourdir le HTML.
Convertissez le SVG en Data URI avec l'outil Studio et utilisez-le dans background-image: url('data:image/svg+xml,...');. Ajoutez background-size: contain;, background-repeat: no-repeat; et background-position: center; pour contrôler le dimensionnement.
Pour les icônes filaires, assurez-vous que le SVG utilise stroke="#000" et fill="none" avant la conversion. Avec l'onglet CSS Mask (mask-image avec background-color: currentColor), les contours vectoriels servent de pochoir et la propriété CSS color contrôle la teinte.
Définissez une largeur et une hauteur explicites sur l'élément conteneur, puis utilisez background-size: contain; (ou -webkit-mask-size: contain;) pour redimensionner proportionnellement sans déformation. Pour remplir tout le conteneur, utilisez cover.
L'intégration en CSS est idéale pour les petites icônes d'interface fréquemment utilisées (< 10 Ko) afin d'éviter une requête HTTP. Pour les illustrations complexes et lourdes (> 10–15 Ko), conserver le fichier .svg externe permet au CDN et au navigateur de le mettre en cache indépendamment.
Oui. SVG2CSS prend en charge le décodage inverse bidirectionnel. En collant un Data URI (data:image/svg+xml,...), une chaîne Base64 ou une règle CSS background-image complète dans l'outil, le moteur extrait le vecteur, le décode et reconstruit un fichier XML SVG propre prêt au téléchargement.
Oui, particulièrement pour les icônes d'interface. L'intégration de SVG dans le CSS élimine les requêtes HTTP séparées, évitant les décalages de mise en page (CLS) et accélérant le Largest Contentful Paint (LCP). Pour les illustrations volumineuses (>15 Ko), conservez-les en fichiers externes avec mise en cache.
Un arrière-plan SVG paraît flou ou tronqué s'il manque l'attribut viewBox ou possède des dimensions fixes. Pour un rendu vectoriel net sur écran Retina, ajoutez viewBox="0 0 width height" et appliquez background-size: contain; ou 100% 100%; avec background-repeat: no-repeat; en CSS.
Lancer le Studio
Convertissez du code SVG en Data URIs CSS encodées en URL, règles background-image, masques mask-image et classes Tailwind arbitraires — directement dans votre navigateur. Aucun téléversement, zéro latence, sans compte requis.