I have been researching .svg (Scalable Vector Graphics). I have been looking for alternatives to buggy programs which produce bloated code (e.g. Captivate and Articulate) and for those who can use a decent graphics program, SVG might be the answer.
“Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape.
All major modern web browsers—including Mozilla Firefox, Internet Explorer (version 9 and above), Google Chrome, Opera, and Safari—have at least some degree of support for SVG and can render the markup directly.”
(Source: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics, Accessed 23 February 2014)
So, SVG has been around since 1999, it supports interactivity and animation, SVG can be created with a text editor and all major modern browsers support SVG. Why aren’t you creating with SVG?
SVG files are small (tiny) in comparison to files generated by WYSIWYG editors, there is no “rendering” process – and hence no rendering fails – there are no expensive software fees (files are created in the open source – free – software, Inkscape) and the person (or groups) creating the resource have much more control over the final product.
As a test, I wanted to create something like a slideshow (minus clickable buttons in the first instance), which would progress through the slides automatically. While researching SVG, I realised that not only could I create this resource, but the user also has control over the “slides” (not really slides, but I have called them this, for ease of reference). Users can use their keyboard or browser arrows to move back and forth through the slides and the home and end keys work too!
You can embed the svg file in a web page (or Learning Management System):
or you can link to them and they will open in their own page (and use your keyboard arrows to control movement through slides):
Open storyboard in new window
NOTE: You can right-click and save the SVG file above to your PC and use this SVG as a template for your own “slides” in SVG.
The example just shown was created with all free (open source) software:
Elegant solution, small in size (the SVG above is only a wee 311kb) , developed in the image choice for HTML5, which automatically resizes across devices, with the ability to create any desired HTML5 interactivity and with no software licensing/subscriptions.