transition to SVG icons

[nebulon42]

I think most will agree that moving all icons to SVG is beneficial (line and pattern symbolizers will have to wait for the transition to Mapnik 3.0). This issue is intended to gather ideas how the transition could work. Issues #632, #658 and #659 are related.

As pointed out by @math1985 in #659 there are currently several efforts for icon repositories. While a central repository is a good idea, we might have to alter icons before using them here and hence not every icon might be useful for each project. So should we create our own repository or just keep track of the icons we include?

https://github.com/twain47/Open-SVG-Map-Icons is a good starting point for a repository, but for me it is not clear what its current status is. Is it still active? While the icons are very good, I also have the impression that some are too complex for small sizes and some have to be altered to be used in this project. I don't follow the puristic view on SVG code of @pnorman regarding Inkscape (I might be wrong on that, please correct me), but still think that code quality matters a bit here (file size).

I'm not sure what the best approach might be. SJJB icons are a good starting point, but some will require alteration or even re-drawing for using them with CartoCSS (e.g. colouring). So I think we cannot use them directly. Should we fork the repository and evolve it further for using the icons with ths project? I would be up for maintaining an icon repository, but this might be overkill and maybe we should concentrate on the icons we will really use.

repository for my icons: https://github.com/nebulon42/osmic

declined (just for reference)
amenity=car_sharing (#1283) - removed in #1901

completed

• amenity=hospital (health related SVG icons #1169)
• amenity=pharmacy (health related SVG icons #1169)
• amenity=atm (money related SVG icons #1171)
• amenity=bank (money related SVG icons #1171)
• tourism=museum (move museum icon to SVG #1174)
• amenity=recycling (move recycling icon to SVG #1175)
• leisure=playground (move playground icon to SVG #1177)
• amenity=place_of_worship (move religion related icons to SVG #1185)
• amenity=bar (move eat & drink related icons to SVG #1188)
• amenity=pub (move eat & drink related icons to SVG #1188)
• amenity=cafe (move eat & drink related icons to SVG #1188)
• amenity=biergarten (move eat & drink related icons to SVG #1188)
• amenity=fast_food (move eat & drink related icons to SVG #1188)
• amenity=restaurant (move eat & drink related icons to SVG #1188)
• amenity=cinema (change cinema icon to SVG #1211)
• shop=bakery (move bakery icon to SVG #1212)
• tourism=camp_site (move camping icon to SVG #1218)
• amenity=police (move emergency icons to SVG #1220)
• amenity=fire_station (move emergency icons to SVG #1220)
• amenity=embassy (move embassy icon to SVG #1235)
• amenity=picnic_table/picnic_site (move picnic table icon to SVG #1240)
• historic=memorial (move memorial icon to SVG #1241)
• amenity=theatre (move theatre icon to SVG #1254)
• amenity=drinking_water (move drinking water icon to SVG #1256)
• amenity=prison (move prison icon to SVG #1259)
• shop=bicycle (move bicycle shop icon to SVG #1281)
• amenity=bicycle_rental (move bicycle rental icon to SVG #1282)
• amenity=fuel (move fuel icon to SVG #1284)
• man_made=mast (move mast icon to SVG #1324 SVG icons for mast and add conditional rendering based on tower:type #1304)
• amenity=toilets (move toilets icon to SVG #1328 move toilets icon to SVG #1178)
• shop=car_repair (move car repair icon to SVG #1377)
• shop=doityourself(move DIY shop to SVG #1380)
• shop=florist (move florist icon to SVG #1381)
• shop=hairdresser (move hairdresser icon to SVG #1382)
• man_made=lighthouse (move lighthouse icon to SVG #1385)
• tourism=hotel (move hotel icon to SVG #1389)
• tourism=hostel(move hostel icon to SVG #1390)
• tourism=motel (move motel icon to SVG #1426)
• amenity=courthouse (move courthouse icon to SVG #1477)
• highway=bus_stop (move bus stop icon to SVG #1517 move bus icons to SVG #1478)
• historic=archaeological_site (move archaeological site to SVG #1518)
• tourism=caravan_site (move caravan parking icon to SVG #1468)
• leisure=water_park (move water park icon to SVG #1559)
• power=generatorwith generator:source=wind (move wind power symbol to SVG #1476)
• man_made=water_tower (move water tower icon to SVG #1519)
• tourism=viewpoint (move viewpoint to SVG #1572)
• man_made=windmill (move windmill to SVG #1574)
• amenity=emergency_phone (move emergency phone to SVG #1606)
• amenity=telephone (move telephone icon to SVG #1607)
• railway=subway_entrance (change symbol for railway=subway_entrance #1521)
• amenity=post_office (New icons and YAML for amenity=post_office and amenity=post_box #1702 move post icons to SVG #1558)
• amenity=post_box (New icons and YAML for amenity=post_office and amenity=post_box #1702 move post icons to SVG #1558)
• highway=ford (move ford icon to SVG #1625)
• natural=cave_entrance (Replacing cave entry PNG icon with SVG version #2048)
• amenity=shelter (Move shelter icon to SVG #2042)
• tourism=information (Replacing tourism information PNG icon with SVG version #2049) (should wait until subtypes of information=* can be rendered)
• amenity=library (Replacing library PNG icon with SVG version #2147 Replacing library PNG icon with SVG version #2050 move library icon to SVG #1228)
• shop=department_store (SVG version of department store icon #2243)
• leisure=slipway (Slipway SVG icon #2744)
• amenity=bus_station (Replacing non-vector icons with SVG  #2754 Replacing bus station PNG icon with SVG version #2047 move bus icons to SVG #1478)
• tourism=alpine_hut (Replacing non-vector icons with SVG  #2754)
• tourism=chalet (Replacing non-vector icons with SVG  #2754)
• leisure=golf_course (Replacing non-vector icons with SVG  #2754)
• tourism=guest_house (Replacing non-vector icons with SVG  #2754)
• leisure=miniature_golf (Replacing non-vector icons with SVG  #2754)
• shop=butcher (Replacing non-vector icons with SVG  #2754 move butcher icon to SVG #1539 move butcher icon to SVG #1379)

[pnorman]

I believe this is a duplicate of an existing issue and SJJB icons were rejected.

[pnorman]

#277

[nebulon42]

Thanks for pointing me to that. #277 is about using existing icon sets, that is only part of the transition. Regarding SJJB icons: as I said I believe that icons will have to be changed or even re-drawn. I was more refering to opinions on how to keep effort as low as possible while having a good result.

Or let's phrase it differently: What are the features of SVG icons we require for this project?
#277 is a start here, but has no definitive answer on it - and it has been closed.
Shall we create a separate icon repository (even a common one for more projects) or just pull in (and adjust) icons with suitable license we need?

[matthijsmelissen]

I believe this is a duplicate of an existing issue and SJJB icons were rejected.

SJJB icons are the icons we are currently using, so I doubt they were rejected...

I submitted two pull requests to the SJJN/twain47 repository in October and they haven't been addressed, so I think we can assume that the repository is no longer maintained.

http://osm-icons.org/wiki/Icons is another good starting point for SVG icon files, but most of the icons are of lower quality than the original icons.

There are quite a few projects that share the same icon set: at least openstreetmap-carto, the openstreetmap website, OsmAnd, NavIt, openstreetmap-de, and openstreetmap-fr. I think these projects mainly have the same requirements as we do, so I think having a separate repository for icons that these projects can draw from might make sense. On the other hand, I don't suspect that these projects are willing to contribute manpower to a central repository.

as I said I believe that icons will have to be changed or even re-drawn

Can you expand a bit on that? In what aspect do you think the icons are lacking? You mention that they have too much detail, are you referring to certain icons in particular?

One question is whether we want to stick with the white-on-black template (with a background with rounded corners) as basis icons. If we do, the projects that use the white-on-black version can also keep using our improvements.

[gravitystorm]

I would suggest the following:

• Create sub-directories in the symbols folder ('sjjb', 'maki', 'osm-icons' etc)
• If we're using an unmodified icon from upstream, then reference them directly
• We only need the icons we're actually using in this project, otherwise we'll have thousands of them.
• If we're using a fork of an icon or one made specifically for this project, then they live in e.g. symbols/custom
• If a custom symbol ends up in an upstream project, then we can use that and remove from our repo.

It would be great to use just one set of upstream symbols, but I doubt that will happen. I think it's better to choose appropriate (i.e. similar) icons from various icon sets. Also, I don't think there's much to be gained from us running a semi-separate icon set, since we'll end up maintaining icons that we're not actually using. Of course, if people want to maintain an icon set I'd suggest helping an existing project like maki or sjjb.

[matthijsmelissen]

The style of Maki and SJJB don't fit very well. Osm-icons is a superset of sjjb, and intended to be in the same style. So in practice we are already basically using one icon-set.

I tried getting in touch with @twain47 (both by e-mail and by submitting pull requests), but I haven't received any response. So it doesn't seem he's interested in actively maintaining the repository anymore.

[nebulon42]

In what aspect do you think the icons are lacking?

Some use outlines and fills (e.g. https://github.com/twain47/Open-SVG-Map-Icons/blob/master/svg/money/atm.svg), but to be able to re-colour them we need to have fills only. The icons (at least some) have not been designed with having an eye to the pixel grid. They may look blurry for small sizes. Some icons are rather complex: e.g. https://github.com/twain47/Open-SVG-Map-Icons/blob/master/svg/health/doctors.svg

Of course, finding simple legible icons is not always easy. I personally like the more clean style of Maki icons better. Nevertheless, still a great and rather complete icon set.

Also, I don't think there's much to be gained from us running a semi-separate icon set, since we'll end up maintaining icons that we're not actually using.

That's true. I'm also more in favour of a bottom-up approach. We should start with the icons we are actually using, maybe this will evolve into a more comprehensive icon set.

Maybe it is helpful to agree on a list of features the SVG icons for this project should have. Here is my attempt at such a list:

• flat (single colour, no gradients, no outlines)
• clean (reduced complexity where possible) -> may require several versions/sizes
• sharp (aligned to pixel grid)
• single point of view (avoid use of perspective where possible)
• common canvas size
• code: avoid Inkscape specific code, but use plain SVG (export as...)

[matthijsmelissen]

Thanks for the additional explanation, sounds good so far.

[nebulon42]

For completeness reasons I will put all changed icons also into the following repository: https://github.com/nebulon42/osm-icons

[nebulon42]

I have now experimented a lot and I believe that every icon will have to be re-drawn in order to look good. Maybe even in at least 2 different size versions for some icons. This is quite some work and the result will be closer to the Maki icon set than to the original SJJB icon set, because the Maki people IMO did a great job in producing a clean and legible icon set. It is just too narrow for the needs of this style (but there is a long backlog: https://github.com/mapbox/maki/wiki/Maki-Backlog).

How should we proceed? If I go on I suspect there will be a lot of icon related discussions. Shall I submit a pull request for each of the icons? Shall the icon related discussion happen at the repository (see above) I created to not clutter the discussion here?

Maybe we should also rather try to extend the Maki icon set and use it here like @gravitystorm suggested. This also depends on how easy it is to get new icons into Maki.

Do any of you have any strong style preferences for icons? I thought I read somewhere opinions not in favour of Maki, but I'm not able to find them anymore. As I said I'm willing to do some work here, but creating an icon set that is not used at the end should not happen.

[matkoniecz]

IMHO Maki icons look good, but some are poorly representing intended object (for example bank and wetland).

[nebulon42]

And pharmacy (I first thought it might be a post box). On the other hand, the humanitarian style uses Maki + other (Nori) icons, the whole set looks quite good, but is not available as SVG.
Apologies if I'm repeating some discussion here, but it takes a while to gather all bits together.

[HolgerJeromin]

Could you please add amenity=library to your list?

[nebulon42]

Added it. The initial idea was to have only already proposed icons in the list. Of course the plan is to move all icons to SVG (where possible).

[nebulon42]

Just to let everybody know that I will take a break from proposing new icon PRs for the time being. There has been an abundance of icon PRs lately and this might have been a bit too much, also for me. So this is my contribution to drop a gear on the subject. This is not a "bye" message.

[matkoniecz]

@nebulon42 Thanks for all contributed icons!

[gravitystorm]

@nebulon42 And thanks from me too. You have spent more time than most people working with high-zoom level situations, so if you have other non-icon suggestions for us, we'd appreciate your help there too.

[matthijsmelissen]

@nebulon42 Thanks from me as well!

[daganzdaanda]

Thank you @nebulon42 , you have really earned a holiday! Just look at those "Merged" batches upthread! 8-O

[nebulon42]

Thanks all for feedback and support! ;)

[kocio-pl]

shop=department_store can be checked already.

[nebulon42]

done

[kocio-pl]

Completed with #2754 at last, thanks everybody! Now we have only to convert some remaining patterns (#2045).

[matthijsmelissen]

Great work everybody!