SVG zu CSS Konverter
Konvertiert SVG-Code in CSS background-image Daten-URI. Unterstützt URL-kodierte und Base64-Formate.
Über dieses Tool
SVG to CSS Converter transformiert SVG-Code in das Daten-URI-Format zur Verwendung in CSS-Eigenschaften background-image und eliminiert die Notwendigkeit für separate Bilddateien oder HTTP-Anfragen. Durch das direkte Einbetten von SVG-Daten in Ihren Stylesheets reduzieren Sie externe Abhängigkeiten, verbessern die Seitenladegeschwindigkeit und vereinfachen die Asset-Verwaltung. Das Tool unterstützt sowohl URL-kodierte als auch Base64-Kodierungsformate, von denen jedes je nach Ihren Leistungsprioritäten und Lesbarkeitsvorlieben unterschiedliche Vorteile bietet.
Um SVG in CSS umzuwandeln, fügen Sie Ihren SVG-Code in den Eingabebereich ein, wählen Sie Ihre bevorzugte Kodierungsmethode und klicken Sie auf Konvertieren. Das URL-kodierte Format erzeugt eine kürzere Ausgabe, die leichter zu lesen und zu debuggen ist, während Base64 eine kompaktere Darstellung erzeugt, die in gzip besser komprimiert wird. Das Tool zeigt sofort die CSS-Ausgabe und eine Live-Vorschau des gerenderten SVG an, mit der Sie die Konvertierung vor dem Kopieren in Ihre Stylesheets überprüfen können.
Dieser Ansatz ist besonders nützlich für kleine Symbole, Logos und einfache Grafiken, die in Webanwendungen eingebettet sind. Indem Sie SVG-Daten im CSS speichern, vermeiden Sie Cache-Invalidierungsprobleme, reduzieren die Gesamtzahl der Netzwerkanfragen und können sogar SVG-Eigenschaften über CSS-Pseudoklassen wie :hover und :active manipulieren. Erwägen Sie, komplexe SVGs als separate Dateien zu speichern, um eine bessere Wartbarkeit zu gewährleisten, aber Inline-Daten-URIs funktionieren gut für Komponenten, die sich selten ändern.
Häufig gestellte Fragen
Code-Implementierung
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.