So nutzt du: SVG ViewBox Skalierer
- Füge ein SVG ein, das eine
viewBox(oder Breite und Höhe) hat. - Gib die neue viewBox-Größe ein, z. B. 24 × 24, um zu einem Icon-Set zu passen.
- Wähle die Genauigkeit und ob Strichstärken ebenfalls skaliert werden sollen.
- Kopiere das Ergebnis. Beide Vorschauen sollten identisch aussehen, nur die Zahlen ändern sich.
Warum Koordinaten skalieren statt transform zu verwenden?
Icon-Sets funktionieren am besten, wenn alle Icons dieselbe viewBox haben (24×24, 20×20, 16×16 …). So liegen sie gleich aus und die Strichstärken wirken einheitlich. Ein Icon in <g transform="scale(0.5)"> zu packen funktioniert optisch, hinterlässt aber krumme Zahlen im Quellcode, skaliert Striche unvorhersehbar und bricht Tools, die Pfaddaten auslesen. Das Neuskalieren der Koordinaten ergibt sauberes SVG, das sich verhält, als wäre es direkt in der neuen Größe gezeichnet worden.
Was wird skaliert?
- Pfaddaten (
d) — alle Befehle, absolut und relativ: M, L, H, V, C, S, Q, T und A. Bei Bögen werden die Radien skaliert, während Rotation und Flags erhalten bleiben. x,y,cx,cy,x1…y2,width,height,rx,ry,rundpoints.- Optional
stroke-widthundfont-size. - Eine viewBox, die nicht bei 0 0 beginnt, wird auf 0 0 verschoben.
Einschränkungen
Elemente mit eigenem transform-Attribut behalten es unverändert, und Prozentangaben oder CSS-basierte Größen werden nicht umgerechnet. Für exakte Ergebnisse solltest du Transformationen vorher in Figma/Illustrator (oder mit SVGOs convertTransform) auflösen. Bei ungleichmäßiger Skalierung (unterschiedliche X- und Y-Faktoren) werden Kreisradien mit dem Durchschnittsfaktor angenähert.
Nächste Schritte: Bereinige das Icon und füge es mit SVG to Webflow in Webflow ein, oder konvertiere es mit SVG to JSX für React.
Auch gesucht als: svg viewbox ändern, svg path skalieren, svg koordinaten skalieren, icons normalisieren, svg 24x24, svg viewbox anpassen, path transform.
Passende Tools zu: SVG ViewBox Skalierer
- SVG zu CSS Konverter — Füge ein SVG ein und erhalte eine kompakte, URL-kodierte Data URI sowie fertiges background-image- und einfärbbares mask-image-CSS.
- Seitenverhältnis-Rechner — Bilder und Videos ohne Verzerrung skalieren: Verhältnis und eine Seite eintragen, um die andere zu erhalten, oder eine Größe eingeben, um ihr Verhältnis zu finden – mit fertigem CSS-Code zum Einfügen.
- Favicon-Generator — Erstelle aus einem Logo, einem Buchstaben oder einem Emoji ein komplettes Favicon-Paket: eine „favicon.ico“-Datei in verschiedenen Größen, ein Apple-Touch-Icon, Android-/PWA-Icons, einen Webflow-Webclip, das Web-Manifest und die HTML-Tags zum Einfügen.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
Häufige Fragen
Wie ändere ich ein SVG von 512×512 auf 24×24?
Sieht mein Icon danach anders aus?
Warum stroke-width unskaliert lassen?
Was ist mit Transformationen?
transform-Attribute bleiben unverändert, und du bekommst eine Warnung. Löse sie in deinem Designtool auf, damit die Ausgabe vollständig sauber ist.