Navigation:

• Zurück zur Übersicht der Nutzerseiten
  
  
• Auf meinen Seiten:
  • Tipps & Tricks
  • SVG-Spielereien (auf dieser Seite)
  • Eigene SVG-Symbole
  • XML-Skripte

Wir bauen uns ein eigenes Symbol. Nur wie? Und warum eigentlich? Letzteres sollte man sich allerdings schon vorher überlegt haben.

Man nehme ein kariertes DIN-A4-Blatt und zeichne sich mit Hilfe eines Kugelschreibers und eines Lineals ein Quadrat in der Größe 16x16cm ein. Wie viele Kästchen sind das? Es sind 32x32. Und 32x32 (Pixel) ist die Standard-Größe eines Plan-Feldes.

Größere Symbole brauchen mehrere Plan-Felder und somit ein größeres Blatt Papier. Oder Millimeterpapier. Und dann vielleicht eine Lupe dazu. Das Block-Symbol hat z.B. die Größe 128x32 Pixel - es erstreckt sich über vier Plan-Felder.

Für den Anfang tut's ein kleines Symbol und wir beschränken uns auf das 16x16cm große Quadrat mit den 32 waagerechten und 32 senkrechten Kästchen. Das Kästchen ganz links oben hat die Koordinaten 0,0 (x=0,y=0), das Kästchen ganz rechts oben hat die Koordinaten 31,0, das Kästchen ganz unten rechts 31,31 und das Kästchen ganz unten links 0,31. Es empfiehlt sich, diese Koordinaten außen an das Quadrat zu schreiben, um sich hinterher die Zählarbeit zu erleichtern.

Nun kann man fröhlich drauf los zeichnen. Dabei sollte man sich am Anfang aber sehr zurückhalten und etwas sehr einfaches nehmen. Z.B. ein Rechteck. Das zeichnet man sich irgendwo innerhalb der Markierung mit Bleistift ein. Und zwar innerhalb der Kästchen, nicht auf den Linien. Man kann auch die Kästchen ausmalen… Muss man aber nicht.

An die Eckpunkte kann man sich nun die Koordinaten schreiben. Z.B. könnte das Rechteck oben links im siebenten Kästchen beginnen. Das ist die Koordinate 6,0. Vorsicht: Siebtes Kästchen ist sechs, denn die Zählung beginnt bei Null! Man fängt übrigens besser in Zeile eins statt null an, also am besten beginnt das Rechteck bei 6,1. Vielleicht geht es bis Spalte 25, dann schreibt man sich an diesen Punkt 25,1. Und nun nach ganz unten, bis in Zeile 31, das ist dann der Punkt 25,31. Dann nach links bis 6,31 und nach oben zurück zu 6,1.

Und nun nimmt man sich einen Texteditor und schreibt sein Symbol, denn gezeichnet wird hier wirklich nur auf dem Papier.

<svg width="32" height="32">
  <g>

sind die ersten Zeilen mit denen die vorher erwähnte Größe von 32x32 Pixeln definiert und der Beginn markiert wird. Jetzt kommt das Rechteck, z.B. so

     <path stroke="rgb(0,0,0)" fill="rgb(255,255,255)" d="M 6,1 L 25,1 L 25,31 L 6,31 z " />

path sagt, dass das nun folgende ein "Pfad" ist, stroke ist der Strich und wie der beschaffen sein soll, steht hinter dem Gleichheitszeichen: "rgb(0,0,0)" bedeutet, dass hier mit RGB-Farben (also der Mischung aus Rot, Gelb und Blau) gearbeitet werden soll und alle drei stehen auf 0 (Null). Das heißt: Schwarz. Fill ist die Füllung des gesamten gleich zu zeichnenden Dings. Wie die beschaffen sein soll, steht auch wieder hinter dem Gleichheitszeichen. Ganz wie zuvor erfolgt hier die Angabe der Farbe und drei Mal 255 ist weiß.

Nun wird's spannend: d ist die Zeichnung und die beginnt mit M (move), mit der Bewegung des imaginären Zeichenstiftes an die Startposition. Hier, an 6,1 wird der Stift auf's imaginäre Papier gesetzt und dann geht es los: L (eine Linie) nach 25,1 (waagerecht nach rechts), weiter mit Linie nach 25,31 (senkrecht nach unten), weiter mit Linie nach 6,31 (waagerecht nach links). Schließen muss man die Figur nicht, dafür sorgt das kleine z am Ende automatisch. Es muss übrigens immer dort stehen.

Fehlt noch der Abschluss:

  </g>
</svg>

Schon ist ein Symbol mit einem weißen Rechteck mit schwarzem Rand fertig. Kann man nichts mit anfangen, macht aber nichts. Die gesamte Definition sieht dann also so aus:

<svg width="32" height="32">
  <g>
     <path stroke="rgb(0,0,0)" fill="rgb(255,255,255)" d="M 6,1 L 25,1 L 25,31 L 6,31 z " />
  </g>
</svg>

Diesen "Text" speichert man unter einem Namen wie "Symbol.svg". Dazu unbedingt die Hinweise weiter unten beachten. Die Grafik kann - und sollte - man sich danach anzeigen lassen. Das geht z.B. mit Inkscape sehr gut. Wenn die Grafik nicht so aussieht, wie erhofft, hat man sich vermutlich vertippt. Vielleicht fehlt irgendwo ein Leerzeichen, ein "L" oder ein Anführungszeichen…

Dieses Symbol für einen Ausgang (Schalter) basiert auf dem eben hergeleiteten Rechteck. Man kann also doch etwas damit anfangen! Dazu kommt noch das "H", sowie hier im Beispiel für die Schalterstellung "aus" ein diagonaler, roter Balken. Die SVG-Definition kann man bei Bedarf mit Kommentaren schmücken, wie unten gezeigt.

<svg width="32" height="32">
  <g>
    <!-- Schaltersymbol in Form einer H-Tafel, Stellung OFF -->
    <!-- Schwarzer Rahmen und weisse Fuellung -->
    <path stroke="rgb(0,0,0)" fill="rgb(255,255,255)" d="M 6,1 L 25,1 L 25,31 L 6,31 z " />
    <!-- Das H in doppelter Linienstaerke -->
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,7 L 10,24 L 11,24 L 11,7 z " />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 21,7 L 21,24 L 20,24 L 20,7 z" />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,15 L 21,15 L 21,16 L 10,16 z" />
    <!-- Roter, diagonaler Strich -->
    <path stroke="rgb(255,0,0)" fill="rgb(255,0,0)" d="M 6,30 L 24,1 L 25,1 L 6,31 z" />
  </g>
</svg>

Wie das fertige Symbol aussieht und was man damit machen kann ist unter Schalter-Symbol für Warten beschrieben.

Wie man an diesem Schnipsel erkennt,

    <!-- Das H in doppelter Linienstaerke -->
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,7 L 10,24 L 11,24 L 11,7 z " />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 21,7 L 21,24 L 20,24 L 20,7 z" />
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 10,15 L 21,15 L 21,16 L 10,16 z" />

wurde das "H" aus drei Teilen zusammen gesetzt: Erst der linke senkrechte Strich, dann der rechte, dann der waagerechte Strich. Das ist relativ übersichtlich und schnell gemacht, erfordert aber drei Zeilen, wo eigentlich nur eine nötig ist. So könnte es nämlich auch aussehen:

    <!-- Das H in doppelter Linienstaerke -->
    <path stroke="rgb(0,0,0)" fill="rgb(0,0,0)" d="M 11,24 L 11,16 L 20,16 L 20,24 L 21,24 L 21,7 L 20,7 L 20,15 L 11,15 L 11,7 L 10,7 L 10,24 z " />

Mit dieser etwas länglichen Code-Zeile wird sozusagen die gesamte Kontur des Buchstabens in einem Rutsch abgefahren. Malen nach Zahlen ist das tatsächlich.

Der einfache und schnelle Weg sich ein individuelles Symbol zu erstellen, ist die farbliche Änderung eines bestehenden Symbols. Die Signal-Symbole sind zu Beispiel weitgehend auf diesem Weg entstanden.

Als Beispiel soll hier ein einfacher Ausgang dienen, das bekannte, rechteckige Symbol, dass entweder rot oder grün (oder gelb) ausgeleuchtet ist.

Im Themen-Ordner der Rocrail-Installation im Ordner SpDrS60 findet sich die passende Datei. Für den eingeschalteten, also grünen Ausgang ist der Dateiname button-0-on.svg. D.h. Button (Knopf / Schalter), SVG-# 0, eingeschaltet. Lädt man diese Datei in einen Editor, dann sieht die Symboldefinition so aus:

<svg width="32" height="32">
  <g>
    <path stroke="rgb(192, 192, 192)" fill="rgb(255, 255, 255)" d="M 1,1 L 30,1 L 30,30 L 1,30 z " />
    <path stroke="rgb(192, 192, 192)" fill="rgb(192, 192, 192)" d="M 3,3 L 28,3 L 28,28 L 3,28 z " />  
    <path stroke="rgb(0,0,0)" fill="rgb(255,255,255)" d="M 7,7 L 24,7 L 24,24 L 7,24 z " />  
    <path stroke="rgb(128,128,128)" fill="rgb(128,128,128)" d="M 23,9 L 23,23 L 9,23 L 10,22 L 22,22 L 22,10 z " />  
    <path stroke="rgb(0,255,0)" fill="rgb(0,255,0)" d="M 10,10 L 21,10 L 21,21 L 10,21 z " />  
  </g>
</svg>

Da bekannt ist, dass dieses Symbol grün ausgeleuchtet ist, muss nun diese Farbe gesucht werden. In der RGB-Schreibweise ist die Farbe Grün als (0,255,0) verschlüsselt. Heißt: Kein Rot, maximal Grün, kein Blau.
Das findet man wo? Genau, in der letzten Zeile:

<path stroke="rgb(0,255,0)" fill="rgb(0,255,0)" d="M 10,10 L 21,10 L 21,21 L 10,21 z " />

Ersetzt man an beiden Stellen (0,255,0) durch (255,255,255) ergibt sich für die letzte Zeile:

<path stroke="rgb(255,255,255)" fill="rgb(255,255,255)" d="M 10,10 L 21,10 L 21,21 L 10,21 z " />

Damit wäre der eingeschaltete Ausgang nun weiß ausgeleuchtet. Diese geänderte Datei kann man nun speichern, z.B. unter dem Dateinamen button-10-on.svg. Dazu unbedingt die Hinweise weiter unten beachten.

Danach öffnet man noch button-0-off.svg, die Datei des roten, ausgeschalteten Ausgangs.
Hier sieht die letzte Zeile so aus:

<path stroke="rgb(255,0,0)" fill="rgb(255,0,0)" d="M 10,10 L 21,10 L 21,21 L 10,21 z " /> 

Ersetzt man nun z.B. (255,0,0) durch (0,0,255), erhält man folgende Zeile:

<path stroke="rgb(0,0,255)" fill="rgb(0,0,255)" d="M 10,10 L 21,10 L 21,21 L 10,21 z " /> 

und hat damit eine blaue Ausleuchtung des ausgeschalteten Ausgangs. Dafür muss die geänderte Datei natürlich noch gespeichert werden, hier unter button-10-off.svg.

So sehen die beiden Symbole dann aus:

#10
aus	ein

Eigene Symbole sollten nicht in einem bei der Rocrail-Installation erstellten Ordner wie etwa SpDrS60 abgelegt werden, sondern in einem eigenen Themenordner. Bei mir heißt der schlicht besra. Dahin speichert man seine Symbole und ist somit sicher, dass sie bei einem Update nicht überschrieben werden. Dennoch sollte man den Inhalt dieses Ordners zusätzlich an anderer Stelle sichern (USB-Stick oder ähnliches).

An die Namenskonvention (für Ausgänge: button-<NUMMER>-<ZUSTAND>.svg) muss man sich halten. Außerdem sollte man darauf achten, eine NUMMER zu verwenden, die noch nicht in einem anderen Thema vergeben ist. Beispielsweise gibt es im Thema SpDrS60 bereits Ausgänge mit den NUMMERN 0 bis 5. In anderen Themen kann es noch mehr geben.

Die Namenskonventionen sind im Detail hier aufgelistet.

Der Router ist ein nützliches Werkzeug zum automatisierten Erstellen von Fahrstraßen. Er unterstützt jedoch nur Standard-Symbole aus den Themen SpDrS60 und Slim / Slim-Colour sowie einige Symbole aus dem Zubehör-Thema.

Das bedeutet: Eigene Symbole werden generell nicht unterstützt! Eine Ausnahme bilden Symbole, die nur anders gefärbt / geformt sind, aber unter dem "normalen" Symbol-Namen gespeichert werden. Beispielsweise ein Form-Hauptsignal, bei dem nur die Anordnung der "Lampen" geändert wurde. Aber allgemein gilt: Der Router erstellt keine Fahrstraße, sobald er auf ein unbekanntes, selbst erstelltes Symbol trifft!

Eine mögliche Abhilfe ist es, die eigenen Symbole erst nach einem erfolgreichen Routerlauf einzubinden, d.h. zuerst Standard-Symbole in den Gleisplan einzubauen, dann die Fahrstraßen erstellen zu lassen und danach die Symbole gegen eigene auszutauschen. Sicherheitshalber sollten in Fahrstraßen, in die nachträglich eigene Symbole eingearbeitet wurden, das Häkchen im Kontrollkästchen automatisch erzeugt entfernt werden. Dadurch ist sichergestellt, dass solche Fahrstraßen vom Router zukünftig nicht mehr beachtet werden, also bei einem erneuten Routerlauf nicht gelöscht werden können.
Außerdem können Fahrstraßen selbstverständlich ganz ohne Router erstellt werden. In der Schritt-für-Schritt-Anleitung gibt es dazu ein eigenes Kapitel: Fahrstraßen manuell anlegen.

Symbole in Rocrail einzubinden, ist ein mehrstufiger Prozess. Ich beschreibe es hier für Windows, weil ich andere Betriebssysteme zu wenig kenne.

Wer einige meiner Symbole haben möchte, der bekommt von mir ein ZIP-Archiv. Dieses muss zunächst entpackt werden. Im Archiv befindet sich ein Ordner besra.
Nun muss sichergestellt sein, dass Rocrail beendet ist. Dann öffnet man einen Dateimanager seiner Wahl (z.B. einfach den Explorer) und navigiert zum Rocrail-Ordner unter Dokumente. Der vollständige Pfad lautet

c:\Users\<Benutzername>\Documents\Rocrail

In diesem Ordner befindet sich ein Ordner mit dem Namen svg. Diesen öffnen. Es sollte nun mindestens der Ordner themes zu sehen sein. Sofern es nur den Ordner themes gibt, sollte an dieser Stelle ein neuer Ordner mit dem Namen userthemes angelegt werden. Wenn das geschehen ist gibt es jetzt im Verzeichnis zwei Ordner: themes und userthemes. Den zuvor entpackten Ordner besra aus dem Archiv nach userthemes kopieren.

Damit eigene Symbole im Plan angezeigt werden, muss der entsprechende Themenordner nun noch in den Rocview-Eigenschaften definiert werden. Dazu muss Rocview gestartet werden. Menü Datei → Rocview Eigenschaften… öffnen und dann auf die Registerkarte SVG wechseln.
Meist ist es das Einfachste, den eigenen bzw. meinen Themenordner als Thema 1 anzulegen. Bei mir sieht das so aus:

Themensortierung in den Rocview-Eigenschaften, Reiter SVG Achtung: Bei mir befindet sich der Ordner besra im Gegensatz zum vorher Beschriebenen noch unter themes und nicht unter userthemes!

Es empfiehlt sich, die vorgegebene Schreibweise der Pfadangaben beizubehalten, also etwa

svg/themes/SpDrS60

oder

svg/userthemes/besra

Man kann aber auch die Schaltfläche […] verwenden und den Ordner darüber suchen. Der Pfad wird dann betriebssystemabhängig ausgefüllt, das sähe dann z.B. so aus:

C:\Users\<Benutzername>\Documents\Rocrail\svg\themes\SpDrS60

Wenn der eigene Themenordner an erster Stelle steht, dann versucht Rocview die Symbole zunächst aus diesem Ordner zu laden, nur Symbole, die es dort nicht findet, werden in den weiteren Themenordner gesucht.

Weitere Beschreibungen zum Rocview-Eigenschaften-Dialog finden sich hier.

Rocview muss nach dieser Änderung neu gestartet werden, erst dann werden die eigenen Symbole geladen.

Nach einem Neustart sind jetzt alle gleichnamigen Symbole durch eigene ersetzt. Beispielsweise ersetzt das eigene Form-Block-Signal nun das ursprüngliche aus dem SpDrS60-Thema. Zusätzliche Symbole, wie etwa das Schalter-Symbol für Warten müssen darüber hinaus im Plan konfiguriert werden.

Soll etwa das Schalter-Symbol für Warten an Stelle eines normalen Ausgangs-Symbols erscheinen, so öffnet man den Eigenschafts-Dialog des entsprechenden Ausgangs. Auf dem Reiter Allgemein trägt man im Feld SVG die Zahl 6 ein und übernimmt diese Änderung. Daraufhin erscheint statt des normalen Ausgangssymbols die H-Tafel. Will man den blau/weißen Schalter aus dem Beispiel oben verwenden, trägt man statt 6 die Zahl 10 in das Feld ein.

Einige der auf meinen Seiten beschriebenen Signal-Symbole ersetzen keine Standard-Typen sondern sind ebenfalls zusätzliche Symbole, die nicht die Signaltyp-Bezeichnung im Symbolnamen tragen, sondern ein Zubehör (accessory) mit Nummer sind. Beispielsweise das Licht-Signal gekoppelt. Unter dem gerade genannten Link findet sich eine Abbildung und darin die Konfigurations-Kurzbeschreibung HS/L/2/#11 (s. auch am Anfang des Kapitels Signal-Symbole). Danach handelt es sich um ein zweibegriffiges Licht-Hauptsignal mit der Zubehör-Nummer 11. Hat man ein zweibegriffiges Lichtsignal im Plan, öffnet man dessen Eigenschaften und trägt auf dem Reiter allgemein unter Zubehör# die Zahl 11 ein.