added icon halos (resolves #3)

CONTRIBUTING.md

@@ -20,10 +20,12 @@ If submitting new icons or substantial modifications you confirm that this is yo
 It is recommended to use Inkscape (https://inkscape.org) for creating or modifying SVG files. Please do not submit files in Inkscape's own SVG-like format as it contains
 a lot of clutter. Instead use File > Save As ... and select "Plain SVG".
 
-Icon standard canvas size is 16x16px with 1px padding (should be kept free of any icon content). The icon file name should use dashes for whitespace and append the canvas size (e.g. `waste-basket-16.svg`).
+Icon standard canvas size is 18x18px with 1px padding (should be kept free of any icon and halo content) and 1px wide white halo. Basically the available space for icon content is 14x14px.
+The icon file name should use dashes for whitespace and append the canvas size (e.g. `waste-basket-18.svg`).
 
-All icon content should have the colour `#1a1a1a` and consist of a single path (parts merged together). No groups should be used.
+All icon content has the colour `#1a1a1a` and consists of a single path (parts merged together). It has the ID `icon`. This icon content is duplicated with colour white and 30% opacity having ID `halo`.
+In addition the duplicate has a 2px wide white outline and lies below the icon content regarding to z-index. These two parts are grouped together with ID of the name of the icon
+(e.g. `waste-basket-18.svg` has id `waste-basket`).
 
-The ID of the path should be the name of the icon (e.g. `waste-basket-16.svg` has id `waste-basket`). All icons should have a invisible background rectangle
-spanning the whole canvas to avoid up-/downscaling of the shape alone when using `marker-width` or `marker-height` in CartoCSS. The style of this rectangle should have `visibility:hidden` set and
-use the id `canvas`.
+In the background all iconshave a invisible rectangle spanning the whole canvas to avoid up-/downscaling of the shape alone when using `marker-width` or `marker-height` in CartoCSS. The style of this rectangle has set
+ `visibility:hidden` and uses the id `canvas`. See one of the icons for an example how this looks.

README.md

@@ -16,23 +16,15 @@ All icons should adhere to the following features
 * sharp (aligned to pixel grid)
 * single point of view (avoid use of perspective where possible)
 * common canvas size
+* semi-transparent white 1px wide halo around icons
 
 ## SVG code
 * avoid Inkscape specific code, use plain SVG
 * no groups, one path
 * invsibile background rectangle spanning the whole canvas to avoid up-/downscaling of the shape alone when using `marker-width` or `marker-height`
 
 ## Icon specifications
-All icons use a canvas base size of 16px. Where required there exist several versions that are varying in size and amount of detail. The size is indicated by appending the pixel value to the icon name (e.g. hospital-16.svg).
-
-## Why another icon collection?
-Bascially there are two collections of icons that are widely used for displaying OSM data: [twain47's Open-SVG-Map-Icons](https://github.com/twain47/Open-SVG-Map-Icons) and [Mapbox' Maki](https://github.com/mapbox/maki).
-
-Osmic does not try to replace any of the two, but aims at addressing shortcomings of both collections. While Open-SVG-Map-Icons comprise a quite comprehensive icon collection they often feature somewhat complex representations and do not work so well at small resolutions. They also do not align to the pixel grid, which may result in a blurry icon representation.
-
-On the other hand, Maki icons have been designed especially for small resolutions but come with a lot of Mapbox or marker specific code. Some icons also have an outline which hinders recolouring of the icons.
-
-Osmic tries to provide simple, clean and legible icons - and just icons.
+All icons use a canvas base size of 18px. Where required there exist several versions that are varying in size and amount of detail. The size is indicated by appending the pixel value to the icon name (e.g. hospital-18.svg).
 
 ## How to contribute