Hello.

I wanted to create a few (vector) animated icons, such as attached clock.svg (click to display, or use "save link as" and open in browser to see the result, or in Inkscape to edit)

I was looking for a solution that:

1. preserves the SVG static image for all purposes (display and print)
2. is easy enough to use in Inkscape with no additional tool, esp. no online platform
3. allows a Creative Commons -0/-By release of the created material
4. works on most modern browsers supporting SVG
5. is very easy/efficient on the resources needed for displaying the animations

SMIL browser support does not exactly seem established AFAIK, so I tried a few alternatives (Leaf, SNAP.svg) and in the end really liked SVG.js (opensource MIT licence), mostly for its tiny footprint, clean coding style and full SVG specification support.

Thought about sharing some feedback below. The intended audience should be familiar with Inkscape, SVG terminology, and not be afraid of trying out a bit a (very easy) scripting.

Integrating SVG.js can be done directly in your SVG from within Inkscape, just add https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js in document properties  > scripting > external scripts.


Giving a meaningful (and unique) ID to the SVG elements and groups you want to animate does help, via the object > object properties dialog  (then click "SET")

After your (static) SVG image is ready, just create a new internal script from document properties  > scripting > embedded scripts where you create the animation by changing any SVG property you'd like in that script. Eventually check where Inkscape stores its value, as most properties are stored by Inkscape as CSS styles information and not element attributes.

You can for instance rotate a few objects:

function animateClock() {
  var speed = 20
  SVG('#bigHandle').animate().rotate(speed*12)
  SVG('#smallHandle').animate().rotate(speed)
}

move an object and change its fill color :   (note move() uses absolute positions, dmove() uses relative distances)

function animateTitleText() {
  SVG('#titleText').animate().fill('#ff3').move(7,50).delay(1000).move(7,-30)
}

Last step is then to decide when these animations should be run:

• Is it when an object is clicked? Then add your function name in the object > object properties > interactivity > onclick: (see screenshot below)
• Is it directly upon display of the picture ? Then add the following code snippet, in the same embedded script, to start your selected animations when the file is displayed:

window.onload = function start() {   
  animateTitleText()
  animateClock()
} 

Save, open your SVG file with a recent (SVG friendy) browser (Firefox, Chrome, Opera and many more) to enjoy an animated vector picture !

An animated SVG must be embedded in a website as an object, not an image, eg with the code 

<object data="clock.svg" type="image/svg+xml"></object>

Constructive feedback is welcome.  I'm not affiliated to SVG.js and will not do debugging of your code.

Lost me. Not good at code stuff. Thanks anyhow

@berteh,

This was incredibly helpful, thank you for posting this.

One clarification on the code snippets you've provided is that the variable 'speed' in your example is actually being plugged in as the 'angle of rotation' parameter of the rotate function. The reason it affects the speed is because it's happening over a fixed amount of time. Just thought this might help the next person.

You made this very easy for me to implement, and it most definitely would have not been without this post. Thanks again.

Really cool animation. Thank you for sharing with us!!!