SVG as a UI


SVG as a UI

Did you know you can put JavaScript into SVG files? You can use this little technique to make little embeddable Flash like applications that also work as standalone applications.

Here is a small example (lightly tested in Firefox and Chrome):

Try clicking around in that image above (or use w,a,s,d to move the circle around). If you view that SVG directly


you’ll notice it works just like it does when it’s embedded.

If you download and look at the source of that SVG, you’ll find that there is JavaScript directly in that file that is doing that animation. I’ve also played around with src importing JavaScript from a build system, and it seems to work fine.

It seems like you could do some very cool things with this:

I was initially playing with this because I wanted to make something where one could make little transition animations like in Duolingo. I was going to build in some code that would operate on ids or classes that designers could create SVG UIs, attach some specific ids or classes here and there, and the UI could then do some predetermined animations / interactions.

Imagine using a designers SVG output directly as the UI. It probably wouldn’t work practically, but it sounds fun to try.