SVG files aren't always very suited to building animated, articulated objects, because the 'transform' system used by SVGs - although powerful - isn't designed in a way that works well with rotating complex parts and joints.

The SVGMarkup library allows you to create representations of articulated machines by creating pivot points.

To make a graphic of an articulated machine, you'll need to split the various parts of the machine into groups. They should be nested in a way that connects them appropriately - if making a human body, you might start with a group for the torso, which contains groups for the upper arms, and those upper arms contain the lower arms, which in turn contain the hands.

After your graphic is split up and correctly parented, add pivot points. These are small circles placed at the point where you want your parts to pivot (such as elbows, knees and shoulders). These will vanish when opened in the Infographic screens, but will be there as a visual reference when creating/editing your SVG file.

These pivot points should always be part of the parent group - the pivot point for your upper arm should be part of the body group, the pivot for the hand should be the lower arm. The point should have an id '<object-id>-pivot'. For example, a pivot point for a group with the id 'lowerarm' should be 'lowerarm-pivot'.

You can then substitute the location of any of these pivot points in your transform expressions - usually your rotate or scale statements - by writing '##' in your transform.

Let's look at an example…

<g id="body">
  <rect x="0" y="0" width="50" height="100" fill="black"/>
  <g id="upperarm" transform="translate(50 0) rotate({Shoulder.Angle) ##)">
     <rect x="0" y="0" width="100" height="10" fill="black"/>
     <g id="lowerarm" transform="rotate({Elbow.Angle} ##)">
        <rect x="100" y="0" width="100" height="10" fill="black"/>
     </g>
      <circle cx="100" cy="5" fill="red" r="10" id="lowerarm-pivot/>
    </g>
    <circle cx="50 cy="5" fill="red" r="10" id="upperarm-pivot/>
 

This has three visible elements - a rectangular, tall body, an upper arm, and a lower arm.

The upper arm and lower arm move around their given pivot points (at the shoulder and elbow, respectively) even if the body moves, or the arms change size, offset and shape.

See the rope shovel demo for an example of the system in action.