SVG customisation/personalisation demo

In practice, the personalisation and customisation controls would be separated into VLE preferences sections or similar. Some options below will only have an effect if the appropriate object is visible (not all head styles have both hair and headwear, for example).

The sample graphics would be part of learning objects viewed from the VLE.

Personalisation: create your avatar

MeFront MeBack MeRight

Customisation: choose your graphic set and options

Sample graphics: see the effects

Introduction goes here.

A job interview drawn in vector graphics.
A job interview will often see the applicant seated across a table from a panel of three interviewers.
A village cricket scene drawn in vector graphics.
Village cricket as played around the world is seldom merely a sporting event.

Notes

  1. This demo uses just enough crude coding to get it working. Production code would be somewhat differently architected, more effective and scalable.
  2. The SVG images should be basically responsive, and scale somewhat to different window sizes (with limits).
  3. The choices are limited to give an indication of working with enough visual distinction, and should not be taken as suggestions or blueprints.
  4. SVG is capable of providing more complex fills like patterns. These are not currently represented here.
  5. For convenience of building the demonstration, only one basic body geometry is supported here (for example, no gender/age/height/width/limb differences). To integrate different body geometries with graphic environments and objects, a system of alignments (baseline to ground, to chairs, hands to held objects) would probably need to be devised.
  6. Colour names are taken from standard web colours.
  7. Faces, expressions, hand shapes and other significant details are outside the scope of this demo.
  8. Circles with red and green dashed circumferences representing ball and socket joints are likely still visible in some cases, caused by some objects losing their style names in Illustrator. I haven't got round to cleaning up the code so they are automatically hidden. Nevertheless, they form a crucial part of the infrastructure for connecting heads and limbs, and rotating them around the correct point, so they are interesting to show.

Source code on Github.

Last updated: .