SVG ViewBox Rechner
Berechnet ViewBox und Seitenverhältnis für responsive SVGs.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der SVG ViewBox Rechner?
Der SVG ViewBox Rechner berechnet das Seitenverhältnis und passende ViewBox-Werte für ein SVG. Die ViewBox legt fest, welcher Ausschnitt des Koordinatensystems dargestellt wird, und ist der Schlüssel für skalierbare, responsive Grafiken. Mit dem richtigen Verhältnis bleibt deine Grafik bei jeder Größe unverzerrt.
Gib Breite und Höhe deiner Grafik ein und das Tool liefert die ViewBox sowie das gekürzte Seitenverhältnis. Die Berechnung läuft direkt im Browser, es werden keine Daten gesendet. So setzt du SVGs mit korrektem preserveAspectRatio und vermeidest Verzerrungen beim Skalieren in responsiven Layouts.
Beispiele
- Eine Grafik 800 x 600 ergibt die ViewBox 0 0 800 600 und das Verhältnis 4:3.
- Ein Icon 24 x 24 hat die ViewBox 0 0 24 24 und das Verhältnis 1:1.
- Ein Banner 1920 x 1080 ergibt das Verhältnis 16:9 mit ViewBox 0 0 1920 1080.
Häufige Fragen zum SVG ViewBox Rechner
Was macht die ViewBox genau?
Die ViewBox definiert mit vier Werten (min-x, min-y, Breite, Höhe) den sichtbaren Ausschnitt im SVG-Koordinatensystem. Zusammen mit width und height steuert sie die Skalierung.
Warum bleibt ein SVG mit ViewBox unverzerrt?
Solange das Seitenverhältnis der ViewBox zur Darstellungsgröße passt und preserveAspectRatio aktiv ist, skaliert das SVG proportional ohne Verzerrung.
Brauche ich width und height überhaupt?
Mit ViewBox allein skaliert das SVG flexibel mit dem Container. Feste width und height legen eine Standardgröße fest, die per CSS überschrieben werden kann.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
