User:Sameboat/Draw topological map in XML editor



While it is entirely OK to draw an SVG topological map in Inkscape or Adobe Illustrator, the SVG created in these applications has wide array of issues, lack of code neatness, removal of text alignment properties, overdose of metadata which causes validation error by W3, etc. For a topological map which requires higher uniformity of map objects in terms of distance and alignment than geologically accurate map does, Inkscape usually gives you the opposite result. Saving your file in "plain SVG" format does not automatically solve all the problems it produces, so it is still recommended to actually write the map code manually in XML editor. It is not difficult at all after learning the crucial SVG elements and attributes, and it actually gives you more control over the map design.

Things you need:
 * Any XML editor which supports Unicode to handle text of non-Latin characters. Notepad++ and Sublime Text are rather famous among those.
 * Full set of the free Liberation fonts already installed in your OS. SVG on Wikimedia can use neither fonts not installed on Wikimedia server nor webfont.
 * While many up-to-date browsers are capable of rendering SVG file natively for preview before upload, you should also preview in SVG Check on WMF Labs because it provides a temporary preview by librsvg, the same rendering library used by Wikimedia to create PNG version of the SVG source. librsvg is sadly notorious for behaving differently to mainstream browsers and having lot of unfixed bugs.
 * W3C specification of SVG. The very resource of "how to use SVG".
 * A hand drawn draft of your map
 * An SVG diagram template

Text editor

 * Disclaimer: I use Notepad++ and Firefox so this tutorial unavoidably focuses around them.

After installing Notepad++, the first thing you want to do is to allow it to recognize SVG as XML so the syntax is highlighted and it properly reports syntax error, otherwise you will have to set the language manually after opening an SVG file every single time. Go to "Settings" - "Style Configurator...", scroll down the language list to "XML" and add "svg" to "User ext. :" and "save and & close". If you are starting from scratch, you can save the new document as .svg file so it will automatically switch to XML language or again set manually in the "Language" menu. There is really no reason to type everything from scratch, so I have prepared the SVG code of a very basic diagram for you to start off. You can of course use another SVG diagram and modify from it, just to be sure that that SVG file was created in text editor all along, otherwise you would have a funny time to clean up the mess of useless metadata.

Element: svg
element serves primarily to request the opening application to treat the document by SVG library and also defines the canvas dimension of the image itself. The only things you need to change here are values of,   and   properties/attributes. The 4 values inside  (letter "B" must be uppercase) are in the order of "starting point of x coordinate", "starting point of y coordinate", "native width" and "native height" and MUST be separated only by space, comma would cause compatibility issue. (0,0) is generally at the upper-left corner if the starting point values are untouched. For example, you can write  so (0,0) will sit right in the center of the image.

Properties  and   must be present. If  is absent, its value will be assumed as. If the values of properties  and   differ than the native width and height figures in , the image canvas is scaled accordingly. But I do not recommend doing this because librsvg is terrible at scaling text: Glphys will appear misaligned/offset irregularly no matter how much you scale by, e.g. 0.5, 2, 4, 8. You should choose the appropriate smallest and regular font-sizes which do not require scaling up either the text alone or the whole image, both scaling practices will give you the aforementioned text glitch anyway.

Element: defs
When making a topological map, obviously many items will be repeatedly used in different positions of the image such as the station icon. You can create the source objects which act as the "templates" and use these templates with the "use" element in other situation. The change of the source object will instantly affect all use element which link to the source. Also it efficiently reduces the size of your SVG file. These source object can be and should be nested within the "defs" tags. Items in the defs will never show until they are "used" on the "outside". The reason for that is that you want the default position of the source object to stay at x0,y0, so when you use the source object you do not need to calculate the difference of positions of the source object and recycling.

In order to "use" the existing or predefined elements elsewhere within the SVG file, you need to give the source object or the source object group an "id" name. Although nearly all SVG software will assign a random/arbitrary id for every single element in the SVG file, this is not necessary and will lead to a potential mayhem that when you copy your objects to another SVG file which already contains element with the same id, some SVG renderer may refuse to render the image until you have changed or removed the repeated id name. So only assign the id name where it is needed, or for easier identification, write a descriptive id name that will never overlap with the other. If the id name contains white space, remove it or replace it with underscore. Never begin the id name with a numeral, precede it with at least one alphabet. It should not contain any other punctuation or non-English alphabetic character.

To use the object, apply. You can change the style and position of the source object if these are not yet defined by using the "style" (CSS) and "transform" attributes. For example, to place a "stations icon of line 1", which has already been defined, at x100,y100, rotate it 90 degree anti-clockwise and make it translucent (for station under construction):

Element: g
(WIP)