SVG Primitives for Education

11 October 2013

SVG, SVG Primitives, Education, Production, IGP:Digital Publisher, ALL-IN Content Objects

Geometry, Trigonometry, Physics, Chemistry and just about every other subject need line-art illustrations. In the digital content context these sometimes need to become animated and interactive learning experiences. How can it be done?

Geometry, Trigonometry, Physics, Chemistry and just about every other subject need line-art illustrations. In the digital content context these sometimes need to become animated and interactive learning experiences. How can it be done?

First! We are in the age of HTML5 which supports SVG natively. It's a part of the family. This is very important because now we can drop an SVG drawing into an HTML5 file and it is just there. No name-spaces, no wrestling with external files. Just instant, amazing images.

Second! The illustration blend between traditional print illustration and new digital content is locked in SVG. CSS is awesome. So is SVG. Understanding how to use SVG Primitives in HTML5 is a key to a prison door!

Third! SVG is regarded as "not easy", especially when starting from scratch. In fact SVG does look complicated, hard and confusing, especially if you open an SVG file that was created by a desktop application. It is a numbers and presentation horror story. Truth. It's not that hard to learn with a little application.

Answer: Enter the hero! SVG Primitives for Education.

The black sunglasses look directly out of the screen as a visual counterpoint to the Enter the Hero statement.

SVG Primitives

If your geometry has to start from "Point A" (pun intended) and move through to polygons (and it always does), while explaining radius, diameter, tangent, angle intersection, line graphs, sine waves, parabolas, statistic graphs, etc. etc. etc. etc. and etc.... the big question is: 

Why do the illustration wheels
for these drawings
need to be reinvented

over and over again?

The answer to that question is easy! They don't!

Of course a major problem is the WYSIWYG desktop tools we have been using for the last 10 years have conditioned us that these tools are faster and better; perhaps the only way to create sophisticated SVG illustratations (and for many art tasks those tools are certainly essential).

But for simple repetitive drawings of lines and shapes and the art that is used over and over again in textbooks, they are a productivity killer and production just costs more. I am an InkScape addict and moving to manual tagging while designing the SVG Primitives was a bit of a revelation.

Education publishers pride themselves on the uniqueness of their books. But in "K-12 analysis" they all teach the same stuff in different locales and languages; and for different markets. What changes between markets is the narrative, the pedagogical concept presentation,  the illustration details, the language and the price! The concept remains unalterably the same.

ALL-IN SVG Primitives make it easy to select a ready, near requirement illustration, change a few presentation details and put it immediately into an interactive digital content textbook. The artwork is immediately ready for use. 

SVG Primitives Measure Up. In Every Unit!

0 1 2 3 4 5 6 7 8 9 10 0 1 2 3

An SVG primitive is the concept of the core SVG structures required to make a lesson illustration component that is customizable and extensible. For example here is a set of SVG Primitives for a circle and its various sectors, assembled together into a single illustration. There are 20 SVG Primitives arranged into four groups.

Layout  is easy. The SVG Primitives are all built on a 400px X 400px framework. These are assembled together into a single drawing and positioned using transforms and the viewBox. With some familiarity with the SVG syntax this takes a couple of minutes, certainly a fraction of the time compared to learning illustration software and creating these with a machine.

The IGP:Digital Publisher SVG Primative Library gives instant access to hundreds of HTML5 ready SVG images covering the widest possible range of publishing maths, science and miscellanous requirements. They can then be quickly and easily positioned, sized, coloured and a lot more directly into the HTML5. 


IGP:Digital Publisher Interactively Supports SVG 

If you are lucky enough to have IGP:Digital Publisher as your digital content production environment you are getting IGP:FoundationXHTML, first class MathML support and now full SVG support.

You can directly insert SVG Primitives from the ALL-IN library, modify them in-place, or take the SVG out to your favourite desktop illustration application to give it some addition love and attention. 

Geometry et al.

Thanks to the greatness of Pythagoras, the sum of the square on the hypoteneuse and the cost of colour printing, geometry is a lineated, black and white, static affair. Expensive books will colour the triangles, circles and other bits. With digital device delivered content, colour is a free, affordable and doesn't have to be a missing dimension in content. (While colour-blindness and accessibility become front-and-center attention points!)

And while discussing accessibility SVG has very strong support for assistive technologies. It supports Title and Description tags anywhere which can be used to easily create illustrations which can have read-aloud descriptions for

But it is not just colour. Enter... . The time dimension. The teacher introducing the concepts of radius, diameter and circumference of a circle on the black(white)board is using time as a learning tool (although they may not know it). We have to understand the hysterisis curve of learning. There are fast learners, slow learners and everyone in between. It is a truism that anyone can learn anything given enough time.

The power of well conceived and created interactive content is that the use of time and repetition equalizes learning opportunities while increasing learning motivation.

Fast, medium and slower learners can move forward at their own pace, while well constructed self-learning environments, supported by teachers when available, encourage all learners to ask questions and explore more.


Learn More About SVG Primitives

We have a growing collection of information and tutorial articles over on APEX@IGP, our digital content tutorial site. This is constantly updated. Current available articles on SVG Primitives are:

SVG Primitives - An Introduction

SVG Primitives - The Basic Tools

SVG Primitives - Basic Polygons.

SVG Primitives - Definitions

SVG Primitives - Arcs, Angles, Labels and Ticks

In preparation and soon available are:

SVG Primitives - How to Use and Customization SVG Primitives

SVG Primitives - Animation

No Learning Games

Learning is serious business and while the play aspect of learning undoubtably works with the young brain while the core concepts  of language and numbers are being learnt, education soon formalizes into a vocabulary and illustration driven learning framework.

We are currently working with publishers from India, the Philippines, China and Latin America to interprete print textbooks for digital interpretation. It's very hard and detailed work. Hence the SVG Primitives. That's 18 languages but in every market the maths line-art and graphs are nearly identical!

Print means the awesome colour illustrated versions are only available to the rich in these markets. The poor get the Government subsidized versions that are printed on cheap paper in the tens of millions.

Digital content says the quality, and improved learning experiences do not have to be a social-strata or ability-to-pay issue. The same awesome, interactive, richly illustrated content can be delivered to everyone, everywhere.

It has never been easier to design and digitize a maths or science text book than right-now with IGP:Digital Publisher.

Posted by Richard Pipe


comments powered by Disqus