I was recently exposed to SVG Girl (thanks Avi) and as a fan of anime and web technology, what a treat! At first glance, SVG Girl looks like a video of an anime, in reality it is an interactive video using all Scalable Vector Graphics (SVG)! SVG is a family of specifications of an XML-based file format for describing 2D vector graphics, both static and dynamic (i.e. interactive or animated).

SVG Girl uses Kayac’s jsdo.it platform, which allows you to write and share JavaScript, HTML5, and CSS in your browser. Viewers can make real-time changes to the animation to customize the video, and watch the results ‘live’.

SVG Girl made its debut at  Microsoft’s Mix2011 conference. Totally worth the visit to the website and use Internet Explorer 9, where it takes advantage of hardware acceleration to give the experience more smoothness.

SVG Girl offers different types of interaction for different levels of know-how. The average user can modify colors and background images, but those that want to change the SVG source code can modify the animation to be how they want it to look.  Check out the video below..

Super cool huh? I might use IE9 more often now.