A lightweight Open Source JS Library for SVG transformations and interactions with an intuitive API.

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": null,

               "transition": "linear"


          "$max": {

               "name": "$max",

               "value": 240.8441628092201,

               "transition": "step"



     "transition": null,

     "priority": 120,

     "center": {

     "x": 176.92809834199792,

     "y": 180.84412069881662



Get Archer Editor in the stores