SVG Girl – interactive 2D anime in the browser

SVG Girl

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.

About Damon

Damon works in many areas of the Web3D Industry and has been active in virtual environments and the 3D web for almost ten years. Damon is actively involved with the 3D web’s convergence with other technologies including GIS, CAD/BIM/CAM, augmented reality, mobile, and advises a variety of entities that use these technologies. He has built numerous mixed reality applications and has lead dozens of research projects in multiple domains.