Größe ändern SVG Online – Breite, Höhe und ViewBox Fixer

Überprüfen Sie Breite, Höhe und ViewBox und ändern Sie dann die Größe der SVG-Exporte, ohne die reaktionsfähige Skalierung zu beeinträchtigen. Nützlich für knifflige Design-Übergabedateien.

0 chars · 0 B

Breite

Höhe

Verhältnis beibehalten

Stellen Sie sicher, dass viewBox

Teilen Sie dieses Tool:

SVG Eingang

Größe geändert SVG

Dimensionsaktualisierungen erfolgen lokal in Ihrem Browser.

Laden…

Größe ändern SVG – Abmessungen und ViewBox-Playbook

Beheben Sie umständliche SVG-Exporte, indem Sie Breite, Höhe und ViewBox überprüfen und dann die Abmessungen mit vorhersehbarer, reaktionsfähiger Skalierung neu schreiben.

Hinweise des Entwicklers

• Verwendet zuerst die vorhandene viewBox, um das Seitenverhältnis beizubehalten. • Wenn viewBox fehlt, kann es aus den aktuellen Abmessungen abgeleitet werden. • Am besten geeignet für normale Exporte mit numerischen Breiten-/Höhenwerten. • Koppeln Sie es mit „validate-svg“, wenn Sie auch Titel-/Abstiegsführung wünschen.

Optionen

Breite

Zielbreitenattribut. Leer lassen, um die aktuelle Breite beizubehalten (oder aus Höhe + Seitenverhältnis abzuleiten).

Höhe

Zielhöhenattribut. Lassen Sie das Feld leer, um die aktuelle Höhe beizubehalten (oder von Breite + Seitenverhältnis abzuleiten).

Verhältnis beibehalten

Wenn eine Dimension festgelegt ist, wird die andere anhand des vorhandenen Seitenverhältnisses/der ViewBox berechnet.

Stellen Sie sicher, dass viewBox

Wenn viewBox fehlt, wird eine von der aktuellen Breite/Höhe abgeleitet, damit die Skalierung vorhersehbar bleibt.

Wenn Teams diese Route wählen

• Beheben Sie SVGs, die in responsiven Layouts seltsam skalieren. • Normalisieren Sie übergroße Designexporte vor dem Versand. • Fügen Sie viewBox zu alten Assets hinzu, die nur Breite/Höhe deklarieren. • Generieren Sie ein kleineres Inline-Badge, ohne es erneut aus Figma zu exportieren.

Ausgearbeitete Beispiele

Nur mit festen Abmessungen exportieren

Beispieleingabe

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="144" class="promo-badge">
  <rect width="480" height="144" rx="36" fill="#f97316"/>
  <text x="76" y="84" font-size="36" font-weight="700" fill="#fff">FastMinify</text>
</svg>

Ausgabe

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" class="promo-badge" viewBox="0 0 480 144"><rect width="480" height="144" rx="36" fill="#f97316"/><text x="76" y="84" font-size="36" font-weight="700" fill="#fff">FastMinify</text></svg>

Behalten Sie das Verhältnis von viewBox bei

Beispieleingabe

<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10"/></svg>

Ausgabe

Legen Sie nur die Breite fest und lassen Sie den Seitenverhältnismodus aktiviert, um die passende Höhe automatisch abzuleiten.

Navigieren Sie durch verwandte SVG-Tools

Benötigen Sie eine codierte CSS-Ausgabe? Versuchen Sie SVG zu Daten URI. Überprüfen Sie die Barrierefreiheit mit validate SVG oder durchsuchen Sie den SVG Tools Hub.

Größenänderung SVG FAQ

Abmessungen und reaktionsfähige Skalierung

Warum ist viewBox wichtig?

Es definiert das interne Koordinatensystem, das eine vorhersehbare Skalierung von SVG in responsiven Layouts ermöglicht.

Kann daraus auf fehlende Dimensionen geschlossen werden?

Es kann auf eine fehlende Breite oder Höhe geschlossen werden, wenn bereits ein gültiges Verhältnis vorhanden ist.

Wird es jeden fehlerhaften Export reparieren?

Es verarbeitet gängige Breiten-/Höhen-/ViewBox-Fälle, ungewöhnliche Transformationen müssen jedoch möglicherweise noch manuell überprüft werden.

Weitere SVG-Tools

SVG minimieren SVG optimieren SVG Betrachter SVG zu Daten URI Verschönern SVG SVG aufheben SVG zu JSXGröße ändern SVGSVG validieren

Suchen Sie nach Konvertern, Encodern, Formatierern und Minifiern an einem Ort? Hub für Entwicklertools Öffnen Sie den kuratierten Entwicklertools-Katalog.