Blue sky thinking about SVG and angular

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

  • Of course SVG graphics can be scaled in size. So they’re a good format when it comes to surviving the big wave of high resolution displays becoming mainstream. As they’re included inside the HTML they can also be manipulated via JavaScript.
  • 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…

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

I started to sketch out some ideas in code. The first idea was to create a custom icon tag that let’s you specify icon-states as children. These states could be triggered by JavaScript events like ‘mouseover, mouseleave, touchstart’.

<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!

 

Leave a Reply