move bicycle shop icon to SVG

[nebulon42]

Implements part of #1165.
Icon: nebulon42/osmic/bicycle-16.svg

before

after

[matthijsmelissen]

New icon looks to much like a motorbike to me. The proportions of bikes in icons are fairly standard, so I think trying to keep the proportions would contribute to legibility.

[althio]

@nebulon42
Proposed tweak for your icon:

• front wheel to the right by 1 pixel
• inclined tube as straight (could be even better, still room for improvement)

I think this look more natural and convincing for a generic bicycle.

[nebulon42]

Sensible suggestion for improvement. I was also thinking of moving the front part, although I couldn't shift the wheel due to the 1px padding required. I have updated the preview and PR.

@althio I encourage you to to do a Pull Request at nebulon42/osmic or against the forked carto-repo if you have a similar suggestion for improvement in the future.

[althio]

@nebulon42

I encourage you to to do a Pull Request at nebulon42/osmic or against the forked carto-repo if you have a similar suggestion for improvement in the future.

Could you expand a bit on how/what/why? I am sorry but I don't fully understand what you are proposing or how it will be more useful. Maybe I lack some GitHub insight...

[nebulon42]

I just meant since you professionally edited my preview image, why not doing your future proposals for improvement on the SVG file and making a pull request towards the branch in my openstreetmap-carto fork. Or - even better - making a pull request at nebulon42/osmic. Just a suggestion.

How will it be more useful? It's more useful for you as you immediately see if your proposed change works or not (admittedly it may be also more work). It's also incredibly more useful for me as I don't have to redo the proposed change on the icon again.

[althio]

Alright thanks for the clarification I understand your comment now.
Unfortunately I am a pixel-editor with bitmap image software, I know almost nothing about vector graphics.
I know it must be a pain for main contributors sometimes but I try to share my insights and ideas with the tools I know. That does not include (yet?) Inkscape, TileMill and many others. Maybe someday... :)

[nebulon42]

I see, maybe you give it a try sometime.

[daganzdaanda]

I've tried to teach myself inkscape with the bike icon... it's really weird if you come from illustrator and none of the keyboard shortcuts work ;)

Since I can't attach a svg, here's a "gist":
https://gist.github.com/daganzdaanda/cfa5165144afb636ef8d

and that is what it approximately looks like in 16 px:

And in 3x the size:

The top row starts with the official german bike sign http://de.wikipedia.org/wiki/Datei:Sinnbild_Radfahrer.svg
Then I have @nebulon42's bicycle and tried some variations.
The proportions of a real life bike are close to 2:1, I guess. So it's tempting to try and fill the square by making the bike higher, but that starts to look weird pretty soon.
@nebulon42, you did a great job of making it look strong at the tiny 16 px. It does look weird in a bigger size :)
I tried to find out which lines are necessary and which can be left out. In a bigger sized icon, I would definitely connect the wheels to the frame (I think that differentiates it from a motorcycle), but I'm not sure of it in the tiny size.
I also tried to find a good width for the lines. Thinner lines are more realistic, but a "fat" one pixel line is much more visible. Probably with better pixel alignment, some of the versions could be much improved.
I've got some favourites in those versions, and @nebulon42's original is one of them. What do you all think?

[nebulon42]

Great work! It would be good if somebody else would express their preferences. The ones in the last line look quite promising to me.

[matthijsmelissen]

I prefer the last ones on row 1 and 3.

[matthijsmelissen]

Any other opinions?

[lest69]

I like the last one on row 3, with the next best being the first on row 4 followed by the last on row 1, although the latter seems a bit blurrier to my eye.

[matkoniecz]

My favorites: first in row 4, last in row 3, last in row 1. Ordered by preference but differences are minor.

[HolgerJeromin]

same for me: first in row 4 or last in row 3.
last in row 1 is a bit to low, but gives more room for more (parking or whatever we want on other icons)

[brycenesbitt]

If it helps, there's an open source bike SVG image in this pull request:
#1353
You're welcome to grab that one, or to get really energetic and make all the bike symbols (bike shop, bike locker, bike repair, bike tool stand) consistent.

[nebulon42]

I have improved the aspect ratio of the bike and made the wheels thinner (see updated preview).

[kocio-pl]

Which one preview? #1281 (comment) or #1281 (comment) maybe?

[brycenesbitt]

@nebulon42 would you be willing to harmonize all the bike symbols (e.g. rental, tools, shop, parking, bike traffic light)?

[nebulon42]

@kocio-pl The preview in the first post.

@brycenesbitt Apart from bike traffic light all icons you mentioned are already there, although I cannot decide about rendering. How do you consider the following icons unharmonized?

bike-rental, bike repair/tools, bike parking, bike shop

If you have new icon requests, feel free to open an issue at nebulon42/osmic

[brycenesbitt]

@nebulon42 good artwork!

Note parking-bicycle-18.svg previews with a missing handlebar.

There also exist some signs for bike air such as:
http://www.bikefixtation.com/images/products/signage/PA012374.jpg

bike-rental unfortunately looks a lot like a common symbol for a bike locker like these:
a) http://home.bikestation.com/ (secured bike parking, with security cameras and a gate)
b) http://www.bikelink.org/ (on demand electronic bike lockers, each holding one bike)
c) http://trimet.org/howtoride/bikes/lockersavailable.htm (reserved bike lockers at given locations: see the icon. one locker per person)

Bike rental also comes in two very different flavors
a) Bike rental (as at tourist spots for round trip travel)
b) Bike share (https://www.citibikenyc.com/ primarily for one way short term travel)

[HolgerJeromin]

@brycenesbitt same with car rental and car sharing. But where is the difference? both needs registration and you get a vehicle.
Rendering the name or operator should make this clear enough

[kocio-pl]

Note parking-bicycle-18.svg previews with a missing handlebar.

Maybe that's because of too small pixel matrix.

[brycenesbitt]

@HolgerJeromin we're off topic here. But car rental and car sharing are strongly different. Car rental I can walk up to with a credit card and a drivers licence and use. Car share locations are unattended and may involve a membership test, filling out forms, and receiving a special token in the mail. A map that sent me to car sharing when I'm looking for car rental has done me a disservice.

@nebulon42 the icon renders without handlebar at huge size, in the SVG rendering on Mozilla Firefox.

[nebulon42]

@brycenesbitt This is by design. This icon is designed for 16x16px size and the bike is very small. So it was necessary to omit a few details. I'm pretty sure it isn't much of an issue at the small size. Naturally, this may look weird at bigger sizes (if you open the icon the canvas is expanded to the available space). But this would require different versions for different sizes, which is currently out of scope for me.

You are right for cars, but at least the bike sharing networks I know enable you to become a member on the spot pretty much the same as in your credit card scenario. But yes there is still a difference to a shop based bike rental.

Anyway, I would be happy if we could return to discussing the bicycle shop icon here. Feel free to open other issues regarding bike rental vs. sharing or also car-related.

[brycenesbitt]

A unifying symbol for shops has been discussed in the past. Out of scope here, but it's definitely odd that shop is the only bike icon that does not have an additional qualifying symbol.

[brycenesbitt]

@nebuon42 : the primary advantage of SVG is that it can render to the resolution of your display device. If the icon was designed for 16x16 pixels, what if it's rendered on a high resolution display? All the detail should be in the SVG, with the 16x16 pixel design as a special case.

[nebulon42]

@brycenesbitt What is your suggestion for an additional symbol?

Re SVG: I'd not like to repeat all the discussion here, please see #632, #1165, #659 and so on. Bottom line is that even if it is SVG you still have some limitations. For the SVG to look sharp it has to be pixel-aligned and displayed at the size it is intended for. If you pack all the details in a 16x16px (or in my case 14x14px) canvas you won't be able to get a crisp representation.

We're still quite off-topic here!

[nebulon42]

Please tell me if you consider to merge the updated version, otherwise I will close this.

[matkoniecz]

One person (with a good eyesight) prefers old one as clearly better, one person (with a poor eyesight) prefers new one as clearly better. Both are clearly recognized as bicycle.

Myself, I am not convinced that either new or old is clearly superior.

I think that I support merging as new one is SVG and readable also for people with worse eyesight.

EDIT: I caught one more person and she preferred a new symbol.

[matkoniecz]

@nebulon42 Thanks for your icons!