This day you find a Proof of Concept (PoC) to combine SVG with JavaScript and CSS to create svg images with functionality.
The svgclock.svg you can find here provides the SVG Elements to display a clock. Some scripting inside the SVG is then modifying the elements to display the current time.
What you get is a single file with the combination of SVG+CSS+JavaScript instead of HTML+CSS+JavaScript so you can easily create non rectangular elements with great style support.
The svgclock.svg file contains such a combination that implements a clock adjusting the objects to show the current time.
The problem is that the SVG scripts run when started standalone but not when using in a
img tag like <img src="svgclock.svg">.
To verify the implementation just open the link to the file to see it running in it's own window. The you can use + or + to view the source code.
To enable scripting in SVG you have to use annother method to integrate into the HTML. The object
tag provides this kind of integration capability.
<object data="svgclock.svg" type="image/svg+xml" style="width:200px"></object>Here you see that the script is activated, and the clock shows the current time.
Today the development tools do not support yet inline JavaScript in svg as they do with HTML. I found it useful to develop the JavaScript code in a separate file and to assemble all into one file manually.
All so my advice to be careful with automatic source code formatting as some format as a destructive and will scramble all code into useless formatting.
Now we know how objects can be implemented using SVG the next step is to implement APIs.
There will be another door in the Advent Calendar on SVG+CSS+JavaScript...