Comment utiliser : Convertisseur SVG vers CSS
- Collez votre code SVG, ouvrez un fichier
.svgou chargez l’exemple. - Laissez Nettoyer le SVG activé pour supprimer les commentaires, métadonnées et attributs de l’éditeur, puis choisissez URL-encodé ou Base64.
- Vérifiez les deux aperçus : l’image de fond classique et la version masque d’une seule couleur.
- Copiez la data URI ou la règle CSS complète et collez-la dans votre feuille de style.
Qu’est-ce qu’une data URI SVG ?
Une data URI intègre un fichier directement dans votre CSS au lieu de le référencer : background-image: url("data:image/svg+xml,…"). Pour les petites icônes, séparateurs, motifs et cases personnalisées, cela évite une requête HTTP, limite le risque d’images qui s’affichent avec retard et garde le fichier à côté des styles qui l’utilisent.
Encodage URL ou Base64
Le SVG est du texte : il n’a pas besoin de Base64. Le Base64 alourdit tout fichier d’environ 33 % et le transforme en bloc illisible, qui se compresse mal avec gzip ou Brotli. Un SVG encodé en URL reste proche de sa taille d’origine et reste lisible. Seuls quelques caractères doivent être échappés :
| Caractère | Encodé | Pourquoi |
|---|---|---|
# | %23 | Il débute sinon un fragment d’URL : des couleurs comme #fff cassent l’image. |
% | %25 | Le caractère d’échappement lui-même. |
< > | %3C %3E | Recommandé pour la compatibilité avec les analyseurs stricts. |
" | ' ou %22 | Les guillemets des attributs sont remplacés par des apostrophes pour que le CSS puisse entourer l’URI de guillemets doubles. |
N’utilisez le Base64 que si un outil ou un framework refuse les autres formats. Les cartes de taille sous l’aperçu affichent les deux résultats pour que vous puissiez les comparer.
Icônes recolorables avec mask-image
Un SVG utilisé comme image de fond est rendu de manière isolée : le CSS de la page ne peut pas modifier ses remplissages, et currentColor à l’intérieur ne suit pas la couleur de votre texte. L’extrait mask-image résout ce problème en utilisant le SVG uniquement comme pochoir, puis en le peignant avec background-color: currentColor. Une seule icône fonctionne ainsi dans n’importe quelle couleur, au survol ou en mode sombre. La ligne -webkit-mask reste nécessaire pour certains navigateurs.
Nettoyage et limites
Le nettoyage supprime la déclaration XML, les commentaires, les balises <metadata>, <title> (inutiles dans un fond), les attributs Inkscape, Sodipodi et Sketch, ainsi que les espaces superflus. Il ajoute aussi l’attribut xmlns requis s’il manque : sans lui, le navigateur n’affiche pas l’image. N’intégrez que de petits SVG (quelques Ko), car les grandes data URI alourdissent chaque téléchargement CSS et ne peuvent pas être mises en cache séparément. Pour les graphiques complexes, référencez plutôt le fichier. Besoin d’un composant React plutôt que de CSS ? Utilisez SVG vers JSX ; pour les images matricielles, consultez Image vers Base64.
Utilisation dans Webflow
Le panneau Arrière-plans de Webflow attend une image importée. Collez donc la règle générée dans une balise <style>, dans un élément Embed ou dans le code personnalisé de la page ou du site, puis donnez à votre élément la classe correspondante (par exemple icon).
Aussi recherché comme : svg vers css, data uri svg, svg vers data url, encoder svg url, image de fond svg, svg vers base64, mask-image, svg inline css.
Outils complémentaires : Convertisseur SVG vers CSS
- Encodage / décodage URL — Encodez du texte en pourcentage pour l'utiliser en toute sécurité dans une URL, décodez les chaînes encodées pour retrouver un texte lisible, et décomposez n'importe quelle URL en ses parties et ses paramètres de requête.
- Encodage / Décodage Base64 — Convertissez du texte au format Base64 et inversement, avec une prise en charge complète de l'UTF-8 (accents, emojis) ; passez au format Base64 compatible URL, ou glissez-déposez un fichier pour obtenir sa chaîne Base64 ou son URI de données.
- Minifieur CSS — Collez une feuille de style pour la réduire instantanément.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
Questions fréquentes
Pourquoi ma data URI SVG ne s’affiche-t-elle pas ?
# non échappé (dans des couleurs comme #fff), un attribut xmlns="http://www.w3.org/2000/svg" manquant, ou des guillemets mal équilibrés entre le url("…") du CSS et les attributs du SVG. Cet outil corrige les trois.Faut-il préférer l’encodage URL ou le Base64 pour un SVG en CSS ?
Peut-on changer la couleur d’une image de fond SVG avec CSS ?
mask-image et définissez background-color, que vous pouvez changer au survol ou en mode sombre.Faut-il inclure charset=utf-8 dans la data URI ?
data:image/svg+xml, suffit.