How to Rotate in SVG

SVG Rotate Function

Comments
Comments help your HTML stay clear. Image courtesy iStock Vectors / Getty Images

Rotating an image will change the angle which that image is displayed at. For simple graphics, this can add some variety and interest to what may otherwise by a straightforward or boring image.

As with all transformations, rotate works as part of an animation or for a static graphic. Learning how to use rotate in SVG, or Scalable Vector Graphics, allows you to request a distinct angle to your shape's design.

The SVG rotate function works to turn the image in either direction.

About Rotate

The rotate function is all about the angle of the graphic. When you design an SVG image, you are going to create a static model that will probably sit at a traditional angle. For example, a square will have two sides along the X-axis and two along Y-axis. With rotate, you can take that same square and turn it into a diamond formation. With just that one effect, you have gone from a very typical box (which is super common on websites) to a diamond, which is not common at all and which has not added some interesting visual variety to a design.

Rotate is also part of the animation capacities in SVG. A circle can turn constantly while being displayed. This motion can draw the attention of visitors and help you to focus their experience on key area or elements in a design.

Rotate works on the theory that one dot on the image will remain fixed.

Imagine a piece of paper attached to cardboard with a push-pin. The pin location is the fixed spot. If you turn the paper by grabbing and edge and rotating it in a clockwise or counter-clockwise motion, the push-pin never moves, but the rectangle still changes angles.The paper will spin, but the fixed point of the pin remains unchanged.

This is very similar to how the rotate function works.

Rotate Syntax

With rotate, you list the angle of the turn and the coordinates of the fixed area.

transform="rotate(45,100,100)"

The angle of the rotation is the first thing you add. In this code, the angle of rotation is 45-degrees. The center point is what you would add next. Here, that center point sits at coordinates 100, 100. If you do not enter center position coordinates, they will default to 0,0. In the example below, the angle would still be 45-degrees, but since the center point has not been established, it will default to 0,0.

transform="rotate(45)"

By default, the angle goes toward the right-hand side of the graph. To rotate the shape in the opposite direction, you use a minus sign to list a negative value.

transform="rotate(-45)"

A 45-degree rotation is a quarter turn since the angles are based on a 360-degree circle. If you list the revolution as 360, the image would not change because you are literally flipping it in a full circle, so the end result would be identical in appearance to where you began.

Edited by Jeremy Girard