Tag Archives: webdev

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!

 

sebastianwaters:

Michael Surtees about the concept, idea and execution of a website for different devices and gadgets, starting with a tablet pc to a mobile device to a standard computer (screen). Interesting how the way of screen design and usability is changing with the boost of touch screen devices. – Designing for the Browser of Today

Having spent most of 2010 designing with the interactions of an iPad in mind, I chose to design Gesture Theory’s site with the iPad browser in mind first, desktop browser second and change the context of the site’s use for a mobile browser. Thinking about the iPad first meant killing hover states, killing scrolling (just a personal preference), emphasizing swiping (right to left), killing the home screen (kept it for mobile) and trying to make it lightweight as possible. Something has worked – we have less than a 3 % bounce rate. Once the design was ready for the iPad it was a pretty easy configure it to the desktop browser. Right now things work just on tap, we’re trying to get it to swipe but haven’t been happy with the jerky results so far.