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.

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.

SVG Werkzeuge

Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.

Weitere Werkzeugkategorien entdecken

Minimieren

Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.

Verschönern

Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.

Aufheben

Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.

Konvertierung

Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.

CSS-Präprozessoren

Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.

JSON Werkzeuge

Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.

DevOps und Infrastruktur

Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.

CI/CD

GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.

Protokolle und Beobachtbarkeit

Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.

Kubernetes

Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.

Netzwerk / IP

CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.

Sicherheit und Token

JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.

API & Schemata

OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.

Codierung

Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.

Entwickler-Dienstprogramme

Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.

Text & Markdown

Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.

KI & LLM

Token-Zählung, Kostenschätzung und Kontextfenster — 100 % im Browser.

Serialisierung

Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.