## First example

Let’s look at a first example of SVG visualization. Here, we use a trivial example, which nonetheless gives a quick overview of what the idea of SVG visualization is all about, and what it looks like.

Note that it is not necessary to fully understand what exactly is going on, or how it works. Those details should become clear after reading the remaining pages of the documentation.

### The SVG image

We use an SVG image with a single circle:

The element of the image that represents the circle is given id `lamp`, to be able to uniquely identify it. The SVG image is saved in a file named `lamp.svg`:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
      <circle id="lamp" style="fill:black;" cx="35" cy="35" r="25"/>
    </svg>

The SVG image has a size of 70 by 70 pixels if not scaled. It contains a single circle, with id `lamp`, `black` `fill` color, its center at x-coordinate `35` and y-coordinate `35`, and a radius of `25` pixels.

### The CIF model

We use the following CIF model:

    svgfile "lamp.svg";

    automaton lamp:
      cont t der 1.0;

      location Off:
        initial;
        edge when t >= 1.0 do t := 0.0 goto On;

      location On:
        edge when t >= 2.0 do t := 0.0 goto Off;

      svgout id "lamp" attr "fill" value if Off: "gray" else "yellow" end;
    end

This model describes not only the behavior of the lamp using a CIF automaton, but also contains two CIF/SVG declarations.

The SVG file declaration at the start of the model connects the SVG image from the `lamp.svg` SVG file to the model. For this to work, the `lamp.svg` file should be in the same folder as the CIF model file.

The CIF/SVG output mapping near the end of the model adapts a property of an element of the image, based on the state of the automaton. It sets the `fill` attribute of the element with id `lamp`, the circle of the image, to either of two colors: `silver` or `yellow`. If the automaton is in its `Off` location, the circle is silver. If the automaton is in its `On` location, the circle is yellow.

### Simulation

If we simulate the CIF model, the automaton starts in its `Off` location, and thus we see a silver circle:

After a bit of time and taking a `tau` transition, the automaton is in its `On` location. We then get a yellow circle:

If we let the simulator run for a while, we see that the lamp is turned on and off repeatedly. SVG visualization essentially turns into an SVG movie of a flashing lamp.