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. The JSON file is created when you publish your project from the Archer Editor Pro.

"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