SVG Dynamic Themes

Signal elements

| File name: | "signalmain-r.svg" |
| Name attribute: | "signalmain" |

Besides the track color the colors for the red, green, yellow and white state are coded.
To support different addressing modes of this signal the states should have a list of the state name as well as the state number:
- state="red,0"
- state="green,1"
- state="yellow,2"
- state="white,3"

symbol

SVG code

red

green

yellow

white

<svg name="signalmain" ledsupport="true" width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <g>
    <!-- track -->
    <path stroke="rgb(000,000,000)" fill="rgb(000,000,000)" d="M 0,12 L 31,12 L 31,19 L 0,19 z "/>
    <path led="101" stroke="rgb(255,255,255)" fill="rgb(255,255,255)" d="M 8,14 L 23,14 L 23,17 L 8,17 z "/>
    <!-- signal -->
    <path stroke="rgb(000,000,000)" fill="rgb(000,000,000)" d="M 1,5 L 4,2 L 22,2 L 25,5 L 28,5 L 28,2 L 30,2 L 30,9 L 28,9 L 28,6 L 25,6 L 22,9 L 4,9 L 1,6 z "/>
    <!-- green -->
    <path led="103" state="green,1" stroke="rgb(000,090,000)" fill="rgb(000,090,000)" d="M 5,4 L 7,4 L 8,5 L 8,6 L 7,7 L 5,7 L 4,6 L 4,5 z "/>

    <!-- red -->
    <path led="102" state="red,0" stroke="rgb(255,000,000)" fill="rgb(255,000,000)" d="M 12,4 L 14,4 L 15,5 L 15,6 L 14,7 L 12,7 L 11,6 L 11,5 z "/>

    <!-- yellow -->
    <path led="104" state="yellow,2" stroke="rgb(090,090,000)" fill="rgb(090,090,000)" d="M 19,4 L 21,4 L 22,5 L 22,6 L 21,7 L 19,7 L 18,6 L 18,5 z "/>

    <!-- white -->
    <path led="102" state="white,3" stroke="rgb(000,090,000)" fill="rgb(000,090,000)" d="M 5,4 L 7,4 L 8,5 L 8,6 L 7,7 L 5,7 L 4,6 L 4,5 z "/>
    <path led="105" state="white,3" stroke="rgb(255,000,000)" fill="rgb(255,000,000)" d="M 12,4 L 14,4 L 15,5 L 15,6 L 14,7 L 12,7 L 11,6 L 11,5 z "/>
    <path led="105" state="white,3" stroke="rgb(090,090,000)" fill="rgb(090,090,000)" d="M 19,4 L 21,4 L 22,5 L 22,6 L 21,7 L 19,7 L 18,6 L 18,5 z "/>

    <!-- ID -->
    <rect txt="1" txtalign="center" x="0" y="21" rx="0" width="31" height="10" stroke="none" fill="none"/>
  </g>
</svg>

For coding the LED attribute see LED Attribute Values .

Multi aspect signal elements

| File name: | "hl_signalaspect-0.svg" |
| Name attribute: | "hl_signalaspect" |

A multi aspect signal is coded as a list of g states.
The first state must be coded as <g state="all"> which in general
- describes the track,
- the basic signal symbol with no lights and
- the placeholder for the ID of the Rocrail plan object.

The next g states describe the states of the signal starting with state 0 and ending with the last state - in this state it is state 23.

The file name requires a prefix (here "hl_") to be able to use more than one multi aspect signal.
The file name of multi aspect signals is constructed: prefix + "signalaspect-0" + ".svg" .
The file name of this example is "hl_signalaspect-0.svg".

symbol

SVG code

00

01

02

03

…
06

…

<svg name="hl_signalaspect" ledsupport="true" width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <g state="all">
    <!-- Track -->
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 0,12 L 31,12 L 31,19 L 0,19 z " />
...
    <!-- ID -->
    <rect txt="1" txtalign="center" x="0" y="21" rx="0" width="31" height="10" stroke="none" fill="none"/>
  </g>

  <g state="0">
   <!-- Hp 0 (Hl 13); Halt -->
   <!-- Leuchte 1 -->
    <path led="2" stroke="none" fill="rgb(255,000,000)" d="M 09,04 L 13,04 L 13,08 L 09,08 z " /> <!-- Leuchte 1 -->
  </g>
...
  <g state="6">
   <!-- Hl 5; Fahrt mit 100 km/h -->
   <!-- Leuchte 2blink,4,6 -->
    <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 " /> <!-- Leuchte 2 blink -->
    <path led="4" stroke="none" fill="rgb(255,255,000)" d="M 15,07 L 18,07 L 18,10 L 15,10 z " /> <!-- Leuchte 4 -->
    <path led="3" stroke="none" fill="rgb(000,255,000)" d="M 24,02 L 25,02 L 25,03 L 24,03 z " /> <!-- Leuchte 6.1 -->
    <path led="3" stroke="none" fill="rgb(000,255,000)" d="M 24,04 L 25,04 L 25,05 L 24,05 z " /> <!-- Leuchte 6.2 -->
    <path led="3" stroke="none" fill="rgb(000,255,000)" d="M 24,06 L 25,06 L 25,07 L 24,07 z " /> <!-- Leuchte 6.3 -->
    <path led="3" stroke="none" fill="rgb(000,255,000)" d="M 24,08 L 25,08 L 25,09 L 24,09 z " /> <!-- Leuchte 6.4 -->
  </g>
...
  <g state="23">
   <!-- 23 for blank -->
    <path stroke="none" fill="rgb(063,063,063)" d="M 09,04 L 13,04 L 13,08 L 09,08 z " /> <!-- Leuchte 1 -->
  </g>
</svg>

For coding the LED attribute see LED Attribute Values .