Learn Handcrafted SVG in 2017
1 November 2017
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
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