SVG drehen

SVG drehen & spiegeln

Dreh ein SVG in 90°-Schritten oder spiegle es in beide Richtungen. Die Zeichnung wird in ein einziges transform gepackt, jeder Pfad bleibt also genau so, wie der Designer ihn hinterlassen hat.

SVG drehen

☞ läuft komplett in deinem Browser — nichts wird hochgeladen

SVG hier ablegen

oder klicken zum Auswählen — nur SVG

eine Zeile transform

Was beim Drehen eines SVG passiert

Ein Foto zu drehen heißt, jedes Pixel neu abzutasten. Ein SVG zu drehen heißt, ein transform zu schreiben: Die Zeichnung landet in einer Gruppe, die um die Fläche gedreht wird, und die Fläche selbst — viewBox samt width und height — tauscht ihre beiden Seiten, wenn die Drehung 90° oder 270° beträgt. Keine einzige Koordinate in deinen Pfaden wird neu geschrieben.

Deshalb ist das Ergebnis auch exakt. Keine Interpolation, keine weichen Kanten, kein Abdriften nach vier Drehungen — viermal eine Vierteldrehung gibt dir die Originaldatei zurück, Byte für Byte.

drei Schritte

So drehst oder spiegelst du ein SVG

01

SVG ablegen

Wähle eine .svg-Datei — sie bleibt auf deinem Gerät.

02

Drehen oder spiegeln

In 90°-Schritten drehen, an einer Achse spiegeln, beides kombinieren.

03

Herunterladen

Dieselbe Grafik, neue Ausrichtung.

kurze Antworten

FAQ zum Drehen und Spiegeln von SVG

Kann ich um einen beliebigen Winkel drehen?

Hier nicht. Bei 90°-Schritten passt die Fläche weiterhin exakt zur Zeichnung; bei 37° wäre das nicht so, du bräuchtest Rand, eine größere viewBox und eine Entscheidung, was mit den Ecken passiert. 90°-Schritte decken die echten Fälle ab — ein Icon drehen, einen seitlich exportierten Entwurf geraderücken — und das Ergebnis ist exakt vorhersagbar.

Verändert sich die Datei stark?

Kaum. Es kommt ein Gruppenelement mit einem transform-Attribut hinzu, und viewBox samt Größenangaben werden aktualisiert. Pfade, Verläufe, Klassen und IDs bleiben unberührt.

Warum ändert das Spiegeln nach dem Drehen die Richtung?

Tut es nicht — es folgt dem, was du siehst. Waagerecht spiegelt auf dem Bildschirm immer links nach rechts, was nach einer Vierteldrehung eben einer anderen Achse in der Originaldatei entspricht. Genau dieses Verhalten erwartet man von einem Bildeditor.

Was passiert mit dem title meines SVG?

title, desc, style, metadata und defs bleiben auf der obersten Ebene, wo sie hingehören. Nur die Zeichnung selbst wandert in die gedrehte Gruppe, Screenreader kündigen das Bild also weiterhin gleich an.

Meine Datei hatte keine viewBox

Dann wird eine ergänzt, passend zu width und height der Datei. Ohne viewBox gibt es keine Fläche, die ihre Seiten tauschen kann, und eine Vierteldrehung würde die Zeichnung aus dem sichtbaren Bereich schieben.

Wird meine Datei hochgeladen?

Nein. Die Datei wird in deinem Browser geparst und neu geschrieben.