Learn How to Rotate Graphics in SVG

The rotate function in SVG (Scalable Vector Graphics) allows you to specify an angle to which you want to rotate a given image. It 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 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 the Y-axis. With rotate, you can turn that same square into a diamond.

With just that one effect, you have gone from a typical box (a common element on websites) to a diamond, which adds interesting visual variety to a design. Rotate is also part of SVG's animation capacities. For example, a circle can turn constantly as it's displayed. This motion can focus the visitor's experience on key areas or elements in a design.

Rotate assumes that one dot in the image will remain fixed. Imagine a piece of paper attached to cardboard with a pushpin; the pin location is the fixed spot. If you grab an edge of the paper and rotate it, the pushpin doesn't move, but the rectangle turns. This is how the rotate function works.

Rotate Syntax

To use rotate, specify the angle of the turn and the coordinates of the fixed area:

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

In this code, the angle of rotation is 45 degrees. The center point comes next; in this example, its coordinates are 100 on the x-axis and 100 on the y-axis. If you don't enter center position coordinates, they will default to 0,0. In the example below, the angle is still 45 degrees, but the center point has not been established; therefore, 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 specify a negative value:

transform="rotate(-45)" 

A 45-degree rotation is a quarter-turn, given that the angles are based on a 360-degree circle. If you list the revolution as 360, the image would not change because you'd be flipping it in a full circle.

In this way, rotate gives you total control over the angles of your images.