Scalable Vector Graphics (SVG)
The SVG visualization feature uses Scalable Vector Graphics (SVG) images. SVG is a widely-deployed royalty-free standard for two-dimensional vector graphics, developed by the World Wide Web Consortium (W3C). SVG images consist of three types of objects: vector graphic shapes (rectangles, circles, etc.), raster images, and text. The benefit of vector images formats over raster image formats, is that raster images are created with a fixed size, while vector images contain a description of the image and can be rendered at any size without loss of quality.
Multiple versions of the SVG standard exist. The CIF simulator uses the free and open source Apache Batik SVG Toolkit to render SVG images. Batik supports version 1.1 of the SVG specification. Using an SVG image with unsupported SVG features results in the following error when the SVG file is opened in Eclipse:
ERROR: SVG image file "some_image.svg" is not an SVG file, is an invalid SVG file, or contains unsupported SVG features.
CAUSE: invalid.elementSVG image files are stored in an XML-based file format. This means that they can be edited with any text editor. However, it is often more convenient to edit them with a drawing program that supports vector graphics, such as Adobe Illustrator or Inkscape. Most modern web browsers also support SVG images.
Since SVG images are essentially XML files, we get all the benefits of XML for free. One of those benefits is that XML files represent tree structures, which can be easily manipulated by applications. This is essential for the CIF simulator. During initialization, the CIF simulator loads the SVG image file that the user provided, and subsequently has access to the XML tree. It then uses the aforementioned Batik toolkit to draw the SVG image represented by the XML tree. Once the simulator starts taking transitions and updates its state, it can use the information from the state to modify the XML tree. Changes to the XML tree then result in an updated SVG image, the next time the image is rendered again.
In order to be able to modify particular objects (shapes, text labels, etc.) of the SVG image, the simulator should be able to identify the objects that make up the image. Here we once again reap the benefits of XML. All nodes (called elements) in the XML tree can have an id attribute that specifies the id (also called name or identity) of the element. As such, all SVG objects can be identified using their unique id. The SVG element id section of the CIF/SVG output mappings page further explains the use of SVG element ids.
The website of Jakob Jenkov has a very nice SVG Tutorial.