Softonic

SVG skalieren

Schritt 1 / 2
Weiter

SVG ist ein Vektorformat, daher ist es auflösungsunabhängig und bleibt in jeder Größe gestochen scharf. Ein SVG zu “skalieren” rastert es nicht und verändert die Zeichnung nicht: Dieses Werkzeug setzt einfach eine neue width und height in Pixel am Wurzelelement <svg>, also seine deklarierte Anzeigegröße. Der viewBox, die Pfade und jede Koordinate bleiben genau so, wie sie sind, sodass die Zeichnung ihre Proportionen behält und keine Qualität verliert. Fügen Sie Ihr Markup ein, legen Sie Breite und Höhe fest, sehen Sie das Ergebnis in der Vorschau und kopieren oder laden Sie es herunter.

So skalieren Sie ein SVG

  1. 1

    SVG einfügen

    Fügen Sie das vollständige Markup `<svg>...</svg>` in das Textfeld ein.

  2. 2

    Breite und Höhe festlegen

    Geben Sie die neue Breite und Höhe in Pixel ein.

  3. 3

    Live-Vorschau

    Das Werkzeug schreibt `width` und `height` am Wurzel-`<svg>` neu (oder fügt sie hinzu, falls sie fehlen) und zeigt das Ergebnis sofort an.

  4. 4

    Kopieren oder herunterladen

    Kopieren Sie das aktualisierte Markup in die Zwischenablage oder speichern Sie es als `.svg`-Datei.

Anzeigegröße vs. viewBox

Ein SVG hat eine Anzeigegröße (width/height) und ein eigenes Koordinatensystem (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

Dieses SVG ist auf dem Bildschirm 200 x 200 Pixel groß, während seine internen Koordinaten von 0 bis 100 reichen. Der Kreis mit r="40" füllt etwa 80 % des viewBox aus und wird daher rund 160 px breit dargestellt. Dieses Werkzeug ändert nur width und height, also die deklarierte Anzeigegröße. Es rührt weder den viewBox noch die Koordinaten an, und genau deshalb behält die Zeichnung ihre Proportionen und bleibt scharf: Sie weisen den Browser an, dasselbe Bild in einer anderen Größe zu zeichnen, nicht es neu zu zeichnen.

Warum ein SVG nach dem Ändern der Größe gleich aussehen kann

Wird das SVG mit etwas wie <img src="icon.svg" width="500"> eingebunden oder per CSS dimensioniert, steuert die umgebende Seite die Anzeigegröße und überschreibt die width/height in der Datei. Ändern Sie in diesem Fall die Größe dort, wo das SVG verwendet wird (das <img>, das CSS oder der Container), nicht nur im Markup.

Konturen und Text bleiben scharf

Da nichts gerastert wird, bleibt Text echter Vektortext und Linien bleiben in jeder Größe glatt. Konturbreiten sind im Koordinatensystem definiert und skalieren daher zusammen mit der Zeichnung. Damit eine Kontur unabhängig von der Größe dieselbe visuelle Stärke behält, fügen Sie vector-effect="non-scaling-stroke" an diesem Element in Ihrer Quelle hinzu, bevor Sie skalieren.

Halten Sie das Markup sauber

SVGs, die aus Figma, Illustrator oder Sketch exportiert werden, tragen oft unnötigen Ballast: Editor-Namensräume (sodipodi:, inkscape:), versteckte Metadaten und ungenutzte <defs>. Dieses Werkzeug lässt Ihr Markup abgesehen von der Größe unverändert. Um den Ballast zu entfernen, schicken Sie die Datei vor oder nach dem Skalieren durch einen Optimierer wie SVGO.

Häufig gestellte Fragen

Nein. Es setzt nur width und height am Wurzel-<svg>. Der viewBox, die Pfade und jede Koordinate bleiben unangetastet, sodass die Grafik ihre exakten Proportionen behält.

Meist steuert die Seite die Größe: eine Breite am <img>, eine CSS-Regel oder ein Container überschreiben die eigenen Abmessungen der Datei. Ändern Sie die Größe dort, wo das SVG verwendet wird, nicht nur im Markup.

Ja. SVG ist ein Vektorformat, daher wird nichts gerastert und Text wie Konturen bleiben in jeder Größe scharf. Wenn die Quelldatei Text bereits in Pfade umgewandelt hat, skaliert er wie jede andere Form, und bleibt scharf.

Ja. Nur width und height werden geändert; <animate>, <script>, Event-Handler und CSS innerhalb des SVG bleiben unberührt.

Das Markup wird an unseren Server gesendet, um die skalierte Vorschau zu erzeugen, und nach der Anfrage nicht gespeichert. Es wird nicht aufbewahrt oder weitergegeben.

Verwandte Tools

Material Design Farbpicker

Durchsuchen Sie die Material Design Farbpalette. Kopieren Sie jeden Farbton (50 bis A700) als HEX, RGB oder HSL mit einem Klick.

GIF komprimieren

Reduziere die Größe animierter GIFs direkt im Browser, indem du Abmessungen verkleinerst, weniger Frames behältst und die Kodierungsqualität anpasst. Vorschau vor dem Download inklusive.

Vision Board erstellen

Verwandeln Sie Ihre Ziele in ein visuelles Board: Bilder hochladen, persönlichen Titel und Bildunterschriften ergänzen, Farben und Layout wählen und ein druckbares PNG herunterladen. Alles bleibt in Ihrem Browser.

Flaggen-Generator

Entwirf im Browser eine einfache eigene Flagge im Format 3:2 mit sechs Layouts, Farben, Text und einem Symbol. Lade SVG oder PNG herunter oder öffne den Druckdialog des Browsers.

Kontaktbogen erstellen

Ordnen Sie Fotos auf druckbaren A4- oder Letter-Kontaktbögen an, ergänzen Sie Beschriftungen und laden Sie die Seiten als JPEG oder PDF herunter.

Kreuzstichvorlagen erstellen

Wandeln Sie JPEG-, PNG- oder WebP-Bilder in druckbare Kreuzstichvorlagen mit 10–150 Stichen, 2–40 eigenen Farben, Symbolen, exakten Zählwerten und Stoffmaßen um.

Tool in anderen Sprachen verfügbar