Differences

This shows you the differences between two versions of the page.

--- symbols-en [2020/01/14 11:20] – rjversluis
+++ symbols-en [2020/10/27 21:57] – [Alternative <g>] rjversluis
@@ Line 10: / Line 10: @@
 =====Themes directory structure=====
-| :!: In revision 14318 the SVG Themes are reorganised; Check the SVG paths. |
 {{ :rocview:themes-tree.png?0x400}}\\
 The official themes are located in the subdirectory **svg/themes**.\\
@@ Line 26: / Line 25: @@
 =====Setup=====
-{{:rocgui-ini-svg-en.png}}\\
+| {{:rocgui-ini-svg-en.png}} |
+|  Rocview properties, Tab 'SVG' with open Properties dialog to **Theme 1**  |
+| **Attention:** For **RocWeb** and **andRoc** the SVG paths must be setted in the RocWeb dialog of the **[[rocrailini-rocweb-en#rocweb_settings|Rocrail properties]]**. |
  \\
@@ Line 49: / Line 52: @@
   * Windows = 10
   * Default = 10
+The second field is to adjust the text pointsize from -100% to +100%. This could be of help in case multiple Rocviews, on different platforms/resolutions, are connected to the same Server. \\
+|< >|
+^ Example ^^
+|  {{:rocview:text-ps-mac-2560x1600.png?0x100}}  |  {{:rocview:text-ps-win-1920x1280.png?0x100}}  |  {{:rocview:text-ps-win-1920x1280-50.jpg?0x100}}  |
+|  Mac 2560x1600  |  Windows 1920x1280  |  Windows 1920x1280 -50%  |
 __The Rocview has to be restarted for changes to take affect.__\\
@@ Line 63: / Line 72: @@
 Only the SpDrS60 theme has the needed SVGs.\\
 {{:rocview:sw-routes.png}}\\
-To get the route IDs automatically set in the switch objects the analyzer must be started again if the routes were generated with a revision older then 7884.\\
+To get the route IDs automatically set in the switch objects the router must be started again if the routes were generated with a revision older then 7884.\\
 In case of manual routes use the __**[[:select-en|Select dialog]]**__.\\
-====Route prio====
+====Route priority====
 Overwrites block occupancy in case a route is reserved.\\
  \\
-=====Examples=====
+=====Track/Road Layout=====
-====Track/Road Layout====
 Track and road symbols can be mixed in one layout:\\
 {{:track-road-layout.png}}\\
@@ Line 89: / Line 96: @@
 The file names are predetermined for each state of a symbol as listed here: [[symbolnames-en|Symbol Names]]\\
  \\
-The path must be conform:\\
-http://www.w3.org/TR/SVG11/paths.html#PathData\\
  \\
-But only **M**, **L**, **C** and **z** are evaluated. All coordinates are rounded to integers.\\
+=====Supported SVG Elements=====
-The **C**urve is defined in the "w3" document but not supported in Rocview and **Inkscape**. Its have never been used in the Themes.
+====Path====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
+Only **M**, **L**, **C** and **z** are evaluated. All coordinates are rounded to integers.\\
 The following example (track with blue outline filled yellow ) shows which information is basically evaluated by Rocview:
 <code xml>
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
@@ Line 105: / Line 110: @@
 </code>
-The path node maybe multiple listed.\\
+====Circle====
-Rotation is done in the Rocview.\\
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
- \\
-Curves and circles:\\
 <code xml>
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
@@ Line 118: / Line 120: @@
 </code>
-**Note:** To create curves it's recommended to use **<circle .../>** and partly cover with another elements. Alternativ it's possible to use multiple short strokes or points.
+====Ellipse====
- \\
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
+<code xml>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+  <g>
+    <ellipse cx="16" cy="12" rx="8" ry="4" fill="red" stroke="blue"/>
+  </g>
+</svg>
+</code>
-==== SVG viewer and editor ====
-The Online tool **[[https://www.rapidtables.com/web/tools/svg-viewer-editor.html|SVG-Viewer/Editor]]** can be useful to view SVG, create and edit. \\
-It's not so powerful as Inkscape, but it's much easier to use than Inkscape or others.
-  * ** Note: ** \\ Unfortunately the tool does not check the XML conformity. SVG files edited with the tool should be e.g. be checked with a browser on it.
-To become familiar with the tool, is recommend to open an SVG file from a Rocrail theme. \\
+====Polygon====
-Changes to the code elements make it very easy to see the effects on the Symbol representation. \\
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon
-Alternatively, code sections on this wiki page are also suitable if they are transferred to the tool via // Copy & Paste //. \\
-\\
-Since the tool's "New" function does not create a frame that matches Rocrail's symbols, the following frame should first be copied to the tool's Code window to create new symbols:
 <code xml>
-<svg width="32" height="32">
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <g>
-    <!-- Insert the SVG elements here -->
+    <polygon points="0,0 31,0 31,31 0,31" fill="red" stroke="blue"/>
   </g>
 </svg>
 </code>
-Alternatively, a new SVG file can of course also be created by modifying an existing file. \\
-|< >|
-^  Funktions  ^
-| {{:wiki:svg-viewer-new.png?25}} New |
-| {{:wiki:svg-viewer-open.png?25}} Open SVG file |
-| {{:wiki:svg-viewer-view.png?25}} View SVG code |
-| {{:wiki:svg-viewer-save.png?25}} Save SVG file |
- \\
-==== Inkscape ====
-You can use Inkscape http://www.inkscape.org/ and start to create a new 32x32 icon.
-Rocrail supports just integers for coordinated and therefore the following settings are quite useful:
-{{:inkscape_config1-en.png}}{{:inkscape_config2-en.png}}{{:inkscape_config3-en.png}}
+====Rectangle====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <rect x="2" y="2" rx="5" width="20" height="20" stroke="blue" fill="red"/>
+  </g>
+</svg>
+</code>
+Setting **rx > 0** will draw a rounded rectangle.\\
-These settings , especially 'Always snap', apply only during the creation of a path (Shift+F6) . As soon as you try to move path nodes with the mouse Inkscape will create decimal coordinates again.
+====Line====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <line x1="0" y1="0" x2="31" y2="31" stroke="black"/>
+  </g>
+</svg>
+</code>
-Another useful setting is to switch on the the outline display:
+====PolyLine====
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <polyline points="0,31 15,8 15,24 31,0" stroke="blue"/>
+  </g>
+</svg>
+</code>
+ \\
-{{:inkscape_config4-en.png}}
-At the moment the only thing evaluated in Rocrail are <path../>.\\
-With Shift+F6 you can start this sequence; try to generate Lines only, no Curves.\\
-As soon as you're done with the graphics save the file in Inkscape and open it with a text editor to copy the path information into another new file.\\
-=====Default Symbols=====
+=====Alternative <g>=====
-Default symbols are SVG like vector graphics, and are hardcoded in the Rocgui sources.\\
+A second Graphics Container((<g></g> Section)) can be added in the SVG definition which will be alternated every second.\\
-They only are needed when the Rocrail installation is broken, and there are only some basic symbols available! Report it if you are having trouble with symbols.\\
+**Note:** //Rocweb cannot support multiple <g> containers, and will show all overlapped.//\\
- \\
-=====Blinking Aspects=====
-Starting with revision 5315 a second Graphics Container((<g></g> Section)) can be added in the SVG definition which will be alternated every second.\\
-Only signal objects are enabled for this feature.\\
 ====Example====
@@ Line 186: / Line 194: @@
 =====Preview=====
+{{ :symbols:svg-preview-de.png?240}}
 ====Windows====
 This extension can be used to preview SVG symbols in the file explorer:
-  * https://github.com/tibold/svg-explorer-extension/releases
+  * __[[https://github.com/tibold/svg-explorer-extension/releases|SVG Viewer Extension for Windows Explorer]]__
+====Ubuntu====
+Ubuntu shows SVG previews out of the box.\\
+====macOS====
+{{ :symbols:macos-svg-preview.png?240}}
+The Finder shows only strict formatted SVGs.\\
+Starting with revision 2.1.381, the following SVG header format is also supported by Rocview and will enable preview in the macOS Finder:
+<code xml>
+<svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  ...
+</svg>
+</code>
+For information on the viewBox attribute see:
+  * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
+The former width/height are now part of the viewBox: "x y width height". (Rocview only evaluates the width and height values of the viewBox.)\\
+The width attribute is set to 100% to enable (pre)viewers to scale up to the available space. (Rocview do not evaluate this value.)\\
+If the following option is manually set in the rocview.ini, the conversion will be done automatically:
+<code xml>
+<gui convertsvg="true" ... >
+  ...
+</gui>
+</code>
+ \\