Kategorie: Entwicklung
SVG-viewBox-Editor
Die viewBox eines SVGs von Hand lesen und neu schreiben
Fügen Sie SVG-Markup ein, laden Sie dessen aktuelle viewBox (oder Breite und Höhe, falls keine vorhanden ist), passen Sie dann Min-x, Min-y, Breite und Höhe an, um die Grafik zuzuschneiden, mit Rand zu versehen oder neu zu verankern, und kopieren Sie das neu geschriebene SVG.
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" rx="16" fill="#0f766e" /> <circle cx="60" cy="60" r="34" fill="#f4d35e" /> </svg>
Nichts wird hochgeladen. Das Markup wird ausschließlich auf dieser Seite geparst und neu geschrieben.
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Das viewBox-Attribut bildet das interne Koordinatensystem eines SVGs auf den Raum ab, in dem es dargestellt wird. Es zu ändern ist der Weg, um in einen Ausschnitt eines Icons hineinzuzoomen, Rand um es herum hinzuzufügen oder seinen Ursprung zu verschieben, ohne einen einzigen Pfad anzufassen. Vier Zahlen von Hand in einem Texteditor zu bearbeiten ist umständlich und fehleranfällig; dieses Werkzeug parst das eingefügte SVG, füllt die vier viewBox-Felder mit den gefundenen Werten vor und schreibt das Markup live neu, während Sie sie ändern, mit einer Vorschau, damit Sie den Zuschnitt vor dem Kopieren sehen.
So funktioniert es
- Fügen Sie SVG-Markup mit einem <svg>-Tag ein.
- Klicken Sie auf "Aktuelles viewBox laden", um die vier Felder vorzufüllen, oder tragen Sie eigene Werte für Min-x, Min-y, Breite und Höhe ein.
- Prüfen Sie die Vorschau und kopieren Sie dann das neu geschriebene SVG-Markup.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Wird mein SVG irgendwohin hochgeladen?
- Nein. Das Markup wird mit einfachem String-Abgleich in Ihrem Browser-Tab geparst und neu geschrieben; es wird nichts an einen Server gesendet.
- Was passiert mit den Attributen width und height?
- Sie bleiben unverändert. Das Ändern der viewBox skaliert das, was innerhalb des bestehenden Viewports gezeichnet wird, neu – genauso wie es ein Browser anwendet –, statt das Element selbst in der Größe zu verändern.
- Warum wirkt die Vorschau manchmal leer?
- Eine Breite oder Höhe von null oder eine viewBox, die sich nicht mit der Grafik überschneidet, schneidet sie auf nichts zusammen. Vergrößern Sie den Bereich oder prüfen Sie die Werte für Min-x/Min-y.