In this tutorial we are going to look at basic animation within SVG elements in HTML5 pages. The results will not work in all modern browsers. Although inline SVG is in itself supported in all current versions of the major browsers, the animation elements are not. You will be able to see some of the effects in both Firefox and Chrome, but the effect in which we animate colour can only be reliably viewed in Chrome at the moment. As is always the case with HTML5 skills, this is more of a preview of what we will be able to do in the near future than a practical guide of techniques you can rely on already, so make sure you include alternatives in your live sites. You can see the demo now for an indicator of what we are working towards.
Create an HTML5 Page
Start by creating a new HTML5 page using the following outline:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
We won't be using any scripts or CSS in the head section for this tutorial, however, you can use both to apply effects to the elements inside SVGs.
Create the SVG Element
In the body section of your page, add the SVG element as follows:
The remainder of our code will be placed between these opening and closing tags. The main attributes to pay attention to in the opening SVG tag are the dimensions. You can alternatively specify relative percentage values for the width and height if you have CSS dimensions set for the containing page element.
Add the Definitions
The SVG is going to contain shapes, definitions of gradients and animations. Let's start by defining a couple of gradients. The SVG is going to contain a simplistic representation of the sun rising against a blue sky background. In an SVG, you define re-usable items such as gradients in the dedicated defs section, so add it inside the SVG element first:
Inside this section, place a gradient to represent the sky background:
This is a linear gradient, with an ID so that we can apply it to our shapes when we create them. The x1, y1, x2, y2 attributes represent the start and end co-ordinates of the gradient. In this case we want the gradient to unfold vertically so the start point is the top left corner and the end point is the bottom left corner. The stop elements represent points in the gradient - in this case it is going to go from one shade of blue to another, will full opacity throughout.
Now add a radial gradient for the sun:
In this case we define the central points of the start and end circles of the gradient - it will spread from the center of the circle shape to its outer edges. The first colour stop starts 20% into the gradient, so there will be an area of solid colour at the centre.
Add the Shapes
The SVG is going to display a rectangle background and circular sun. First add the rectangle, after the closing defs tag but still inside the SVG element:
You can include a shape using a single self-closing tag, but we are going to include the animation properties inside the rectangle element, so we separate the opening and closing tags. The rectangle properties include the x and y co-ordinates for its top left corder and the width and height, which we set to cover the whole image. We set the gradient we defined in the defs section by referring to it in the fill attribute.
Now add the circle element for the sun:
The circle is defined using the co-ordinates for its central point and the length of the radius. Again, we specify one of the gradients already defined. The circle will be in the center of the image, occupying 80% of the total width (twice the radius).
Animate Movement
If you open your page now you will see a static image of the sun in front of the sky background. Now we can add some animation using the SVG animation elements, which come from SMIL animation. First, to animate the sun, making it move into the image as though rising from the horizon, add the following animate element inside the circle element:
This element specifies an animation that will move the circle element on the y axis, which we specify by referring to the cy attribute of the circle. The attribute type tells us what type of animation this is. The from and to attributes indicate the desired start and end positions for the circle. The begin attribute indicates that the animation should start immediately and the dur attribute that it should last 5 seconds. Setting the fill attribute to freeze stops the circle from going back to its original position when the animation has elapsed.
Animate Opacity
As well as moving the circle, let's fade it in at the same time. Add the following animation, also inside the circle element:
This time the animation is on a CSS property - the opacity. We want the circle to go from zero to full opacity, to last 5 seconds and to execute once.
Animate Colour
Let's also animate the sky to complement what is happening with the sun. This animation has less browser support at the time of writing, so you may need to view the page in Chrome to see it in action. Add it between the opening and closing rectangle tags:
This is an animateColor element, which animates a change in colour over 5 seconds. The animation uses the same colours we specified in the linear gradient for the sky - browsers without support for the colour animation will simply display the gradient instead.
Conclusion
That's our basic animation complete. Open your page in a supporting browser to see the result. You should see the sun shape rise up into the image while fading in, as the background changes colour from one shade of blue to a darker one. Check out the demo to see what it should look like. This is really just the beginning when it comes to SVG animation, as there are other elements for transformational animations such as rotations and translations. With any luck you'll be able to use them for more and more users as time passes, but for the moment these effects must necessarily be used with caution.
