Table of Contents
SVG Dynamic Themes
Content → Rocview → SVG Themes
This documentation is based on Rocrail Version 2.1.4966 dated 03.08.2024 .
Update: Rocrail Version 2.1.5225 M4 dated 08.11.2024 .
Update: Rocrail Version 2.1.5254 M4 dated 17.11.2024 .
The development is still "Work In Progress" (WIP).
Introduction
SVG (Scalable Vector Graphics) symbols are used to define Rocrail object symbols to display the contents of a Rocrail plan file.
SVG symbols may be created and/or modified with the Rocview internal Rocview SVG Editor
List of Rocrail clients that consume themes and/or dynthemes:
| Rocrail Client | Plattform | themes | dynthemes |
|---|---|---|---|
| Rocview | Computer | yes | yes |
| RocWeb | Web-Browser | yes | no |
| andRoc | Android | yes | no |
| RocControl | iOS/iPadOS/macOS | no | yes |
Path
The paths to the SVG symbols are:
| Path | Description |
|---|---|
svg/themes | Standard default SVG themes. |
svg/dynthemes | Dynamic optional SVG themes. |
svg/userthemes | optional SVG themes for user symbols. |
svg/… | optional SVG themes. |
Themes configuration
Rocview
The SVG configuration for Rocview is done in "Rocview properties / SVG".
| Theme | Path | Load option |
|---|---|---|
| Theme 1 | /fullpathto/svg/dynthemes/mysvg | yes / no |
| Theme 2 | /fullpathto/svg/dynthemes/SpDrS60 | yes / no |
| Theme 3 | /fullpathto/svg/dynthemes/Accessories | yes / no |
| Theme 4 | /fullpathto/svg/dynthemes/Roads | yes / no |
| Theme 5 | . | yes / no |
| Theme 6 | . | yes / no |
Themes with Load= yes are used only.
The sequence of loading the symbols is from top to bottom (Theme 1 to Theme 6).
Symbols that are already loaded are not overwritten.
With that own symbols listed first will replace standard symbols.
RocControl
The SVG configuration for RocControl is done in "Rocrail properties / SVG".
| Theme | Path |
|---|---|
| Theme 1 | /fullpathto/svg/dynthemes/mysvg |
| Theme 2 | /fullpathto/svg/dynthemes/SpDrS60 |
| Theme 3 | /fullpathto/svg/dynthemes/Accessories |
| Theme 4 | /fullpathto/svg/dynthemes/Roads |
| Theme 5 | . |
| Theme 6 | . |
The sequence of loading the symbols is from top to bottom (Theme 1 to Theme 6).
Symbols that have already been loaded are not overwritten.
With that own symbols listed first will replace standard symbols.
- see RocControl
In addition:
- The path must be accessible by the Rocrail server.
- RocControl identifies the symbols based on the “name” attribute of the SVG symbol (not by the file name).
- Rocrail provides a default build-in theme for RocControl if none is set in the SVG list.
- User defined SVGs must be of type Dynamic and the path must contain "dynthemes".
Construction Details
Supported Elements
An "SVG Tutorial" can be found at https://www.w3schools.com/graphics/svg_intro.asp
A SVG symbol code may use any SVG element but … .
- the standard SVG symbol measures 32 x 32 pixels;
- so a circle with its radius value can not be centered inside that symbol, because of having to use integer values for any coordinate;
- …
| Element | Meaning |
|---|---|
| svg | header |
| g | group; at least one g has to be present |
| path | to create simple or complex shapes |
| rect | to create a rectangle |
| circle | to create a circle |
| ellipse | to create an ellipse |
| line | to create a line |
| polygon | to create a graphic that contains at least three sides |
| polyline | to create any shape that consists of only straight lines |
The preferred element for drawing is the <path>.
Header Attributes
Examples:
- theme SVG symbol header:
<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg>
- dyntheme SVG symbol header:
<svg name="hl_signalaspect" ledsupport="true" width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg>
The header of an SVG symbol may contain the following attributes:
| Element | Attribute | required | Example | Meaning |
|---|---|---|---|---|
| svg | - | yes | - | no LED attribute and no G-STATE will be used for this symbol |
| name | dynthemes | name="hl_signalaspect" | the name of the symbol to be identified on clients | |
| ledsupport | dynthemes | ledsupport="true" | Rocrail specific; LED attributes will be used for this symbol; in case of switches G-STATE will also be used for this symbol |
|
| width | yes | width="100%" | the size of the symbol; a fix value of 100% | |
| viewBox | yes | viewBox="0 0 32 32" | the viewBox of the symbol; starting at 0 0; width and hight must be a multiple of 32; max= 128; |
|
| xmlns | yes | xmlns="http://www.w3.org/2000/svg" | a link to the namespace; a fix value of "http://www.w3.org/2000/svg" |
SVG Element Attributes
SVG Element G
Examples:
<g state="straight"> ... </g> <g state="turnout"> ... </g> <g state="left"> ... </g> <g state="right"> ... </g>
| Element | Attribute | Examples | Meaning |
|---|---|---|---|
| g | - | <g> | normal, no attributes |
| state | state="straight" | Rocrail specific control to execute this group at the given state | |
| state | state="green,yellow,1,2" | The state value may be a comma separated list (csv); That state handles the green and yellow state as well as the aspects 1 and 2 of a signal, depending on the used addressing scheme. |
SVG Element PATH
Examples:
<path led="1" stroke="rgb(192,192,192)" fill="rgb(192,192,192)" d="M 8,14 L 23,14 L 23,17 L 8,17 z "/> <path led="2" stroke="black" fill="rgb(255,0,0)" d="M 2,6 L 6,2 L 27,2 L 23,6 L 27,10 L 6,10 z "/> <path led="3" alt="true" stroke="none" fill="rgb(000,255,000)" d="M 04,02 L 07,02 L 07,05 L 04,05 z " />
| Element | Attribute | Example | Meaning |
|---|---|---|---|
| path | led | led="1" | Rocrail specific control to colorize STROKE and FILL |
| alt | alt="true" | this element should use blinking; see hint below | |
| stroke | stroke="black" | sets the color of the line around an element; use the implicit STROKE-WIDTH of 1 |
|
| fill | fill="rgb(192,192,192)" | sets the color of the inside of an element | |
| d | d="M 8,14 L 23,14 L 23,17 L 8,17 z " | a set of commands which define the path; M = moveto; L = lineto; Z = close path; … with comma separated x,y points; x and y must be integer values |
Hint: for blinking use the context menu of the object in the Rocrail plan and activate "Enable alternative SVG".
SVG Element RECT
Examples:
<rect txt="1" x="0" y="0" rx="0" width="31" height="10" stroke="none" fill="none"/> <rect x="0" y="0" rx="0" width="1" height="1" stroke="rgb(0,0,255)" fill="rgb(0,0,255)"/>
| Element | Attribute | Example | Meaning |
|---|---|---|---|
| rect | led | led="1" | Rocrail specific control to colorize STROKE and FILL |
| txt | txt="1" | Rocrail specific; to specify the location of the symbols ID string; will only work with RECT; |
|
| x | x="0" | the x-position of the top-left corner of the rectangle | |
| y | y="0" | the y-position of the top-left corner of the rectangle | |
| rx | rx="0" | the rx attribute defines the radius of the corners of the rectangle | |
| ry | ry="0" | the ry attribute defines the radius of the corners of the rectangle | |
| stroke | stroke="black" | sets the color of the line around an element; use the implicit STROKE-WIDTH of 1 |
|
| fill | fill="rgb(192,192,192)" | sets the color of the inside of an element |
LED Attribute Values
The normal LED attribute values are in the range of 1 to 99.
With offsets to the normal value the meaning can be expanded:
| LED | Offset | Meaning | Remark |
|---|---|---|---|
| - | - | the colors inside the SVG symbol are displayed | |
| led="x" | +0 | the FILL color will be set to the actual state color | |
| led="x" | +100 | the STROKE color will also be set to the actual state color | |
| led="x" | +200 | the STROKE color will be set to the black color | |
| led="x" | +300 | the STROKE becomes the state color and FILL will be set to none (transparent) | Can be used for testing the text frames. |
| led="x" | +400 | the FILL color will be used from attribute fillon and filloff. (Own color independent from theme properties.) | For type output. |
The following LED attribute values are defined:
| Name | Value | Illumination Colors |
|---|---|---|
| track (also track inside sensor or signal) | ||
| occ | 1 | Free, Occupied, Reserved, Shunt |
| block | ||
| occ | 1 FILL | Free, Occupied, Reserved, Enter, Closed, Ghost, Short circuit, Accept ident see also Block State |
| occ | 1 STROKE | Shunt (colorizes the frame of the block symbol) |
| blockstate | 2 | colors see State Signal |
| sensplus | 3 | Input off, Input on |
| sensmin | 4 | Input off, Input on |
| arrowplus | 5 | STROKE / FILL defines the color |
| arrowmin | 6 | STROKE / FILL defines the color |
| button, output | ||
| stateoff | 2 | Output off |
| stateon | 3 | Output on |
| sensor | ||
| stateoff | 2 | Input off |
| stateon | 3 | Input on |
| signal | ||
| red | 2 | Red |
| green | 3 | Green |
| yellow | 4 | Yellow |
| white | 5 | White |
| blank | 6 | Blank |
| multi aspect signal | ||
| aspect no. 00…31 | STROKE / FILL defines the color of that aspect | |
| sensor register | ||
| stateoff, stateon | 2..9 for sensors 1..8 | Input off, Input on |
| double crossing switch | ||
| markers above | 6 | STROKE / FILL defines the color |
| markers below | 7 | STROKE / FILL defines the color |
If a certain light should be off the color for "blank" is displayed.
SVG Illumination Properties
Each SVG theme folder will contain the file "properties.xml" which contains the illumination properties for that SVG theme. The contents can be edited at Rocview Properties / SVG / Theme X / Properties
One example is shown below:
The main usage is:
| Color | Main Usage |
|---|---|
| Free, Occupied, Reserved, Shunt | track, block |
| Enter, Closed, Ghost, Short circuit, Accept ident | block |
| Automatic, Half automatic, No destination | state |
| Output on, Output off | button, output |
| Input on, Input off | sensor |
| Red, Green, Yellow, White, Blank | signals |
| Slip | switch |
SVG runtime computing
Computing the color:
 | A locomotive starts using a route this track belongs to. So the color of the track should change from white („Free”) to yellow („Reserved”). The code of the SVG symbol with the attribute led=„101” defines the geometric part of the symbol that has to change the color. The RGB values of the state colors are defined in the „Illumination properties” of the main theme. |
Computing the visual appearance:
 | Here each state requires an own visual appearance. state="straight" as well as state="turnout" describes the symbol completely. The common placeholder for the object ID is the only common part and is placed therefore in state="all". |
Symbol List
For some SVG dynamic theme symbols detailed examples are listed below:
| Symbol | File | Object |
|---|---|---|
 | straight.svg | track |
 | sensor-off.svg | sensor |
 | accessory-6-off.svg | sensor register |
 | button-0-off.svg | button |
 | turnoutleft.svg | switch |
 | signalmain-r.svg | signal |
 | hl_signalaspect-0.svg | multi aspect signal |
 | block.svg | block |
 | block-state-min.svg | block with state signal |
 | blockstate.svg | state signal |
Test workspace
A detailed test workspace can be found at SVG Dynamic Themes Test