## Simulation of SVG visualizations

A CIF specification with CIF/SVG declarations can be simulated, and the connected SVG image or images are then visualized. This page discusses the following simulation related topics:

- Batik rendering library

- Unsupported SVG features

- Visualizer name

- Unused images

- Application order

- SVG visualization options

- Demonstrations

- Undo/reset

### Batik rendering library

The CIF simulator uses the free and open source Apache Batik SVG Toolkit to render SVG images. During initialization, the CIF simulator loads the SVG image file or files that the user provided, and subsequently has access to their XML trees. It then uses the Batik library to draw the SVG images represented by the XML trees.

### Unsupported SVG features

Multiple versions of the SVG standard exist. The above-mentioned Batik library supports version 1.1 of the SVG standard. Using an SVG image with unsupported SVG features results in the following error when the SVG file is opened in the ESCET IDE:

    ERROR: SVG image file "some_image.svg" is not an SVG file, is an invalid SVG file, or contains unsupported SVG features.
    CAUSE: invalid.element

### Visualizer name

For each SVG image that is used in the CIF model, an SVG visualizer is opened by the simulator. The SVG visualizer is given the name of the corresponding SVG file, without its path and its `.svg` file extension.

### Unused images

If an SVG image is connected to a CIF model, but there are no CIF/SVG input or output mappings connected to it, the image is not used to represent the state of the model, nor to control the model through interaction. In such cases, the simulator prints a warning to the console. Note that such warnings are printed even if a connected image has SVG copy and/or move declarations associated to it, but no input or output mappings.

### Application order

When the simulator is started, the SVG image is loaded. First, the CIF/SVG copy declarations are applied, to ensure all elements exist. For copies of copied elements, the former are applied after the latter, to ensure the elements that need to be copied actually exist. Besides that, the copy declarations from a CIF file are applied in the order in which they are specified (after elimination of component definition/instantiation). The copy declarations are only applied once.

After the copy declarations, the CIF/SVG move declarations are applied. The move declarations from a CIF file are applied in the order in which they are specified (after elimination of component definition/instantiation). The move declarations are only applied once.

The CIF/SVG output mappings are applied after that, for the initial state. After the output mappings have been applied, the resulting SVG image is shown by the simulator. The output mappings are applied again and again, as the state of the CIF model changes.

The output mappings from a CIF file are applied in the order in which they are specified (after elimination of component definition/instantiation). Note however, that the order does not matter, as all output mappings are unique and independent of each other.

Each mapping that is applied, results in an update of an attribute or text label. Either the new value is different from the previous value, or the value is updated to the value that was already there. The results of the mappings are cumulative. That is, the first mapping is applied to the original SVG image, the second mapping is applied to the image that resulted from applying the first mapping, the third mapping is applied to the image that resulted from applying the second mapping, etc.

During simulation, the simulator provides states to the SVG visualizer, which applies the mappings to each of those states, in order to generate frames. Whenever the mappings are applied, they are all applied, one after the other. Each mapping is applied once per frame. Between the application of the individual output mappings, the display is never updated. That is, only after all mappings are applied, is the visualization updated. This assures that the images are in a consistent state when they are rendered.

By changing the `width` and `height` attributes of the root `svg` element of an SVG image, it is possible to change the size of the image, and thus the canvas on which it is displayed during simulation. Changes to these attributes currently only have effect for the initial state. If the size of the image is changed during simulation, such changes are ignored.

### SVG visualization options

The SVG visualization option (Output: SVG visualization category) can be used to disable SVG visualization. By default, the option is enabled, and SVG visualization is used if the CIF file being simulated declares any CIF/SVG declarations. By disabling the option, SVG visualization is disabled, regardless of whether the CIF specification has any CIF/SVG declarations.

When simulating with SVG visualization, it is often useful to set a frame rate to enable real-time simulation.

### Demonstrations

For demonstrations and presentations, it can be useful to record a video of a simulation with SVG visualization. This removes the need to manually control the simulation during the presentation. Furthermore, a pre-recorded video can’t fail to execute, which can be a risk during live demonstrations. Finally, a pre-recorded video doesn’t change, and is not influenced by the performance of the computer on which the demonstration is given.

To record a video of the SVG visualization, screen recording or screen capturing software can be used. For instance:

- Snipping Tool for Windows (`Win`+`Shift`+`S`)

- Screenshot for Mac (`Shift`+`Command`+`5`)

- recordMyDesktop for Linux.

Ideally a capturing software supports capturing a region of the screen, so that it is for instance possible to only capture the visualization. Furthermore, it may be beneficial to be able to capture the mouse pointer, so that it is clear where interaction takes place, etc.

### Undo/reset

By undoing one or more transitions, or by resetting the simulation, the state may change. The SVG visualizer is automatically updated to reflect such changes.