8 October 2015
If it is made well SVG can be incredibly compact. Generally that means creating and editing the SVG by hand. That means knowing something about the internals of SVG.
SVG is arguably the most valuable image format for education and training content. We have blogged and posted about this frequently.
Delivering education content in developing countries means thinking about file-sizes and bandwidth consumption all the time, without fail. SVG delivers this requirement in a remarkable way.
If SVG is made "loosely" on applications like Adobe Illustrator or Inkscape there are seldom any filesize advantages over a PNG. The file-size bloats crazily. If it is made well SVG can be incredibly compact. Generally that means creating and editing the SVG by hand. That means knowing something about the internals of SVG.
People are often intimidated by the thought of hand-created SVG in this WYSIWYG world. Why bother? We have desktop applications that do just that! Unfortunately machine created SVG doesn't use SVG syntax strengths, is incredibly bloated and hard to bring inline in (X)HTML5.
For many years we have conducted in-house training programs for our production editors to get and keep the team confident with optimized, hand-created SVG.
Recently we converted the formal lessons into an online self-learning/refresher/reference resource. This has been demonstrably more effective that class sessions. Once someone is familiar with the interactive learning tools and SVG basics it is also a just-in-time and learn-while-doing experience.
We are now making these SVG learning resources progressively available online for anyone who would like to quickly get into hand-crafted SVG. These are designed for people who have some HTML/CSS experience but may have never looked into the inner workings of SVG.
Go to the Learn SVG Interactive Lessons
Like it's cousin MathML, SVG was a poor cousin in the HTML world until the WHATWG said, let's get rid of this XML namespace nonsense and invite MathML and SVG into the family.
Graphs, charts, statistics, trigonometry, geometry, science, geography; every subject that uses illustrations benefits from well crafted, light, optimized SVG rather than lazy bitmap images or even Canvas. SVG Advantages
There are a number of SVG tutorials available online and they are great. The only limitation of these is you have to provide a text-editor and practice your SVG offline. Some that we use, enjoy and recommend are:
Jakob Jenkov's SVG Tutorial. A complete, well ordered and fast introduction to SVG. My favourite. Check out Jakob's SVG Tutorial.
MDN - SVG Tutorial. The Mozilla Foundation SVG tutorial is exceptionally well laid out with brief explanations of all layout units. Check out theMDN SVG Tutorial here.
SVG-edit. A fully working SVG Editor that we make available on our tutorial site if people want to step up the game a bit. Get SVG-Edit here. You can even open and use SVG-Edit right here.
Inkscape. A powerful, free SVG design tool with lots of features. Note that our hand-crafted SVG tutorials exist because of the complex and verbose SVG created by desktop tools. Get Inkscape here.
SVG-Primitives. This is Infogrid Pacific's early examples demonstrating the advantages of various hand-made SVG illustrations and components for education products. View SVG Primitives here. Click Next to see all nine articles.
Posted by: Richard Pipe
SAPPS. Interactive SVG Applications