Learn Handcrafted SVG in 2017

1 November 2017

SVG, Digital Content Production, Production, Education, Interactivity

Learn handcrafted SVG and take advantage of it's interactive power for education and training.

SVG is arguably the most valuable image format for education and training content.

If SVG is made on applications like Adobe Illustrator or Inkscape there are seldom any filesize advantages over a PNG. The file-size bloats crazily and the insane path statements and groups make adding CSS animation almost impossible.

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.

Delivering education content in developing countries means thinking about small file-sizes and the least bandwidth consumption all the time, without fail. Handcrafted SVG delivers this requirement in a remarkable way.

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, becomes 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. It's a great skill to add to the resumé.

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 have made these SVG learning resources available online for anyone who would like to get into, or at least consider learning 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 tutorial blocks have an interactive SVG editor. One click on the SVG viewbox and you can edit the code and instantly see the results of your work.

Your code is saved on local until you click Reset. So you can edit and change the SVG code as much as you like.


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. 

Click to view the 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

Take Advantage of Handcrafted SVG

Infogrid Pacific has a large library of interactive SVG items covering a wide range of subjects. These are designed for Education Publishers around the world. They can be style and language customized.

When creating interactive learning content it's a lot easier to start with working components than starting from nothing. If you are a publisher of education and training material in any language, contact us at sales[at]infogridpacific[dot]com.

Posted by: Richard Pipe

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.


Links Related to this Post

SVG Primitives for Education

SAPPS. Interactive SVG Applications

Deaf Sign Language Tutor


comments powered by Disqus