logoredraws.com

How to Rotate an SVG Logo

Rotate an SVG logo in a vector editor, in the SVG code with a rotate transform, or with CSS. Includes viewBox fixes, code examples and checks.

Published

Contents
  1. Terms You Need First
  2. Choose a Method
  3. Method 1: Rotate in a Vector Editor
  4. Method 2: Rotate in the SVG Code
  5. Rotating by 90 Degrees
  6. Rotating by Any Angle Around the Center
  7. Method 3: Rotate on a Web Page With CSS
  8. Verify the Result
  9. Before You Deliver a Rotated Logo
  10. What This Guide Doesn't Cover

To rotate an SVG logo, you can rotate the artwork in a vector editor and re-export it, wrap the artwork in a group with a rotate transform in the SVG code, or rotate the displayed file with CSS on a web page. The first two methods change the file itself. The third only changes how one web page displays it. In every case, you will usually also need to adjust the canvas so the rotated artwork isn't cropped.

Terms You Need First

  • Transform: an instruction in SVG code that moves, scales or rotates artwork without rewriting its path coordinates. A rotation is written as rotate(angle) or rotate(angle cx cy).
  • Rotation center: the point the artwork turns around. If you don't specify one, SVG rotates around the origin (0,0), which is usually the top-left corner of the canvas. This often pushes the logo out of view.
  • viewBox: the attribute on the root svg element that defines the visible coordinate window. It is written as four numbers: min-x, min-y, width and height. Anything outside it is cropped.
  • Baking or applying a transform: rewriting the path coordinates so the rotation becomes part of the geometry instead of remaining a separate instruction.

Choose a Method

Method | What changes | Best when
Vector editor | The file is re-exported, and the rotation may be baked into the paths | You need a permanent rotated asset for other people or other applications
Edit the SVG code | A transform is added and the viewBox is adjusted | You want a precise, minimal change and are comfortable editing markup
CSS on a web page | Only the on-screen display changes, and the file stays the same | The rotation is a layout or animation choice on one website

Method 1: Rotate in a Vector Editor

  • 1. Work on a copy so the original artwork stays untouched.
  • 2. Unlock and show all layers, then select all logo elements together so they rotate as one unit.
  • 3. Enter an exact angle in the editor's rotate or transform control. Dragging by hand can produce angles like 89.7 degrees.
  • 4. Resize the artboard or canvas to fit the rotated artwork, including stroke widths and effects.
  • 5. Export as SVG. Review the export options for text handling (live text or outlines) and for whether transforms are kept or applied.
  • 6. Reopen the exported file and check it using the steps further below.

Editors differ in how they save rotations. Some keep a transform attribute in the code, and others rewrite the path coordinates. If the receiving application ignores or mishandles transform attributes, look for an option that applies the transform to the paths, then confirm the result in the code.

Method 2: Rotate in the SVG Code

Open the file in a text editor and find the root svg element and its viewBox. Wrap all the visible artwork in a g (group) element and put the transform on that group. Avoid putting it on the root svg element, because support for that has historically been less consistent across applications. Positive angles rotate clockwise in SVG because the y-axis points down. The examples below use a logo with viewBox="0 0 200 100". Keep the root element's existing namespace and other attributes as they are.

Rotating by 90 Degrees

For a quarter turn, swap the viewBox width and height, then shift the rotated artwork back into view with a translate. If the root element has width and height attributes, swap those values too.

<!-- Before -->
<svg viewBox="0 0 200 100">
  ...logo paths...
</svg>

<!-- After: 90 degrees clockwise -->
<svg viewBox="0 0 100 200">
  <g transform="translate(100 0) rotate(90)">
    ...logo paths...
  </g>
</svg>

Here is how the example works. rotate(90) maps each point (x, y) to (-y, x), which places the artwork to the left of the origin. translate(100 0) moves it right by the original height so it lands inside the new 100 × 200 viewBox. For other logos, use your original height in place of 100. For a 90-degree counterclockwise turn, use rotate(-90) with translate(0 W), where W is the original width.

Rotating by Any Angle Around the Center

Use the three-value form rotate(angle cx cy), with cx and cy set to the center of the viewBox. The center is min-x plus half the width, and min-y plus half the height. For the example, that point is (100, 50). Rotating a rectangle by an angle that isn't a multiple of 90 makes its bounding box larger:
new width = |w·cos θ| + |h·sin θ|
new height = |w·sin θ| + |h·cos θ|
The new viewBox then starts at the center minus half of each new dimension. At 45 degrees, a 200 × 100 canvas needs about 212.13 × 212.13.

<svg viewBox="-6.07 -56.07 212.13 212.13">
  <g transform="rotate(45 100 50)">
    ...logo paths...
  </g>
</svg>

This calculation fits the rotated canvas, not the artwork itself. If the logo doesn't fill its original canvas, the result will have extra empty space. For a tight fit, use the editor's fit-to-artwork function or measure the rotated artwork's bounds. Add a margin if strokes or effects extend past the paths.

Method 3: Rotate on a Web Page With CSS

.logo {
  transform: rotate(90deg);
  transform-origin: center;
}

This rotates the img or inline svg element on screen without changing the file. Positive values rotate clockwise. The element's layout space doesn't rotate with it, so a wide logo turned 90 degrees can overlap nearby content. Leave room for it or adjust the container. Anyone who downloads the file still gets the unrotated version.

Verify the Result

  • 1. Open the file in a web browser and in the application where it will actually be used. Rendering can differ between them.
  • 2. Check every edge for cropping, especially around strokes, shadows and glows.
  • 3. Confirm the direction and angle by comparing it side by side with the original.
  • 4. If the logo contains live text (text elements), confirm the correct font renders. If it doesn't, convert the text to outlines in a working copy for delivery.
  • 5. Look for image elements in the code. Embedded raster images stay raster after rotation and can look softer at angles that aren't multiples of 90 degrees.
  • 6. Confirm that gradients, masks, clipping paths and filter effects still line up. A filter with a fixed region can cut off rotated edges.
  • 7. If a downstream tool needs plain path data, check that no transform attributes remain, or apply them in an editor.

A rotated logo is a new variant, not a replacement. Keep the original file, and give the rotated version a name that states the angle. Brand guidelines often list rotation among prohibited alterations, so check the owner's usage rules before you publish or hand off the file. The .svg extension alone doesn't prove that a file is fully vector, that it is editable, or that you have permission to modify the logo.

What This Guide Doesn't Cover

No editor-specific or version-specific documentation was available, so exact menu names and export options aren't listed here. Check your editor's help for its rotate and export settings. No requirements from a particular printer, platform or cutting system were provided either, so test the rotated file with its actual destination before final delivery.