SVG as a UI

   2022-12-27  

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

=> https://robrohan.com/wp-content/uploads/2023/01/test.svg

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:

• An application with a Web UI that is 100% vector based - create an immediate mode UI library behind it for double the fun.
• A Flash like environment where the “binary” is just an SVG file
• A Hypercard like environment (old people know what I mean)
• A “pixel perfect” UI (a UI based on SVG exported from a design tool)
• A “punch the monkey” like web advertisement - finally!

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.