It’s been a while since I created RaphCon, a little mashup library based on jQuery and Raphael.js, that let’s you create and animate vector icons (See the vector icons on shuttlestudio.de for a little demo). With the recent hype around Web Components and the renaissance of a more declarative approach to UI web frameworks (e.g. angular.js, polymer.js or x-tag) I thought about revisiting the idea of animatable vector graphics inside the browser.
Additionally I’ve also been working with UI technologies like XAML recently. Just like the concept of data binding that has been adopted by the open web recently I think one can also learn some lessons from this technology stack when it comes to working with vector graphics. So I asked myself: Is it possible to do similar stuff inside the browser with the help of SVG, especially inline SVG?
What I like about inline SVG
- Inline SVG can also easily be styled and animated with the help of CSS. Changing colors dynamically, transforming and translating subpaths. You name it.
- It’s even possible to embed bitmap images as base64 strings
- SVG filters. This gives you a tool set to apply photoshop like effects to SVG graphics.
My initial idea was to use polymer as a polyfill for being able to create custom HTML elements that could enable to describe interactive vector graphics and icons…
Blue sky thinking: Polymer, inline SVG and snap.svg could be the perfect ingredients for an interesting UI-Stack.
— Matthias Wagler (@mattwagl) January 13, 2014
However after playing with polymer for a little while I started to run into problems. The examples didn’t work as expected and I wasn’t able to create custom tags that communicated with each other as easily as I expected. So I switched to angular.js to bootstrap my ideas.
A very rough proof of concept
<icon width="128" height="128"> <icon-state triggers="default mouseleave"> <svg> ... </svg> </icon-state> <icon-state triggers="mouseenter"> <svg> ... </svg> </icon-state> </ng-ollie-icon-state>
The result: ng-ollie
I’ve created a little angular module called ng-ollie (to pay tribute to Ollie Johnston). I’ve put together a very simple demo gist to illustrate the concept. I’ve absolutely no idea where this will end up if I’m able to find the time I’ll try to play with it. Feedback is highly appreciated!