Get involved

We believe that the Archer Runtime is a great basis for the development of interactive SVG graphics and would love to see the library grow. If you want to participtae in the development of Archer Runtime take a look into the code at Github

Make your svg reactive with a single line of code

Archer is able to control multiple transformations based on a single variable. It's remarkably easy to build complex transformation sets that are tailored specifically to your needs. In the following example you can see how the setValue function of the Archer Runtime is filled with a value based on the slider's position. Based upon this, the runtime executes the previously defined transformations.

Archer project integration

Integrating an Archer graphic in your project is as simple as it could be. With just a few lines of code you get your graphic up and running:


        <div id="instrumentgraphic"></div>


        <script src='export/libs/archer.min.js'></script>
        <script language='javascript' type='text/javascript'>

                var instrumentgraphicUrl = 'export/archer.graphic.svg';
                var instrumentconfigUrl = 'export/archer.config.json';
                var instrumentcontainer = document.getElementById('instrumentgraphic');

                var instrumentgraphic = archer.create(instrumentcontainer);

                instrumentgraphic.loadUrl(instrumentgraphicUrl, instrumentconfigUrl);
                instrumentgraphic.on('ready', function () {
                          instrumentgraphic.view.enableMouse(false, false);
                          instrumentgraphic.setValue('fuel', 100);
                          instrumentgraphic.setValue('rpm', 0);


Configuration of the needle's rotation:

All configurational data is stored in a JSON-file. Although it's not much of a task to write your own configuration (for more details take a look at our wiki) we recommend you try the Archer Editor. That makes it easy and comfortable to create your configuration: the JSON file is created when you publish your project. To access to the full range of possibilities you might want to give the Archer Editor Pro a shot.

"transformations": [
      "name": "rotate_needle",
      "type": "rotate",
      "element": "needle",
      "variable": "rpm",
      "frames": {
        "$min": {
          "name": "$min",
          "value": -29.9,
          "transition": "linear"
        "$max": {
          "name": "$max",
          "value": 210,
          "transition": "step"
      "transition": null,
      "priority": 120,
      "center": {
        "x": 174.4,
        "y": 180.8

view configuration file

Get Archer Editor in the stores