Table of Contents
SVG Dynamic Themes
Content → Rocview → SVG Themes
This documentation is based on Rocrail Version 2.1.4966 dated 03.08.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
Path
The paths to the SVG symbols are:
| Path | Description |
|---|---|
svg/themes | Standard default SVG themes. |
svg/dynthemes | Dynamic optional SVG themes. |
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:
<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg> <svg ledsupport="true" width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> ... </svg>
The header of the SVG symbol code should have the following attributes set:
| Element | Attribute | Example | Meaning |
|---|---|---|---|
| svg | - | - | no LED attribute and no G-STATE will be used for this symbol |
| ledsupport | 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 |
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 | Example | Meaning |
|---|---|---|---|
| g | state | state="straight" | Rocrail specific control to execute this group at the given state |
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 "/>
| Element | Attribute | Example | Meaning |
|---|---|---|---|
| path | led | led="1" | Rocrail specific control to colorize STROKE and FILL |
| 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 |
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. |
This he following LED attribute values are defined:
| Name | Value |
|---|---|
| track or block | |
| occ | 1 |
| block | |
| blockstate | 2 |
| sensplus | 3 |
| sensmin | 4 |
| arrowplus | 5 |
| arrowmin | 6 |
| sensor | |
| stateoff | 2 |
| stateon | 3 |
| signal | |
| red | 2 |
| green | 3 |
| yellow | 4 |
| white | 5 |
| blank | 6 |
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:
Symbol List
— to be done —
