Considerations and use cases for an Open Educational Resource vector graphics library

Abstract

Following on from a Proposal for an Open Educational Resource vector graphics library, here are some sample use cases and some general considerations for such a project.

Introduction

Where might you use vector graphics in Open Educational Resources? What opportunities, best practices and constraints might you consider?

This post is intended as a quick but wide run-through of some collected thoughts on these questions. As before, the focus will be on building collections of reusable, interoperable components that can be easily combined and edited, reducing the development effort and increasing the quality of learning materials.

Use cases

Configurable objects

You may require a graphic that represents a particular state of an object. One example might be an analogue clock showing a particular time. If you had to edit the clock manually by rotating the hands, this is relatively inconvenient and even error-prone. It would be simpler to input the time into a component which would then render the clock displaying the required time.

Example: Syringe.

Layers and transparency

1. anatomy of biological specimens
2. devices with removable cases and components
3. comparison, for example superimposition of two phenotypes of an insect
4. alternate and optional layers (such as various markings, patterns, uniforms, surface features over a principal figure)

Animation

1. processes and tasks
2. mechanical operations
3. transformations over time
4. causal chains

Flying Scotsman locomotive example.

Posable objects

Similar to animation are posable objects, which may have parts that can be transformed (rotated, scaled, skewed, translated and so on). Human figures may have rotatable limbs, for example, which could be handy if they were to hold a variety of objects.

Assessment multiple choice

A collection of shapes and symbols may be useful in multiple choice questions, and this is more powerful and flexible when these can be combined.

Sample Object-Match Question Type: What is Road Sign?

Positional diagrams and maps

Where the position of objects relative to each other in a bounded space is significant, such as in the cases of floorplans, maps, archaeological digs, crime scenes, team sport formations and so on, vector graphics can be effective at promoting the significant parts and reducing visual clutter (especially in conjunction with labels and styling, possibly a key).

Scenes

In other cases, possibly elevations (side on) rather than plan (top down) views, vector graphics can illustrate actors and objects, such as institutional settings, theatrical stages or public spaces. One typical use is, in conjunction with a painted scene, a smaller visual key with numbered shapes and labels. Example: John Trumbull's Declaration of Independence. This effect can also be achieved interactively by an invisible layer (or area map) with vector shapes plus labels that pop up as roll-overs.

Using illustrations where photographs may be problematic or less effective

1. where actual photographs may be too dangerous (say, depiction of accidents) or upsetting (violence)
2. where photographs would identify individuals (in an unwanted or unwarranted sense)
3. where available photographs would not meet standards of balance or inclusion
4. illustrations could replace photographs of children or other protected groups

Internationalization

Graphical representations may be more internationally recognizable, although there are often conventions to learn (not all cultures use the same representations and symbols). In SVG, like other markup languages, you can specify different languages for text.

Editable graphics may be customized to different cultures.

Low bandwidth

Efficient vector graphics suit mobile (many devices have chips optimized to handle SVG), slow dial-up connections, and are generally more losslessly-compressable than bitmap images.

Infographics

Infographics make particularly good use of outlines.

Cartoon panels

Sequences of cartoon-style panels can efficiently and effectively demonstrate processes and actions in a familiar storyboard way.

Games

There are whole genres of games that have used vector graphics, and some references may be especially effective at reaching certain audiences.

Engagement and humour

Sometimes, illustrations can quickly draw the viewer in through an emotional connection, often with the simplest of shapes (hence the popularity of smileys or emoticons). Humour, such as the skillful juxtaposition of incongruous objects, can also be engaging, although subjective.

The kind of gentle humour of Richard Scarry's illustrations is geared towards a younger audience, but the same principles apply to a lot of educational illustration (his cut-away aeroplanes show how jet engines work, for example, but in this case the narrative is driven by characters, their actions and reactions).

Considerations

What not to include

It would not seem necessary or advisable to include:

• symbols represented sufficiently as Unicode characters (although if more detail, variation or two or more foreground colours are needed, then inclusion may be reasonable)
• symbols and graphical components that are commonplace in drawing applications like Visio
• graphics which unduly duplicate others already in the library (bearing in mind that similiar variations should be able to be derived from a single source object)
• particularly sensitive or provocative imagery (although some image libraries, such as graphic medical content, could be published in a restricted manner)

Scale normalization

The purpose of having some kind of normalization of scale is not so much for printing or displaying at (multipliers of) actual size, but for combining objects in a way that can (if desired) preserve their relative sizes. Not all images have actual sizes though, and some look similar at different sizes/magnifications (like fractals) or fall into a wide range (like icebergs or clouds).

In the locomotive example mentioned above, the graphic is scaled at 1/100th (a centimetre of the graphic equalling 1 metre in the physical world).

Collections

Collections could be created in various subjects from various disciplines, for example:

• transport
• people
  • occupations
  • roles
• biology
  • taxonomy
  • processes

Organizing resources within collections makes it easier to spot (and fill) gaps, and run editorial and technical processes such as reviews and validations. It also makes it easier to pull graphic components into combined drawings with greater assurance that graphics from same collection (or sub-category thereof) would be interoperable.

As long as the objects were accessible over the Internet (indexable by search engines) and used consistent metadata schemes, collections would not need to be hosted in the same online location (website).

Metadata

SVG has specific elements for metadata.

Here is some advice I received from the CETIS-metadata list:

If your graphics are embedding an HTML OER then I would mark up that resource using schema.org. I would try to markup the HTML around the SVG as a separate item without having to putting any schema.org markup into the SVG (i.e. if it is a figure with a caption, I would put it in its own <div> and mark up the caption as the description). Similarly if the graphic is presented in isolation, on an HTML with some info about it you could mark that up with schema.org.

This seems like it should work, and I have tested that attributes are readable to search engines by using the Google Structured Data Testing Tool to check that both RDFa and schema.org metadata are being picked up (in a HTML5 page with embedded SVG).

There are still some tricky areas (subject vocabularies for classifying collections, artistic style vocabularies to indicate stylistic compatibility).

Graphic style

1. it might be best to avoid drawing shadows (outlines on hidden layers could be transformed into shadows cast on the ground) or shaded parts of surfaces, since combining graphics could give jarring results
2. scope could be provided for using corporate colours to replace two or three main (default) colours
3. viewpoints will vary: elevation, plan, perspective, distorted (and sometimes you will want the set, typically for built objects with clearly-defined facings)
4. limited set of artistic styles
   1. possibly a semi-realistic Ligne claire (clear, uniform lines; flat colour) style
   2. one or more simplified cartoon humour styles
   3. example A Student dreaming of her Graduation Day (unfinished, after Kitagawa Utamaro) in a Japanese graphic style
5. non-essential backgrounds should probably not generally be included, but if included then minimal and easily detached/removed;
6. human figures may be drawn in a few standard perspectives to facilitate their combination within a setting.

Combination with bitmap (raster) images

Structured graphics can contain bitmap images and text as well as vector components.

1. textures
2. hybrid (such as combining satellite photography with vector-based roads and location symbols in online mapping tools)

Technical

1. CSS style naming conventions to avoid collisions or allow overrides (see corporate colours).
2. drawing to a grid to simplify measurements, animations and translations.
3. At some point, newer formats or versions of formats will appear (like SVG 2), and over time older versions may become less supported (Adobe Illustrator CS5 won't open FreeHand drawings before version 7, it seems). Some way of managing file format versions is generally required, and every graphic object should have a clear indication of the type and version (for example, SVG 1.1) which is available to the repository search function.
4. 2D vectors from 3D possible, especially from CAD subjects.
5. SVG should work well with high resolution, small size ("Retina") screens and subpixel measurements.

Import and conversion

• SVG cannot be imported directly into Microsoft Word or PowerPoint. It may be possible to open SVG in the free Inkscape and save as Windows EMF format, which can be imported into these Microsoft Office products, although there may be some aspects which do not directly cross over.

Further steps

It should be possible to generate 2D vector graphics from 3D models. Software tools such as Swift 3D already do this.

Existing collections could be prepared/converted.

Open invitation to art colleges and industry? Celebrity contributions?

The kind of open community of IAN where people can request and submit symbols may well be the most successful model for organic growth and matching contributions to need, given a critical mass of requesters and contributors with the requisite spread of subject knowledge and skills.

To the extent possible under law, Sleeping Dog has waived all copyright and related or neighboring rights to the text of Considerations and use cases for an Open Educational Resource vector graphics library. This work is published from: United Kingdom.