SVG Maps Tutorial - Illustrator
0▲ 0 ▼ 0
Overview for making SVG in Adobe Illustrator for use on CWSP
This public article was written by Admin Sheep, and last updated on 22 Jun 2016, 16:22.
[comments] [history] cws helpcwsp help
4. CWS Markupthis article, which shows how to make SVG maps using Inkscape. This article will show a tutorial using the program Adobe Illustrator. The version I am using is CS4, so yours might look slightly different.
This is not the only (or necessarily best) way of using Illustrator to make an SVG map, but it works.
This tutorial will make an svg map that is neutral in colour, and has white spaces between each division. The CWSP tools do not function so well when the objects have borders, so this method will still create a visible line between each division, while still being optimal for use with our tools.
[top]Step 1: Creating a document
Open Illustrator. If you are not presented with the Open/New dialogue, hit ctrl+N to make a new document ("for Web"). This one has a simple 1000x1000px artboard. Feel free to make a document of any size and shape - however if it is too large (over 3000px or so in either dimension) it may have display issues. (How to resize the artboard (canvas)?)
If you already have a non-SVG drawing of your map, feel free to add it now by Copy/Pasting or dragging it in from another window, or going to File > Place. Then make a second layer over this artwork to do your vector work on.
[top]Step 2: Drawing the basic shape
Here I've drawn a simple country shape using the Pen (vector points) tool. You can remove area from the shape (for a lake, etc) by using the eraser tool.
Once you have done drawing your shape, go to the Appearance menu (probably on the right side of your canvas) and change the default Appearance to grey (or another colour of your choice) fill with a white stroke of 1 pt (or wider if you want).
At this stage you should save a backup of the project (as an .ai file), with just the basic map drawn. This is in case of error in later steps or if you decide you want to start over again and divide your map in a different way.
[top]Step 3: Dividing your map
There are several methods to divide up an object in Illustrator, but I find that the Knife tool works best. You can find this tool by holding down the eraser tool. (Unfortunately, at least in my version of Illustrator, there is no shortcut to get to the Knife tool.)
Make sure you have your shape selected (with the Selection or Direct Selection tool, shorcuts V or A) and then use the Knife tool to separate part of the shape. The two shapes should both have the same Appearance style (same colour and stroke), which means that there will now be a thin white line separating the two shapes.
In order to continue subdiving both the original and new shape, simply make more cuts with the Knife tool. If you want to subdivide only one of the two new shapes, you must unselect the other shape (shift+click with a Selection tool). If you use your Knife tool on a shape that is not selected, it will not be cut.
Make sure your cuts are "complete". If a cut does not completely sever one shape from another, well, it will still just be one shape.
Continue dividing your shape until you have the desired provinces/ states/ territories/ counties/ etc. After this is done, you may wish to resize your artboard (canvas) so that it is not too much bigger than your actual map.
[top]Step 4: Assigning IDs
Once you have finished dividing your shape, go to the Layers palette in the bottom right. Use the white > arrow to expand your vector layer and show all of the shapes you have created, which should all be called <Path> at this point.
If you have any Paths with a blank white icon, you can probably delete them.
If you have a region that is composed of more than one object (such as a part of the mainland, plus some offshore islands), then to assign these one ID you first need to group them, then assign the ID to the group, rather than the individual sections. You can group them by selecting all the areas you wish to group, then pushing Ctrl+G.
Double-click the desired path in the Layers palette and a popup box will appear allowing you to name it. This name is the path's ID, which will be important for the SVG functionality.
Make sure you have selected the correct path when naming. The path that is highlighted on the canvas will also have a small coloured box appear next to its name in the Layers palette. A path whose name is highlighted is not necessarily the same one that is highlighted on your art board.
In the above image, E is the path which is highlighted on the artboard, but SW is selected in the Layers palette. In order to name E (the highlighted shape) you need to click its name, not the SW. You can change which path is highlighted by clicking it on the artboard or by clicking the small white circle next to its name on the Layers palette.
I recommend naming your paths something easy to remember (such as the actual name of the territory, a nickname for it, or something like "east area 1," etc). Do not use non-alphanumeric characters in the IDs or your map will break.
[top]Step 5: Saving as SVG
Once you've finished making & naming your various regions, make sure to Save your .ai file. Then delete any excess layers (e.g. the original map, if you brought one in to trace it). Then, go to the File > Save As menu and select .SVG as the filetype. On hitting Save, Illustrator should give you a dialogue box for SVG Settings. I've had the greatest success with the options shown above.
If the "Show SVG Code" button on your version of Illustrator works (mine doesn't for some reason) you can probably skip step 6 (probably).
[top]Step 6: Obtaining the SVG Data
Open Notepad or a similar plain text editor. Go to Open, and in the Open dialogue, be sure to hit "All files (*.*)" (and find the right folder!) or you will never ever find your precious map. This will give you the (very long) SVG code for your map.
If you have the ]> (highlighted above) in your file (it should be somewhere near the top), remove it. (It won't break anything, but it will show up on your map page for no good reason, just floating around, looking weird).
[top]Step 7: Upload to CWSP.
Create your country, upload your map, & profit?
If you have any questions, feel free to ask them in the comments section below or direct them at @Severy.
This is a modified version of
on 22/06/16 16:220severyno fuq u