Differences

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

@@ Line 1: / Line 1: @@
+P L A Y G R O U N D - Not for Publication
+===== Gimmicks with SVGs =====
+==== Create your own symbol ====
+We're building our own symbol. Only how? And why actually? The latter, however, should have been considered before.
+Take a checkered DIN A4 sheet and draw yourself a square of 16x16cm with a ballpoint pen and a ruler. How many boxes are there? There are 32x32. And 32x32 (pixels) is the default size of a plan field.
+Larger symbols need more plan fields and therefore a larger sheet of paper. Or graph paper. And then maybe a magnifying glass. The block symbol, for example, has the size 128x32 pixels - it extends over four plan fields.
+For the beginning it's a small symbol and we limit ourselves to the 16x16cm square with 32 horizontal and 32 vertical squares. The box at the top left has the coordinates 0,0 (x=0,y=0), the box at the top right has the coordinates 31,0, the box at the bottom right 31,31 and the box at the bottom left 0,31. It is recommended to write these coordinates on the outside of the square to make counting easier afterwards.
+Now you can cheerfully start drawing. But at the beginning you should be very restrained and take something very simple. E.g. a rectangle. You draw it somewhere inside the marking with a pencil. This is inside the boxes, not on the lines. You can also colour in the boxes... But you don't have to.
+Now you can write the coordinates at the corner points. For example, the rectangle could start in the top left corner of the seventh box. This is the coordinate 6,0. Caution: Seventh box is six, because the counting starts from zero! By the way, you better start in line one instead of zero, so the best way to start the rectangle is at 6.1. Maybe you can go to column 25, then you write to this point 25.1. And now to the very bottom, to line 31, that is then the point 25.31. Then to the left to 6.31 and up back to 6.1.
+And now you take a text editor and write your symbol, because here you really only draw on paper.
+  <svg width="32" height="32">
+    <g>
+are the first lines that define the previously mentioned size of 32x32 pixels and mark the beginning. Now comes the rectangle, e.g. like this
+  <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 says that the following is a path, stroke is the line and how it should be, is behind the equal sign: "rgb(0,0,0)" means that RGB colours (the mixture of red, yellow and blue) should be used and all three are at 0 (zero). This means: Black.
+Fill is the filling of the entire thing to be drawn in the same way. How it should be is also behind the equal sign. As before, the colour is specified here and three times 255 is white.
+Now it's exciting: d is the drawing and it starts with M (move), with the movement of the imaginary drawing pen to the starting position. Here, at 6,1 the pencil is placed on the imaginary paper and then it starts: L (a line) to 25,1 (horizontal to the right), further with line to 25,31 (vertical to the bottom), further with line to 6,31 (horizontal to the left). You don't have to close the figure, the small z at the end automatically takes care of that. By the way, it must always be there.
+We still need to finish:
+    </g>
+  </svg>
+A symbol with a white rectangle with a black border is already finished. You can't do anything with it, but we don't care. So the whole definition looks like this:
+  <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>

Innovative Model Railroad Control System

User Tools

Site Tools

Differences

Page Tools