SVG-Formatierer: SVG-Code Online Formatieren

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

1. Fügen Sie minifizierten SVG-Code in das Textfeld ein oder laden Sie eine SVG-Datei hoch
2. Das Tool wechselt automatisch zum Formatieren-Tab
3. Klicken Sie auf Verschönern, um den SVG-Code zu formatieren
4. Die formatierte Ausgabe zeigt korrekte Einrückung und Struktur
5. 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.