User:OrenBochman/Vector Cartography Level 1

From Meta, a Wikimedia project coordination wiki

Cartography & SVG[edit]

Cartography: the process of making maps which represent a given topic within a geographic area. Maps use a geographic background to display one of the following data layers:

  1. topographic data
  2. biological data (vegetation)
  3. human-made structures (roads, buildings)
  4. flux and dynamics (arrows for economic flux, daily human flux, migrations), and
  5. societal data (HDI, Internet access, freedom of speech by country).

Maps also include labels (place names, values, map's title), and the legend explaining symbols on and occasionally the purpose of the map. As I suggested above, geography and maps present information through stacked data layers with factors that influence one another. For example, locations of cities and countries (one layer) are linked with and can be explained by topography (another layer). Most cities are located in plains (which allow agriculture) or by rivers and seas (which speed trade). Borders of most countries are along high mountain ranges, seas, or large rivers which have kept different peoples apart for ages, seeding the basis of two separate modern states. Battles and victories can often be explained by topography and troop movements which take advantage of it. Global population distribution of a fish species can be explained by variations in worldwide water temperatures. Economic dynamism of an area can be explained by its distance to important capitals (markets) or source of natural resources. It seems worthwhile to be able to display on one map all such layers of information so that they may be analyzed together. However, with common .GIF or .PNG maps, the upper layer obscures the lower layer, essentially disallowing the use of complementary information in a logical manner on a single map.

The Value of SVG[edit]

On its side, SVG vector images (as opposed to raster bitmap formats) have several useful features to improve the readability of maps and ease the life of cartographers) :

  1. SVG is "layer friendly", meaning that drawing a city on your map will not erase data under the city. You can come back later, and make a historical map of the area because the layers may easily be reused.
  2. SVG maps are scalable, that means that you can display them on your 12" screen, or in a conference with a 8x12 meter whiteboard : The quality will be always perfect. You can also hide small labels which will become visible at higher zoom levels.
  3. SVG is "share friendly". That means that SVG files are easily reusable for new purposes. You can take icons from other (free) maps, change their colors, improve them if you want to, and use them within the minute. Also, I strongly encourage you to integrate yourself to a SVG cartographer web community, this will allow you to pick up valuable backgrounds, icons, tips, advice, etc.

Workflow options[edit]

Making maps consists of presenting data and dynamics within a geographic context. You can draw the geography yourself, or to speed your work you can go on the web and pick up an existing free SVG background of the area, delete all unneed layers, and use this as a background for your data. In the same way, you can pick up helpful SVG icons (basic shapes are not copyrighted).

  • You can draw a map from scratch, simply using Inkscape, your data, and your knowledge.
  • You can make a vector version of bitmap/printed map. To make your SVG version:
    1. Scan it.
    2. Drag and drop your source map's scan into Inkscape.
    3. Start to trace a SVG version from largest to smallest:
      1. Draw the backgrounds.
      2. The seas and land masses.
      3. The rivers and the roads.
      4. Add the labels.
      5. Set up your legend.
      6. Add other data.
  • Since SVG is a share and edit-friendly format, a lot of help is avaliable.
    1. Find helpful free SVG maps of the studied area online,
    2. Delete all uneed data, keep the background,
    3. Draw your own version according to your own data.
    4. Find helpful SVG background and icons.
      1. Save them on you Desktop.
      2. drag & drop them in Inkscape.
      3. Discard unneeded layers.

The Wikimedia Commons is a large repository of free images that could help you in your work:

Introduction: Your very first SVG map[edit]

This tutorials is written for people who never used Inkscape but have some basic understanding of digital graphic editing (zoom in/ out, scroll, move/enlarge/reduce/rotate a seclected object, dragging and dropping it). Of course, it will be helpful if you are already comfortable with Gimp, Photoshop, or Inkscape. Keep in mind that you will always have the opportunity to follow along and manipulate objects yourself. Cartography is beginner friendly - we will go slowly and clearly.

Inkscape Tools for Cartography[edit]

Notes follow the order of the buttons on the toolbar. Full color icons and text are for really important tools, grey icons and text for rarely used tools.

Main tool bar (left side).
F1 or Space Selector F1 allows us to move, rotate, enlarge or reduce objects. [note 1]
File:Inkscape icons edit nodes.svg Edit nodes F2 allows us to smooth the curve of lines. moving nodes allows us to reduce/expand lines and objects

without reducing/enlarging their borders. To add nodes(double click on the line) and delete nodes (select node +delete) one by one.

File:Inkscape icons tool tweak.svg Tweak not need.
File:Inkscape icons zoom.svg Zoom +/- zooms in and out.
File:Inkscape icons draw rectangle.svg Draw rectangle Squares may be useful for the legend and icons.
Draw Cube not need.
File:Inkscape icons draw ellipse.svg Draw Circle Disks may be useful for the legend and icons.
File:Inkscape icons draw polygon star.svg Draw Polygon not need.
File:Inkscape icons draw spiral.svg Draw Spiral not need.
File:Inkscape icons draw freehand.svg Pencil F6 hard to control.
File:Inkscape icons draw path.svg Bezier Shift+F6 Easy to master, produces great effects.
File:Inkscape icons draw calligraphic.svg Calligraphic Brush not needed.
File:Inkscape icons color fill.svg Fill not needed.
File:Inkscape icons draw text.svg Edit text F8 Create labels, if needed, for the title and legend.
File:Inkscape icons draw connector.svg Connector not need.
File:Inkscape icons color gradient.svg Gradients definitely not needed on a map
File:Inkscape icons color picker.svg Pick color allow to get good colors from other maps or images.


Command bar (right side).
F1 or Space Selector allows us to move, rotate, enlarge or reduce objects. [note 2]
File:Inkscape icons document export.svg Export dialog (Shift+Ctrl+E) allows export of your document, page, or selection to PNG (as a raster format, it loses

the benefits of SVG (see intro)).

File:Inkscape icons zoom fit selection.svg Zoom to fit selection (3) will fit the Inkscape view to your selected object. Needed to see small objects in full screen view.
File:Inkscape icons zoom fit page.svg Zoom to fit page (5) will fit the Inkscape view to your page size.
File:Inkscape icons object group.svg Group objects (Ctrl+G) is frequently use to group several selected objects together. You can then move them together, color them in the same color, etc.
File:Inkscape icons object ungroup.svg Ungroup objects (Ctrl+U) is here to undo the previous action.
File:Inkscape icons dialog fill and stroke.svg Fill and Stroke dialog (Shift+Ctrl+F) has 3 tabs which allow the customization of the fill color and opacity, the border (or "stroke") color and opacity, and the border dashes and width of a

polygon. Delete the fill or the border by clicking on the black cross.

File:Inkscape icons dialog text and font.svg The Text dialog (Shift+Ctrl+T) Sets the size of a text. Will be needed in the last steps of your map for labels and the legend.
File:Inkscape icons dialog align and distribute.svg The Align dialog (Ctrl+Shift+A) help you to align or distribute selected objects equally, or on the last selected object's center, left border, bottom border etc. (read the button tooltips to see all functions). Most of time this is only needed for the Legend.
Status bar (bottom)
F1 or Space Selector allows us to move, rotate, enlarge or reduce objects. [note 3]

Three things are important in the status bar :

  1. the colors palette/ramp : provides a list of colors accessible with the Pick color tool (F7).
  2. the Fill and Stroke dialog's shortcut : gives you a quick view of the selected object's properties.
  3. the palette access : gives you quick access to all other palettes.
  4. F1, select your object, then: clic on a color make fill change, while Shift+clic on a color make stroke change.


Hand On Tutorial 1 Selection[edit]

launch inkscape and open [...]

  1. Selection: Select the green rectangle object above and you should see the same things in the bottom left of your Inkscape window. Test as much as possible to understand all possibilities. Have some fun with the objects to your right.
  2. Multiple Selection:


Hand On Tutorial 2 Transformation[edit]

launch inkscape and open [...]

  1. Move:Select the ... and move it ...
  2. Scale: Select the ... and scale it ...
  3. Rotate: Select the ... and rotate ...
  4. Skew: Select the ... and skew ...

Hand On Tutorial 3 Stacking[edit]

launch inkscape and open [...]

  1. Raise up: Select the ... and raise it up one step ...
  2. Raise to top: Select the ... and ...
  3. Send down : Select the ... and send it down one step ...
  4. Send to the bottom: Select the ... and ...

The Background[edit]

Now that you have imported your map scan, the first things to do are to make a layer analysis, and to create the background - a plain colored polygon larger than your page.

Layer analysis You will see that making an analysis of the multi-layer order can ease your job and save lot of time when drawing SVG maps. Work layer by layer. Drawing the background, then all the forests at the same time, then the buildings, then all rivers, then all roads, then all dynamic-arrows and labels will avoid repetitive changes of tools and colors. For example, if you draw a city in a raster program such as Microsoft Paint, you might draw a collection of houses. In an SVG map, you draw the shape of the city, paint it grey, then draw upon it a layer of blue rivers, and then put the roads up on the whole - each component is a layer. Also, when you start to draw a map, planning the order of the the several layers needed will save time and energy.

Hand On Tutorial 4 - Create the Background[edit]

Draw the lowest layer: the background The background layer is the wide land or water field which supports all smaller items. To draw it, we quickly draw a square with the Bezier pencil (Shift+F6) around our map. We then apply a style to this polygon, to have a grass like color in our background.

  1. Drawing the background:' - using the Bezier pencil (Shift+F6), draw a square around the map by clicking at the right of the numbers 1 to 4. Then, close the polygon by clicking again on the starting point.
  2. Colorin the background:'- using the Pick color (F7), pick a green grass color from the Statu bar (bottom) or from your scan.
  3. Hiding the background: - New objects are -by default- created above older objects. That's why the map scan is now hidden: it is in a lower level. Now that the background is finished, we will not work on it for the next steps. So let it go to the lowest level using (PgDn). We will forget this background and work on other big tems such forests or parks.

Drawing water and islands[edit]

Tracing Polygons[edit]

Boolean Operations on Polygons[edit]

Water Islands[edit]

The Sementic Layre[edit]

Drawing Arrows[edit]
Drawing The Legend[edit]

Best Practices[edit]

  1. Avoid Chartjunk[note 4] is all useless visual information and styles which cartographers or authors often include in their graphics. A map with each country in one different color and with gradients and with a patterned background is an example of a huge, inefficient, time consuming, and confusing graphic polution, aka "chartjunk". When the aim is clear communication rather than art, it is always good to Avoid Chartjunks in your maps.
  2. Map Integration: this demands the the cartographer drawing his/her map to conceive it according to the map expected users and media context:
    1. for quick overview or for a child: keep it simple - just a few colors, large text, large icons, simplified shapes.
    2. for academic or professional works, where the map will be the graphical summary of a study : you can put hundreds of words with the font size decreasing in size and opacity according to the importance of the text. Even small labels will be readable when the map is printed at a common paper size (A4 or A3).
    3. for students, compromise (30 to 60 labels)
    4. for a printed newspaper : keep simple.
    5. for and online gallery : you can be very precise, digital is zoomable.
This allow you to display as a thumbnail in a web page: the major areas and some 8 words will be readable. When viewed at full size, the 30 to 60 other labels will become readable
  1. Politics: keep politics out ! Even if nowadays maps are not the monopoly of goverments, they still often display "nationalistic features". Regardless of claimed boundaries peoples always had trade and cultural relations with all neigbouring peoples, and countries cannot stand alone.
  2. context : keep the studied area within its context : "Do not wipe neighboring countries off the map"
  3. de-emphasize country borders : we are not goverments, we have no need to support such artificial visions.
  4. for historical maps, use political divisions of the time, keeping in mind that they were artificial too. The retroactive replacement of old boundaries with present ones is both childish and senseless.

CONCLUSION[edit]

You have learned what the job of cartographer entails: it's philosophy, how to source your work, how make basic maps. You now know how to use the most helpful tools (Bezier pencil, Edit nodes tool, set the style of an object) and make transformations and complex actions (duplicates, difference, group objects, group names). You also know how to draw the background, the subsequent layers of large items, water and islands, and roads in specific styles. You have learned how to draw arrows, have some notions regarding the color theories, graphical conventions, how to make a legend, and where to find help on the web. With the given exercises, you have had practice and learned how to use the needed tools, which gave you a helpful first experience. While keeping in mind that old good work and map need a big bunch of patience, time, twinker, and efforts, we hope that this tutorial gave you most of the answers you needed to make a start, and that we inspired you to improve your cartographic skills.

  1. Ctrl+select_object+enlarge : enlarge & keep proportions.
    Shift+select_object1+select_object2 : select several objects.
    Ctrl+G : to keep these objects grouped (convenient!!).
    Ctrl+U : to ungroup the group.
  2. 1
  3. 1
  4. This notion was created by Edward Tufte, "the da Vinci of Data" (see wikipedia: Chartjunk, Edward Tufte)