Learn Handcrafted SVG

8 October 2015

SVG, Digital Content Production, Production, Education, Interactivity

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.

The Learn SVG Challenge

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

The SVG Advantages

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

SVG Advantages

Editable static images. SVG can be saved and loaded by standard vector editing programs. It is not possible to load <canvas> scripts, since they are not written declaratively.

Accessibility. SVG can store additional non-visual information inside its normal structure - e.g. titles can be displayed as tooltips to give users more information when they move their mouse over an object, or can be read by speech synthesisers. <canvas> supports only a single alternative for the whole element, and authors must explicitly construct an accessible alternative in a language such as HTML.

High-quality printing. <canvas> renders onto a fixed-resolution bitmap, usually matching the screen's resolution. If the output is moved to a higher-resolution device (such as a printer), the <canvas> bitmap will appear pixellated, whereas SVG can automatically render a new high-resolution image.

Interaction. SVG can automatically detect interaction, such as clicking on an object. <canvas> can't, and authors must write their own code to convert mouse coordinates into the appropriate action.

Mixing markup. SVG can embed content from other namespaces, e.g. to include an XHTML fragment inside an image. <canvas> can't.

Text. There is no standard way to draw text in <canvas>. Alternative approaches are possible (e.g. overlaying HTML elements containing text, or drawing each character as a bitmap image) but are harder to use and less flexible. SVG has significant support for embedded text.

Source: https:/​/wiki.​what​wg​.org​/​wiki/​SVG_​and​_​can​vas

Other Tutorials & Resources

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

Links Related to this Post

SVG Primitives for Education

SAPPS. Interactive SVG Applications

Deaf Sign Language Tutor

comments powered by Disqus