SVG Plus Javascript Plus Education
Equals SAPPS

23 June 2014

SVG, Javascript, Interactivity, Education, Widgets, SAPPs

We have waited 15 years for SVG to become mainstream, easy to use and useful. It's here now. It's great. And it's probably going to become indispensible in education content.

We have waited 15 years for SVG to become mainstream, easy to use and useful. It's here now. It's great. And it's probably going to become indispensible in education content in many ways beyond just illustrations.

We have been working SVG very hard on our mission to create better, useful interactive learning tools. Sadly the ePub3 specification explicitly "forbids" the use of SMIL animation in SVG (and a lot of other useful SVG features). However we have decided to bravely walk where no man has walked before and worked hard to make SVG interactivity an easy, good and useful thing.

Enter the SAPP

We have created a new acronymy-thing - SAPPs. SAPP means SVG APPlication. That is a single file loaded up with Javascript, CSS and SVG that is a smallish, complete and a closed SVG file that actually does something with the focus on interactive education and learning.

SVG can contain both CSS and Javascript and this magical threesome provides the ability to create an interactive module in a single SVG file. Everything is included in the single file package.

A SAPP can be delivered stand-alone or it can be included into any (X)HTML(5) framework including web browsers, e-book formats (that support Javascript) and even CMS/LMS delivery systems with a bit of <object> HTML.

SAPPs are relatively easy to create, maintain and customize but do require some techno-artistic skills. Open source or proprietary SVG editing systems can be used to create the illustration components which are then assembled together in the SVG container. Of course we use Inkscape.

Browser Warning

We have to provide a warning here. If you are using Internet Explorer any-number leave immediately. These SAPP demos will only partially work because of the abysmal SVG support in IE. Everything from here on down is irrelevant for Microsoft Internet Explorer afficiandos.

SAPP No 1. Colour the Picture

Our first proof-of-concept development SAPP is relatively straight-forward. It manipulates the SVG CSS properties with Javascript to allow interactive colouring of the SVG fills and strokes. Here is our first test case. The original is 1366px X 768px to allow landscape presentation in 16:9 devices, our main target market. It is however relatively simple to reorganize the artwork for 4:3 or 16:10. It's just 30KB. Read the instructions and try it.




OK. So that is probably a little boring. Here is a real-world Colour the Picture SASS. The artwork is a set of paths organized in z-order and does things PNG or even canvas colour tools can't do as well. Interesting (and optional) is the grouping of things like the eyes, socks and shoes. There were a lot of techniques developed for this to make it not only interactive in all the right ways, but also a mere 30KB SVG, CSS and Javascript included. Because it is all open SVG it is easy to modify and change in any way. The Javascript just requires two class values in paths, shapes or <g> elements. We will be posting some tutorial information on this shortly.



Open or Download the SVG Files

The downloads are different to the online versions in that they have width (1366px) and height (768px) settings.

Colour the Picture Test Case


Colour the Picture Rohit and the Ball

Replacing Proprietary Legacy Content

There is a lot of awesome interactive learning content locked up in proprietary formats like Flash, Air, Silverlight and other frameworks. The emerging products using Javascript in general and Canvas in particular and while not proprietary tend to hide content in the code. With these approaches the content is relatively expensive to produce and virtually impossible to reuse or repurpose without expensive programmer engagement or considerable rework.

In particular these proprietary or technology approaches introduce a number of business problems for education publishers who need or want to address multiple markets that need localization (L10N) or internationalization (I18N).

SVG On Board

We are discussing the potential of using SVG image content where images need to be manipulated in a variety of ways to support interactive learning experiences; where a publisher is providing alternative learning frameworks for different learning processes; and they need a lot of content to create rich learning experiences.

SVG allows very sophisticated content to be easily produced in a highly reusable manner. Of course the artistic talent required to produce the work doesn't change. But with a little thinking it is possible to create highly extensible and reusable artwork components that can go a long way. For example in the Rohit picture the hair, body, eyes, and cloth items are all independent paths z-ordered over each other. The clothes can easily be changed to reflect different cultural dress, as can any accompanying text.

The production advantages with SVG artwork is that it is open, available and easy to create, modify and maintain. It's obviously not going to work for an LMS if IE 8 (or anything) is your browser of choice. But every other browser and standards-based reading systems supports these features.

Colour the picture is of course just one SAPP. There are dozens of other interactive options that can be imagined and built.

And In Conclusion

Obviously we are not saying SAPPs should be used exclusively or are the answer to everything. But they certainly are a real option and have their place when used in the right place at the right time. Mobility and ease of use are strong points and they address aspects of the speed and cost issues for publishers who are converting print Primary or Secondary level textbooks to digital resources. With an SVG Application approach it is possible to introduce engaging learning interactivity where otherwise it would have been impossible or too expensive.

We will shortly be posting tutorials on the learning experiences we had while developing the SAPPs concept. Our examples use no external Javascript (no JQuery) and no external CSS for the very reason to ensure their portability.

However a little cheat with links to a JQuery (or other) package is not a cumbersome overhead in many circumstances that can bring even more interactivity options.

Posted by Richard Pipe


comments powered by Disqus