SVG-Resize-Tool

Passen Sie Dimensionen an, ohne das Layout zu zerstören. Nützlich, um Icons an Rastern anzupassen oder Design-Spezifikationen zu erfüllen. Öffnen Sie SVG-Dateien online und beginnen Sie sofort mit der Verarbeitung.

Kein SVG geladen. Datei hierher ziehen zum Starten.

Willkommen beim SVG-Editor

SVG-Datei ziehen, auf "Hochladen"/"Icons" klicken oder Strg/Cmd+V zum Einfügen von SVG-Code verwenden

Mit einem Beispiel-Icon starten

Wählen Sie ein Beispiel unten oder laden Sie Ihr eigenes SVG hoch und bearbeiten Sie es.

Warum unser SVG-Resize-Tool verwenden?

Pixel- oder Prozent-Steuerungen

SVG-Resize unterstützt genaue Breiten- und Höhen-Eingaben sowie prozentuale Skalierung. Dies macht es einfach, Design-Spezifikationen zu erfüllen oder Assets für verschiedene Breakpoints zu skalieren. Sie können Größen mit Design-Tokens oder Grid-Systemen für Konsistenz ausrichten. Numerische Eingaben erleichtern auch das Anpassen an exportierte PNG-Größen.

Seitenverhältnis-Sperre

Die Sperroption behält Proportionen und verhindert Verzerrungen. Das Erhalten des Verhältnisses stellt sicher, dass Icons und Illustrationen visuell ausgewogen bleiben. Dies ist besonders hilfreich für Logos, die nicht gestreckt werden dürfen.

ViewBox-bewusste Ausgabe

Das Tool behält oder korrigiert die viewBox, damit das Asset korrekt in CSS und HTML skaliert. Dies vermeidet unerwartetes Cropping oder Leerraum in der Produktion. Richtige viewBox-Einstellungen reduzieren auch Layout-Verschiebungen beim Austausch von Assets.

Live-Vorschau

SVG-Resize aktualisiert sich sofort mit Zoom- und Hintergrundoptionen. Die Vorschau des Ergebnisses hilft Ihnen, Abstände, Padding und Ausrichtung vor dem Export zu bestätigen. Verwenden Sie einen kontrastierenden Hintergrund, um abirrende Striche oder zusätzliches Padding zu erkennen. Eine Grid-Ansicht kann helfen, optische Ausrichtung zu überprüfen.

Flexibler Export

SVG-Resize lässt Sie das resized SVG herunterladen oder ein PNG in einem Schritt exportieren. Dies ist hilfreich, wenn Sie einen Raster-Fallback für Docs oder Präsentationen benötigen. Halten Sie beide Versionen im selben Ordner für einfache Übergabe. Das Exportieren beider Formate reduziert Hin- und Her während Reviews.

Lokale Verarbeitung

SVG-Resize läuft vollständig in Ihrem Browser, sodass Dateien Ihr Gerät nie verlassen. Dies hält Kunden-Assets privat und beschleunigt Iterationen. Lokale Verarbeitung vermeidet auch Upload-Verzögerungen bei großen Dateien. Es funktioniert gut, wenn Netzwerkrichtlinien Uploads blockieren.

Wie man eine SVG-Größe ändert

1

Fügen Sie Ihre SVG hinzu

Ziehen Sie eine Datei per Drag-and-Drop oder fügen Sie SVG-Markup ein. SVG-Resize lädt die Quelle lokal und behält die ursprüngliche viewBox. Wenn die SVG keine viewBox hat, fügen Sie eine hinzu, bevor Sie die Größe ändern. Öffnen Sie SVG-Dateien online und beginnen Sie sofort mit der Verarbeitung.

2

Setzen Sie Dimensionen

Geben Sie die Zielbreite und -höhe ein oder skalieren Sie proportional. SVG-Resize zeigt eine Live-Vorschau, damit Sie das Aussehen validieren können. Überprüfen Sie Strichbreiten, um sicherzustellen, dass sie noch ausgewogen wirken.

3

Exportieren Sie Ergebnisse

Laden Sie das resized SVG herunter oder exportieren Sie PNG sofort. SVG-Resize hält Dateinamen sauber, damit Assets einfach in der Übergabe zu verfolgen sind. Verwenden Sie ein konsistentes Benennungsmuster wie icon-name-24.svg.

SVG-Resize FAQ

Kann ich SVGs online auf exakte Dimensionen ändern?
Ja. SVG-Resize akzeptiert präzise Pixelwerte für Breite und Höhe, was es einfach macht, Layout-Spezifikationen zu erfüllen. Dies ist hilfreich, wenn Assets strenge Komponentengrößen erfüllen müssen.
Wie halte ich das Seitenverhältnis beim Ändern der SVG-Größe?
Aktivieren Sie die Sperroption in SVG-Resize, um Proportionen zu erhalten. Dies verhindert, dass Icons und Logos gestreckt werden. Es hält auch Kreise davon ab, zu Ovalen zu werden.
Wird das SVG-Resize-Tool die viewBox beibehalten?
SVG-Resize behält die viewBox und aktualisiert sie bei Bedarf, damit die Skalierung im Browser genau bleibt. Korrekte viewBox-Werte verbessern die Responsivität in CSS. Dies ist wichtig, wenn SVGs als Hintergrundbilder verwendet werden.
Kann ich nach dem Ändern PNG exportieren?
Ja. SVG-Resize enthält eine PNG-Exportoption für Dokumentation, Folien oder Raster-only-Tools. PNG-Exporte sind nützlich, wenn eine Plattform SVG nicht unterstützt. Sie sind auch praktisch für schnelle Kunden-Vorschauen.
Wird meine SVG hochgeladen?
Nein. SVG-Resize läuft lokal in Ihrem Browser, sodass Ihre Dateien Ihr Gerät nie verlassen. Dies hält Kunden-Assets vertraulich.
Was ist der Dateigrößen-Limit?
SVG-Resize unterstützt Dateien bis zu 10 MB. Wenn eine SVG sehr komplex ist, erwägen Sie, sie zuerst zu optimieren. Einfachere Pfade rendern auch schneller.
Kann ich für Retina-Assets ändern?
Ja. SVG-Resize funktioniert gut für den Export von 2x- oder 3x-Größen, die Sie dann in CSS herunterskalieren können für extra Schärfe. Dies ist nützlich für Icon-Sets in Design-Systemen. Bei Zweifeln exportieren Sie größer und skalieren herunter, um Weichheit zu vermeiden.
Ist das SVG-Resize-Tool kostenlos zu verwenden ohne Download?
Ja. Das SVG-Resize-Tool ist kostenlos in Ihrem Browser zu verwenden. Keine Downloads oder Installation erforderlich.
Brauche ich ein Konto, um das SVG-Resize-Tool zu verwenden?
Nein. Das SVG-Resize-Tool funktioniert sofort im Browser ohne Anmeldung, und Dateien bleiben lokal.