Convertisseur SVG vers CSS
Convertit le code SVG en URI de données CSS background-image. Prend en charge les formats URL encodé et Base64.
À propos de cet outil
SVG to CSS Converter transforme le code SVG en format de données URI pour une utilisation dans les propriétés CSS background-image, éliminant le besoin de fichiers image séparés ou de requêtes HTTP. En incorporant les données SVG directement dans vos feuilles de style, vous réduisez les dépendances externes, améliorez les performances de chargement des pages et simplifiez la gestion des ressources. L'outil supporte à la fois les formats d'encodage URL et Base64, chacun ayant des avantages distincts selon vos priorités de performance et vos préférences de lisibilité.
Pour convertir SVG en CSS, collez votre code SVG dans la zone d'entrée, sélectionnez votre méthode d'encodage préférée et cliquez sur Convertir. Le format codé par URL produit une sortie plus courte qui est plus facile à lire et déboguer, tandis que Base64 crée une représentation plus compacte qui se compresse mieux en gzip. L'outil affiche instantanément la sortie CSS et un aperçu en direct du SVG rendu, vous aidant à vérifier la conversion avant de la copier dans vos feuilles de style.
Cette approche est particulièrement utile pour les petites icônes, logos et graphiques simples intégrés dans les applications web. En gardant les données SVG dans CSS, vous évitez les problèmes d'invalidation du cache, réduisez les requêtes réseau totales et pouvez même manipuler les propriétés SVG via des pseudo-classes CSS comme :hover et :active. Envisagez de stocker les SVG complexes sous forme de fichiers séparés pour une meilleure maintenabilité, mais les URIs de données en ligne fonctionnent bien pour les composants qui changent rarement.
Questions Fréquentes
Implémentation du Code
import base64
from urllib.parse import quote
def svg_to_css_url_encoded(svg: str) -> str:
encoded = quote(svg, safe="")
return f'background-image: url("data:image/svg+xml,{encoded}");'
def svg_to_css_base64(svg: str) -> str:
b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
return f'background-image: url("data:image/svg+xml;base64,{b64}");'
svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'
print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.