How to Use “animateTransform” for Inline SVG Animation

Today we’ll be stepping you through the basics of using animateTransform to generate inline animations with SVG (scalable vector graphics).

If you’re brand new to SVG I recommend checking out Getting Started With Scalable Vector Graphics (SVG) to bring you up to speed.

The techniques you’ll be learning will allow you to create sophisticated icon and image animations without a single GIF, JPEG or PNG, with zero JavaScript, and without the faintest whisper of Flash.

The animations you create will be easy to edit later because they’re pure code, and the results will only take up a couple of KB of precious bandwidth when they’re viewed.

Before We Begin

To animate SVG shapes you’ll first need the ability to create them. I’ve found the easiest way to create SVGs is to use Sketch from Bohemian Coding. If you don’t own Sketch you can grab a free 30-day trial for the purposes of this tutorial.

We’ll be manipulating the SVG code, so after you’ve drawn a shape in Sketch, create a slice around it and export that slice as an SVG file.

You’ll then be able to open your exported file in a code editor (like Sublime Text) and copy the SVG code from within. All you need is the code from the opening <svg> tag to the closing </svg> tag.

For example, Sketch generates the following SVG code for the blue rectangle pictured above:

1

<svg width="100px" height="125px" viewBox="0 0 100 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>Slice 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

8

    </g>

9

</svg>

To make the code visually easier to work with, we’ll make a couple of little changes to the code.

Set the svg element’s width and height to 100% and delete the viewBox setting. Also delete the Generator comment, and the title, desc, defs and g elements.

You should end up with something like this:

1

<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

3

</svg>

Drop that code into an HTML document and, when viewed in the browser, you should see the same blue rectangle on your page as you saw in Sketch:

Note: The above image includes an X and Y axis in the background as you'll need to understand these in order to create your animations. You’ll learn why shortly.

What Does “animateTransform” Do?

The short answer is, the animateTransform element generates animations by setting transform properties on the SVG shape to which it's applied.

Given that, the logical next question is:

Okay, So What Does “Transform” Do?

Adding transform settings to a shape allows you to modify how that shape appears in 2D space. There are five different types of transformation you can perform:

1. translate
   
2. scale
   
3. rotate
   
4. skewX
   
5. skewY

The animateTransform attribute allows you to animate between varying states of transformation, so before you start animating it’s important to understand how transformations actually work.

Transformations and 2D Space

Because transformations operate in 2D space their settings all relate to X and Y co‑ordinates plotted on an X / Y axis, as you saw pictured behind our blue rectangle earlier.

• The X axis is the horizontal line in 2D space, and the Y axis is the vertical line. By default, every shape starts at a position of 0 on both the X and Y axis.
• From the 0 position on the X axis, positive values correspond with moving to the right, and negative values correspond with moving to the left.
• From the 0 position on the Y axis, positive values correspond with moving downwards, and negative values correspond with moving upwards.

If this doesn't make complete sense yet don’t worry, as it will become much clearer as you see the examples of each type of transformation below.

Don’t worry about the code for these transformations either, as we’ll cover that when we move onto creating animations. To start with I just want you to get the essentials down on what the five types of transformation actually do.

Translate

This shifts the shape’s position on the X axis (horizontal) and Y axis (vertical).

For example, here is our blue rectangle with translate values of 150 on the X (horizontal) axis and 20 on the Y (vertical) axis:

Remember from the section above that positive values on the X axis correspond with moving to the right, and positive values on the Y axis correspond with moving downwards.

By setting the translate value for X to positive 150, our rectangle has moved to the right by 150 pixels. Setting the value for Y to positive 20 has moved our rectangle down by 20 pixels.

Scale

This multiplies the shape’s overall size on the X axis (width) and Y axis (height).

Scale settings work as multipliers of the shape’s original size. For example, if we set the X scale to 3 it would make the shape three times wider. If we set the Y scale to 1.25 it would make the shape one and a quarter times higher, like so:

Rotate

This rotates the shape around a given point by degrees.

Rotation works by setting the number of degrees by which you want to rotate the shape. For example, here is our rectangle rotated by 45 degrees:

By default the shape will rotate around its top left corner but you can also have it rotate around a different point. We’ll cover how that’s done later in the tutorial.

SkewX

This skews the shape along the X (horizontal) axis.

Skewing along the X axis also works in degrees. For example, in the image below our rectangle is skewed by 20 degrees along the X axis:

SkewY

This skews the shape along the Y (vertical) axis by degrees.

SkewY works in exactly the same way as SkewX, only the transformation happens vertically along the Y axis like so:

Animating Transformations

Now that you know what transforms actually do, you can start creating animations between different states of transformation. The basic process has three steps:

1. Set an initial state of transformation: the from state.
   
2. Set a second state of transformation: the to state.
   
3. Set the timing and repetition for an animated transition between the from and the to state.

This is best understood through a practical example, so let’s start by animating a translate transformation.

Animating Translate Transformations

You’ll recall that earlier we began with our blue rectangle at its default position of 0 0, i.e. 0 on the X axis and 0 on the Y axis. We’ll set this position as our from state.

We then looked at an example of that same blue rectangle with translate settings of 150 20 applied, i.e. 150 on the X axis and 20 on the Y axis. We’ll set this position as our to state.

Using animateTransform we can make the rectangle slide smoothly between our from and our to states over a period of two seconds.

Your SVG shape, in this case rectangle, will need to have both opening and closing tags e.g. <rect></rect>.

The animateTransform attribute should be placed in between these tags like so:

1

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

2

    <animateTransform attributeName="transform"

3

      type="translate"

4

      from="0 0"

5

      to="150 20"

6

      begin="0s"

7

      dur="2s"

8

      repeatCount="indefinite"

9

    />

10

  </rect>

Take a look at the properties that have been set within the animateTransform tag. These are what control how your animation runs.

We have set type to translate, meaning we’ll be applying a translate transformation type. As planned, we’ve set our 0 0 position in the from state, and our 150 20 position in the to state.

The value for begin is set to 0s, meaning the animation will begin zero seconds after load, and dur is set to 2s, meaning the animation will run over a period of two seconds. Finally, we’ve included repeatCount set to indefinite meaning the animation will replay on loop.

This gives us the following animation:

Animating Other Transformations

The process is exactly the same for rotating all four of the other types of transformations. After setting the type value to whatever type of transformation you want, enter values for your from and to transformation states.

For example, we can use the following animateTransform settings to scale our rectangle up to the size you saw in the earlier section on scale transformation:

1

    <animateTransform attributeName="transform"

2

      type="scale"

3

      from="1 1"

4

      to="3 1.25"

5

      begin="0s"

6

      dur="2s"

7

      repeatCount="0"

8

    />

Because scale transformation settings multiply the shape’s original size we start with a value of 1 1 on the from setting. Doing this sets its original size at a multiplication of 1.

Our to setting of 3 1.25 will animate our scale transformation up to three times the original width on the X axis, and one and a quarter the original height on the Y axis.

Note: You’ll find your actual in-browser animations run much smoother than the screen capture GIF you see above.

Animate Multiple Transformations

We can also combine the two animations we’ve created so far, to both translate and scale at the same time. You can only use a single animateTransform tag inside your rect tag, so to use multiple animations you'll need to incorporate a set of g tags, which represent a group of SVG objects.

To make this work, add opening and closing <g></g> tags around your existing rect tags:

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  </g>

Then add your second animation outside the closing </rect> tag, but before the closing </g> tag. In this case we’re going to reintroduce our translate transformation:

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  <animateTransform attributeName="transform" type="translate" from="0 0" to="150 20" begin="0s" dur="2s" repeatCount="0" />

13

  </g>

We now have both scale and translate transformations animating simultaneously:

You can use animateTransform once per shape or group. If you need to add more animations, wrap another set of group tags around your code and nest your additional animateTransform tag inside it.

Let’s take a quick look at the remaining three transformation types, each one created by changing only the type, from and to settings, and also combined with our original translation animation.

Rotation Animation (plus Translation)

In this example type has been set to rotate, from has been set to 0 to begin with no rotation, and to has been set to 45 so we rotate 45 degrees over two seconds:

SkewX and SkewY Animation (plus Translation)

In the following two animations type has been set to skewX and skewY respectively, from is set to 0 to begin with no skewing, and to has been set to 20 so we skew by 20 degrees over two seconds:

Practical Example: Loading Icon

There are an infinite number of possibilities for animations you can create using these basic techniques, but one of the most immediately useful is the creation of loading icons where you might formerly have relied on animated GIFs.

This is a loading icon I created in about five minutes using Sketch:

I then exported it to an SVG file which gave me the following code:

1

<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>loader01 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <g id="Group-3" sketch:type="MSLayerGroup" fill="#4990E2">

8

            <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="16.5873418" y="0" width="3" height="9.13705584"></rect>

9

            <rect id="Rectangle-2" fill-opacity="0.58" sketch:type="MSShapeGroup" x="16.678481" y="26.8629442" width="3" height="9.13705584"></rect>

10

            <rect id="Rectangle-4" fill-opacity="0.79" sketch:type="MSShapeGroup" transform="translate(31.530380, 17.954315) rotate(-270.000000) translate(-31.530380, -17.954315) " x="30.0303797" y="13.3857868" width="3" height="9.13705584"></rect>

11

            <rect id="Rectangle-3" fill-opacity="0.37" sketch:type="MSShapeGroup" transform="translate(4.735443, 18.045685) rotate(-270.000000) translate(-4.735443, -18.045685) " x="3.23544304" y="13.4771574" width="3" height="9.13705584"></rect>

12

            <rect id="Rectangle-4" fill-opacity="0.72" sketch:type="MSShapeGroup" transform="translate(29.758244, 24.676171) rotate(-240.000000) translate(-29.758244, -24.676171) " x="28.2582441" y="20.1076435" width="3" height="9.13705584"></rect>

13

            <rect id="Rectangle-3" fill-opacity="0.3" sketch:type="MSShapeGroup" transform="translate(6.507579, 11.323829) rotate(-240.000000) translate(-6.507579, -11.323829) " x="5.00757864" y="6.75530065" width="3" height="9.13705584"></rect>

14

            <rect id="Rectangle-4" fill-opacity="0.65" sketch:type="MSShapeGroup" transform="translate(24.871110, 29.609153) rotate(-210.000000) translate(-24.871110, -29.609153) " x="23.37111" y="25.0406255" width="3" height="9.13705584"></rect>

15

            <rect id="Rectangle-3" fill-opacity="0.23" sketch:type="MSShapeGroup" transform="translate(11.394713, 6.390847) rotate(-210.000000) translate(-11.394713, -6.390847) " x="9.89471277" y="1.82231869" width="3" height="9.13705584"></rect>

16

            <rect id="Rectangle-4" fill-opacity="0.51" sketch:type="MSShapeGroup" transform="translate(11.473642, 29.654839) rotate(-150.000000) translate(-11.473642, -29.654839) " x="9.97364166" y="25.0863108" width="3" height="9.13705584"></rect>

17

            <rect id="Rectangle-3" fill-opacity="0.93" sketch:type="MSShapeGroup" transform="translate(24.792181, 6.345161) rotate(-150.000000) translate(-24.792181, -6.345161) " x="23.2921811" y="1.77663341" width="3" height="9.13705584"></rect>

18

            <rect id="Rectangle-4" fill-opacity="0.44" sketch:type="MSShapeGroup" transform="translate(6.553148, 24.755301) rotate(-120.000000) translate(-6.553148, -24.755301) " x="5.05314826" y="20.1867727" width="3" height="9.13705584"></rect>

19

            <rect id="Rectangle-3" fill-opacity="0.86" sketch:type="MSShapeGroup" transform="translate(29.712675, 11.244699) rotate(-120.000000) translate(-29.712675, -11.244699) " x="28.2126745" y="6.67617143" width="3" height="9.13705584"></rect>

20

        </g>

21

    </g>

22

</svg>

Given this icon comprises multiple shapes inside a group, and as we’ve learned from above you can apply animateTransform to a group, I added my animation code before the last closing </g> tag:

1

        </g>

2

        <animateTransform attributeName="transform"

3

    		type="rotate"

4

    		from="0 18 18"

5

    		to="360 18 18"

6

    		begin="0s"

7

    		dur="0.85s"

8

    		repeatCount="indefinite"

9

    	/>

10

    </g>

11

</svg>

The above code sets the icon to rotate from 0 to 360 degrees, i.e. a full circle.

Revolve Axis

Note that this time I have also included an extra two numbers in both the from and to settings. This tells the animation to revolve around a point on the shape’s own internal X / Y axis of 18 18, i.e. the center of the shape given it is 36x36 pixels in size.

This produces the following animation:

Again, your in-browser animation will be smoother than the above GIF, so be sure to check out the real thing. As you can see, it’s very quick and easy to put together animations you can get solid practical use out of.

Wrapping Up

If you haven’t yet taken a run at SVG animation you should now have the tools you need to get a good solid start.

Further Reading

• Great Codepen example of animated loader SVGs
• More about how animateTransform works over at W3C.
• Grab yourself a copy of the source for this tutorial, play around with the examples and have fun creating your own inline SVG animations!