I have been revising my very basic understanding of web design recently - apparently I have to deliver a course on Web Development to some BTEC students - so it will be me one page ahead of them, or a quantum leap behind those who actually know what they are doing.
Anyhow, I was reading up about SVG vector files and how to embed them directly into the HTML code. The SVG format is XML text, and it's possible to generate simple images directly in the web code, or make more complex images in Inkscape or Adobe Illustrator and then open the file in a text editor to copy the code into the web page.
I have been using SVG Viewer to work directly with the code created in Inkscape, and I have found the the native Inkscape format includes additional code that's not required in the web page.
I drew a little cute red robot in Inkscape that looks like this as a PNG;
I thought it would look good with some moving gears behind, so I used the Gears extension to create some behind the image
Animated SVG
The trick is to identify the group of a particular object in the code - usually beginning with "<g id="qt1"
<animatetransform additive="sum"
attributename="transform" attributetype="XML"
dur="10s"
from="0"
repeatcount="indefinite"
to="360"
type="rotate">"
