Microwave SVG animation examples using SMIL, Javascript and CSS

 So, this page is going to show the three different ways of animating a SVG file. We will be looking at animating the file by SMIL, JavaScript and CSS (Cascading Style Sheets). Each method has its advantages and disadvantages. And we will briefly talk about a fallback image in case the animation method we are using will not work or is not supported by the end-users bowser.

 The SVG image to be animated is that of a simple microwave with a turntable and a package of tomato basil soup. The turntable will be animated along with the package of tomato basil soup and the light source of the microwave.


(image nonanimated)

 The simplest way to have a fallback image, in case none of the animation methods used work, is to have the starting position of the animation to be a desirable still image.

SVG inkscape animation of a microwave and a package of tomato basil soup implemented using SMIL. File: microwave SMIL.svg
Works fine with the img tag in Chrome and Firefox. But will not work at all in Internet Explorer or Microsoft Edge.
SVG inkscape animation of a microwave and a package of tomato basil soup implemented using CSS. File: microwave CSS.svg
The great thing about CSS is that it will work across all the major browsers with the img tag, including Internet Explorer and Microsoft Edge. The drawback is CSS does not currently have a built-in transform on the D element, as in SMIL.
Finally let's look at using JavaScript.
So, a major advantage of using JavaScript is it will work in all browsers. But Internet Explorer may throw an error message requesting use of active X controls. But there are a few minor drawbacks using JavaScript to animate the SVG image. One is a bit of code needs to be added to the SVG file to allow the browser to size the image. Namely preserveAspectRatio and viewBox needs to be added to the main SVG tag. In inkscape, this is accomplished by using the XML Editor.
Image of the XML editor in Inkscape showing the extra lines of code needed to implement scaling within an HTML page. The second minor issue is that you have to use the embed or object tag in HTML in order for the JavaScript animation to play. The stand along SVG file will play in all the browsers.
The third and most important issue is of course you will have to learn JavaScript.

Links

  Doodle Scenes:    
  Chinese Puppet Show  Gone Fishin'... It's a Bee's Life
Grim Reaper