SVG-Code für Lesbarkeit Formatieren
SVG-Dateien von Design-Tools werden oft in eine unlesbare Zeile minifiziert. Dieser Formatierer fügt korrekte Einrückung und Zeilenumbrüche hinzu, um SVG-Code menschenlesbar zu machen. Nützlich zum Debuggen, Bearbeiten und Verstehen, wie ein SVG aufgebaut ist. Die gesamte Verarbeitung erfolgt in Ihrem Browser.
So Verwenden Sie Es
- Fügen Sie minifizierten SVG-Code in das Textfeld ein oder laden Sie eine SVG-Datei hoch
- Das Tool wechselt automatisch zum Formatieren-Tab
- Klicken Sie auf Verschönern, um den SVG-Code zu formatieren
- Die formatierte Ausgabe zeigt korrekte Einrückung und Struktur
- Kopieren Sie den formatierten Code oder laden Sie die Datei herunter
Formatierungs-Operationen
Der Formatieren-Tab bietet fünf Operationen:
- Verschönern: fügt Einrückung und Zeilenumbrüche für menschenlesbares SVG hinzu
- Minifizieren: entfernt alle Leerzeichen für die kleinste mögliche Ausgabe
- Inline CSS: verschiebt Stilregeln in Inline-Attribute für E-Mail-HTML-Kompatibilität
- Absolute Pfade: konvertiert relative Pfadbefehle in absolute Koordinaten
- Metadaten Entfernen: entfernt editor-spezifische Attribute und Metadaten-Elemente
Häufige Anwendungsfälle
SVG-Rendering-Probleme debuggen
Wenn ein SVG nicht korrekt gerendert wird, macht formatierter Code es einfacher, strukturelle Probleme, falsche Attribute oder verschachtelte Elemente zu finden, die Probleme verursachen.
SVGs von Hand bearbeiten
Verschönerter SVG-Code ist lesbar genug, um direkt bearbeitet zu werden. Ändern Sie Farben, passen Sie Pfade an, modifizieren Sie Text oder restrukturieren Sie Elemente, ohne ein Design-Tool zu öffnen.
SVG-Struktur lernen
Formatierte SVGs offenbaren die Dokumentstruktur und erleichtern das Verständnis, wie Pfade, Verläufe, Filter und andere SVG-Features zusammenarbeiten.