SVG skalieren
☞ läuft komplett in deinem Browser — nichts wird hochgeladenSVG hier ablegen
oder klicken zum Auswählen — nur SVG
Vorschau
SVG skalieren
Gib einem SVG neue Breite und Höhe — oder entferne beide, damit es mit seinem Container mitwächst. Die Grafik selbst wird nie angerührt.
oder klicken zum Auswählen — nur SVG
Vorschau
nichts wird neu gezeichnet
Ein Rasterbild muss in der neuen Größe neu gezeichnet werden, und dabei gehen Details verloren oder werden erfunden. Ein SVG trägt stattdessen die Zeichenanweisungen, Skalieren ist also nur eine Notiz darüber, wie groß gerendert werden soll. Jeder Pfad, jede Farbe und jeder Verlauf bleibt exakt wie er war.
Diese Notiz ist das Paar aus width und height. Die viewBox darunter definiert das interne Koordinatensystem und bleibt unangetastet — genau deshalb skalieren die Formen, statt beschnitten zu werden.
drei Schritte
Wähle eine .svg-Datei — sie bleibt auf deinem Gerät.
Tipp eine Breite ein, wähle einen Prozentwert oder mach es responsiv.
Du bekommst dieselbe Grafik in der gewünschten Größe.
kurze Antworten
Nein. Es gibt nichts, was unscharf werden könnte — die Datei beschreibt Formen, keine Pixel, und wird in jeder gewünschten Größe frisch gezeichnet. Das gilt bei 25 % genauso wie bei 400 %.
Es macht das SVG responsiv. Ohne diese Attribute nimmt der Browser die viewBox für das Seitenverhältnis und lässt das Element seinen Container füllen, sodass du die Größe per CSS bestimmst. Für Icons in einer Komponentenbibliothek ist das die übliche Wahl.
In dem Fall wird eine für dich ergänzt. Ohne viewBox behandelt ein SVG seine Koordinaten als bloße Pixel, eine geänderte Breite würde die Zeichnung also beschneiden oder mit Leerraum auffüllen statt sie zu skalieren. Die ergänzte viewBox entspricht der Originalgröße, es verschiebt sich also nichts.
Kaum — es ändern sich nur zwei Zahlen. Willst du eine kleinere Datei, schick sie durch den SVG-Optimierer, der Editor-Metadaten und übergenaue Koordinaten entfernt.
Nein. Die Datei wird in deinem Browser geparst und neu geschrieben.