## CIF/SVG declarations

CIF supports visualizing the state of a model using SVG images, as well interacting with these images during for instance a simulation. To better understand these concepts, see the CIF tutorial lessons on SVG visualization and SVG interaction. Here, we focus more on their technical details.

SVG images can be connected to the CIF model, the images can be updated based on the state of the model, and clicks on elements of the images can be used to influence the behavior of the model. All of these connections are specified in a CIF model using CIF/SVG declarations (sometimes also called SVG declarations, for simplicity).

The following types of CIF/SVG declarations are available:

- SVG file declarations: Specifies which SVG image file to use.

- CIF/SVG copy declarations: Specifies that a part of an SVG image should be copied.

- CIF/SVG move declarations: Specifies that a part of an SVG image should be moved.

- CIF/SVG output mappings: Specifies how to update a certain property of an element of an SVG image.

- CIF/SVG input mappings: Specifies how interaction with an SVG image, by clicking on certain elements of an image, affects the behavior of the model.