SVG as a UI
SVG as a UI
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.
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.