About Compare All Tools

SVG Rotate & Flip

Rotate and flip your SVG without touching a single path coordinate.

SVG orientation control

Rotate and flip SVG — no path rewriting, no rasterising.

Paste SVG code, upload a file or try the built-in sample. Choose a rotation angle, toggle a horizontal or vertical flip, then copy or download the transformed SVG. Everything runs locally — no upload, no quality loss, output is real editable SVG markup.

Local only SVG output Rotate & flip viewBox aware
Drop an SVG file here or paste SVG markup into the input editor below.
Rotation—
Flip—
ViewBox—
Output size—
Status—
Preview

Original vs transformed SVG preview

Original SVG No SVG

Paste SVG markup or try the sample to preview the source.

Transformed SVG Waiting

Apply Transform to preview the result.

Processed locally viewBox: — Scripts: — Events: — External assets: — Output: —
Input

SVG markup

Paste a complete SVG document or inline SVG element. The viewBox is read automatically from the source.

Output

Transformed SVG

The transformed SVG markup appears here after applying the rotation and flip settings. Copy or download using the buttons above.

How It Works

SVG Rotate & Flip changes the orientation of your SVG artwork without rewriting a single path coordinate. It reads the viewBox from the source SVG — or generates one from the width and height attributes if none is present — and wraps the existing content in a single SVG <g> element with a transform attribute. For rotations, the transform is computed so the artwork fits exactly inside a corrected viewBox: rotating 90° or 270° swaps the width and height, and rotating 180° keeps the same dimensions. Flipping applies a scale(-1, 1) for horizontal or scale(1, -1) for vertical, with a matching translate to keep all coordinates positive. Combining a rotation with a flip produces a single compound transform on the <g> wrapper. The root SVG width and height attributes are also updated to match the new dimensions. Everything runs locally in your browser using DOMParser and XMLSerializer. Your file is never uploaded and the output is always editable SVG markup.

Use Cases

  • Correcting the orientation of an SVG icon exported from a design tool in the wrong direction before adding it to a component library
  • Rotating a landscape SVG illustration 90 degrees to produce a portrait layout for a vertical banner or card
  • Flipping a directional arrow or chevron icon horizontally to create a back/previous variant without duplicating the source file
  • Combining 180-degree rotation with a vertical flip to produce all four symmetric orientations of a decorative element
  • Preparing an SVG logo in both standard and mirrored versions for localised left-to-right and right-to-left layouts

FAQ

What does SVG Rotate & Flip actually change in the file?

SVG Rotate & Flip adds a transform attribute to a <g> element that wraps the existing SVG content. It also updates the viewBox and, when present, the root width and height attributes to match the new dimensions. Path coordinates, shapes, gradients, filters, and all other elements inside the SVG are left exactly as they were. No content is deleted and no coordinates are rewritten.

Does SVG Rotate & Flip upload my file?

No. Every operation runs locally in your browser using DOMParser and XMLSerializer. Your SVG file is never sent to any server and all output stays on your device.

Why does rotating 90° or 270° change the output dimensions?

A landscape SVG — say 480 × 320 — becomes portrait after a 90° or 270° rotation: 320 × 480. The width and height attributes and the viewBox are updated automatically to reflect this. The artwork fits inside the new canvas exactly with no cropping and no extra whitespace.

Can I combine rotation and flip?

Yes. You can select any of the four rotation angles (0°, 90°, 180°, 270°) and independently toggle Flip Horizontal and Flip Vertical. All selected operations are merged into a single transform on the <g> wrapper in the output. For example, Rotate 90° CW with Flip Horizontal produces the equivalent of a 90° counter-clockwise rotation.

Will the output SVG render correctly when opened standalone?

Yes. The output is a self-contained SVG file. The viewBox is updated to match the rotated dimensions, and the transform wraps the entire artwork. Open it in a browser, embed it in HTML, or paste it into a design tool — it renders correctly at the new orientation.

What happens if my SVG has no viewBox attribute?

SVG Rotate & Flip reads the width and height attributes to generate the coordinate space. The transform is then computed from those dimensions and written into the output along with a proper viewBox attribute. The signal strip shows 'viewBox: generated' so you can see when this happened.

Does SVG Rotate & Flip modify gradients, masks or filters?

No. Elements inside <defs> — including gradients, masks, filters, clip paths and patterns — stay at the SVG root level and are not wrapped in the transform group. Only renderable content is moved inside the <g transform> wrapper, so all references remain valid and render correctly.