From OpenStreetMap Wiki
< Osmarender(Redirected from SVG Symbols)
Jump to: navigation, search
Available languages — Osmarender/Symbols
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް

Osmarender can use SVG symbols to draw icons for post offices, telephones, churches and many other features. See the rule file description on how to include symbols in your map. See the Osmarender/SVG section for more information about SVG and Osmarender. The symbols of the slippy map osmarender can be found here: http://svn.openstreetmap.org/applications/rendering/osmarender/stylesheets/symbols/

You can put symbols in your rules file or they can be in external files (linked in through the xlink mechanism of SVG). But the easiest way of including them is by putting them in the symbols directory. They will then get linked into the SVG map file when the map is created.

How to create the symbols

These symbols were created in Inkscape, then converted to a syntax that Osmarender understands. You can use any tool to create the SVG, but here are some tips.

Draw the SVGs

  • Open Inkscape, and then set the page size in document properties to something manageable. You can use actual size of symbol, for example 16x16 for symbol which should be 16px width on the map. Standard rule files have symbolScale set so that symbol will have pixel size 16 at all zoom levels.
  • Use Inkscape drawing tools to create the symbol, trying to reduce as far as possible the complexity of the symbol. Some tips are:
    • try where possible to use straight lines;
    • reduce the number of nodes to the basic minimum
    • use the "snap to grid" feature for nodes
  • Manually edit the XML (using Inkscape's XML editor window) to 'tidy up' the code. eg.
    • reduce the decimal precision of path data (eg M 20.34763 might be able to represented as M 20 without loss of detail). For a long path with many nodes this can be quiet cumbersome. Try the perl-script clean_svg.pl to automate this step.
    • remove unnecessary code (eg code for 'fills' when in fact there is no fill).

Convert SVGs for use in Osmarender

If you want to include symbol directly in rules file, set it's id to symbol-<symbol-name> and paste it into one of <defs> sections of rules file. No conversation is necessary if you put symbol into symbols directory.

Osmarender used to require conversions to special format. The format is still supported, you can see it's description here.

Symbol format in the symbols directory

Save the symbol as normal svg in symbols directory. You don't have to set symbol's id, filename without .svg will be used.

Osmarender used to require extra conversion steps, they're described here

Symbol catalogue


A catalogue of all symbols is included in the subversion distribution. It can be re-generated with the Makefile from all the available symbols and contains the symbols themselves, a crosshair to help with sizing and positioning the symbols and the IDs of the symbols. This catalogue is not needed for rendering maps, it is just there to help you find out what symbols are available.

The catalogue is available in several formats:

2009-02-08 the rest of these links are broken?

How to add a symbol

  1. Create svg image with your symbol.
  2. Save it to symbols directory.
  3. You can now use the symbol in your rules file with <symbol ref="symbol id"/>. symbol id is filename of svg file without .svg.

Symbols on ways


You can put symbols on ways by using an SVG marker. This can then be put on the first (marker-start) or last (marker-end) node or on all middle (marker-mid) nodes.

The following code can be used to create the chairlift image on the right:

rules code
 <rule e="way" k="aerialway" v="chair_lift">
   <line class='chairlift' />
style code
 .chairlift {
   stroke-width: 1;
   stroke-linecap: butt;
   stroke-linejoin: round;
   stroke: #0000ff;
   fill: none;
marker code
 <svg:marker id="chairlift" refX="4" refY="0" markerUnits="userSpaceOnUse" orient="auto">
   <svg:path style="fill:none; stroke:#0000dc; stroke-width:1px; stroke-linecap:butt;
        stroke-linejoin:miter; stroke-opacity:1" 
     d="M 2.5,5 L 2.5,8 L 6,8M 5,14 L 5,10 L 2,10 L 2,7 L 3,7
        L 3,10M 3,0 C 3,1 3,1 3,1 L 0,4 L 0,12 L 0,12 L 3,13" />
   <svg:path style="opacity:1; fill:#0000dc; fill-opacity:1; fill-rule:nonzero; stroke:none"
     d="M 3.5 5 A 1 1 0 1 1  1.5,5 A 1 1 0 1 1  3.5 5 z" />

Symbols as patterns in areas

wood=coniferous (e.g. way 58203093) used to be rendered with a special pattern

Sources of symbols

Make sure that all map symbols are public domain or are available under a compatible Creative Commons License.