SVG combining into animation

I am aware of SVG's animation capabilities, but is there a way to easily combine pictures into animations, like in animated GIFs? For example, cycling between a circle,

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

and a rectangle,

<svg xmlns="http://www.w3.org/2000/svg" version开发者_运维百科="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

Well you could possibly fade the alpha values in and out if that's the effect you are after. i.e fade out the circle and fade in the rect at the same time and vice-versa.

Having the actual shape transform from one to another would probably need to be done by you using JavaScript.

If your SVG will be viewed in a web browser, you can animate it by manipulating the nodes with JavaScript. My "web site" is an example of this.

If you would use path elements instead of the basic rectangles and circle elements it would be possible to use path morphing to morph one shape into another using SVG animations.

There is pretty good example of this at carto.net.

Depending on your use case there might be a few drawbacks with this solution. The "pictures" that you put into the animation not only needs to be path elements, there are also some more constraints such as that the path elements need to have the same number of vertices and they need to be of the same type.