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.

Proposal for an Open Educational Resource vector graphics library

Abstract

Vector graphics can be used to illustrate learning materials in a variety of screen-based as well as print media. One of the main advantages of vector graphics is that they can be edited, restyled, broken apart and combined to suit many different purposes at any resolution. A collection of consistently-produced, open-licensed, open format vector graphics could form a component library that I believe would effectively complement an Open Educational Resource repository like Jorum or Re:Source.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Ecosystems category.

Introduction

Current Open Educational Resource repositories have the potential to revolutionise the creation of learning materials. However, some authors have reported difficulties in using current tools and technologies to produce the high-quality learning materials they can envisage. One area of difficulty might be in tools and resources for illustrating and diagramming, which often need technical and artistic skills, and/or expensive proprietary software, and/or result in graphic files that are difficult to combine, edit and reuse.

When I worked in learning materials production, we used vector applications like FreeHand and Illustrator, and we built up our own small libraries of vector components (symbols, components, equipment, charts) to reuse in future diagrams and illustrations. Perhaps something can be done across the sector, using open licences.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Fauna category.

Challenges

However, there are some issues that need to be addressed to allow authors, editors and other contributors to harness and build up such component libraries. When I was working on an online heraldic device generator, I was able to reuse fine examples of lions, eagles and dragons that others had created and released under open licences. Nevertheless, some significant reworking was needed to make the SVG compatible with my web application, primarily to allow for colour changes.

Some people might say, why not simply use existing clip art libraries, which often have collections of royalty-free vector graphics? There are a number of potential problems with these:

1. The licensing may be unclear or restrictive, or the actual provenance of the graphics uncertain. To be a proper fit for an OER repository, graphics should have clear provenance and use the same (Creative Commons, probably) licences as the rest of the resources.
2. Free clip art may be of dubious quality. Who could forget Microsoft's infamous globe with the poles in the wrong place, or clock with incorrect roman numerals? You may also get a surprise when trying to edit them, especially if they have been "flattened" (useful structure removed) or produced from line art by automated means.
3. The clip art may be in so varied styles that combining them would be painful and/or unacceptable.
4. The clip art may not form coherent or comprehensive collections that can be augmented as required.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Flora category.

Current environment for vector graphics

Current and recent versions of all major desktop (and most mobile) web browsers support the Scaleable Vector Graphic standard within HTML5 without need for plug-ins.

A range of SVG-supporting editing software, from the commercial Adobe Illustrator through the free Inkscape to the browser-based SVGedit are available.

Where vector graphics are not supported, they may be converted in bitmaps (rasterised) such as PNGs, which are used for the examples in this blog post. The original vector (such as SVG or Illustrator) files should always be supplied with the OER materials to allow editing.

Suggested specifications and technologies

Each vector graphic would be editable, repurposeable, restyleable, possibly with interchangeable components. They could be combined or taken apart to form new graphics. They would have consistent, semantic metadata and build up into collections.

1. There would be one or more distinct illustrative styles, such as symbolic, realistic, cartoon and so forth.
2. Each graphic would probably have a silhouette, which could be used as an outline (useful for infographics) or shadow.
3. Technologies: probably be SVG with CSS for styling. A standardized system of CSS classes should make styling easier when combining graphics or dropping them into websites.
4. The vector graphics would be suitable for web, print and games at any resolutions.
5. Unit sizes would need to be normalized to a small set of scales.
6. A wiki, style guide, tutorials and samples would be provided.
7. SVG may also be used for basic animations.
8. SVG inline in HTML5 may be scripted via the DOM.
9. SVG should be inherently more accessible than bitmap images due to possibilities of description, zooming, applying high contrast styles and otherwise being more amenable to user customisation.

Note, however, that vector graphics have their limitations, and bitmap formats like JPEG/JFIF are better for photographic and similar images.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Human category.

Examples

One of the best examples of such a library that I have found so far is the Integration and Application Network Symbol Libraries which contain over 2,700 symbols in six categories related to environmental science and ecology. These are in editable formats like SVG and Adobe Illustrator, and freely available under an attribution licence. They have a lot of documentation, videos, tutorials and a discussion forum for requests and submissions. They use a version of SVG Edit for their online conceptual diagram creator.

Summary and conclusion

I believe that open-licensed vector graphic component libraries could play an important role in supporting Open Educational Resources. The modern technological environment is more vector-friendly than ever, and there is now a very low entry threshold for educators who wish to add vector illustrations to their learning materials, with robust browser and mobile support; and free, online tools. Collections could be built up by communities of illustrators, editors and requestors, working to guidelines that can be developed as work progresses, informed by feedback from users and contributors.

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