| 16.7. SVG Symbol Format | ||
|---|---|---|
 | Chapter 16. Debrief file formats |  |
| 16.7. SVG Symbol Format | ||
|---|---|---|
| | Chapter 16. Debrief file formats | |
Traditionally, symbols were hard-coded in Java code, within Debrief. When a new symbol was required, the graphically talented analyst would develop a set of pairs of coordinates for the new shape in Excel, then pass these to the maintainer, for their translation into source code. Adopting SVG as a standard is seen as a way to get artist-drawn icons and symbols into Debrief. Learn more about the symbols provided in Chapter 6, Symbol sets.
SVG files are XML-based language schema showing how to render the images. Debrief has implemented a subset of the SVG format. It supports the following shapes: Circle, Ellipse, Line, Poligon, Polyline and Rectangle. Any other shape would be ignored in the rendering process. There are also some extra rules to guarantee that all the icons in Debrief have a consistant appearance.
They must have a size of 100x100 pixels
There must be an circle shape having the id origin. It indicates where is the center of the image, which is important to place it
in the correct position on tracks, labels, etc. This origin is also the centre of rotation for the shape, for shapes that are able to rotate.
If the user needs the shape to be able to rotate, you need to set the Circle color to Green. If you need to remain aligned as the original, just assign any other color
Image filling is very similar to the regular SVG shape. If the style is set to `fill: none` or `fill-opacity: 0` it will be empty.
It could also be assigned using the traditional XML attribute `fill-opacity` instead of style.
In case you need to specify a color, you could do it using the attribute `fill`, assigning the color in hexagonal format.
<?xml version="1.0" encoding="utf-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline fill="#000000" fill-opacity="0" fill-rule="nonzero" stroke="#000000" stroke-width="5" points="5 53 20 24 35 53 50 24 65 53 80 24 95 53"/>
<polyline fill="#000000" fill-opacity="0" fill-rule="nonzero" stroke="#000000" stroke-width="5" points="5 76 20 47 35 76 50 47 65 76 80 47 95 76"/>
<circle id="origin" cx="50" cy="50" r="2.5" style="fill: rgb(255, 0, 0);"/>
</svg>
In this case, we have an image with two polyline shape. Also pay attention to the circle shape which _must_ have the `id` attribute value as `origin`.
<?xml version="1.0" encoding="utf-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon id="Triangle-2" points="49.5 0 67.5 100 32.5 100"/>
<circle id="origin" cx="50" cy="69" r="2.5" style="fill: rgb(0, 255, 0);"/>
</svg>
We have only one polygon in this case. Please notice that this shape is able to rotate according to the subject vehicle.
| |  | |
| 16.6. S2087 Track files |  | 16.8. Third Party BRT Format |