Replace some shop icons with SVGs

[pnorman]

Icons have been designed keeping in mind the pixel grid, improving sharpness.

New|Old

[pnorman]

I have more, but I'm blocked by mapnik/mapnik#2281

[matthijsmelissen]

Thanks, looks much better (although I still need to get used to the narrow car).

I propose holding off with this PR until we have decided on #277, and in general on the management of icons.

[pnorman]

although I still need to get used to the narrow car

They're both 14px wide. I'm considering moving the wheels out slightly and bringing down the height of the top bar.

[matthijsmelissen]

Did you re-draw the icons, or did you adapt the original SVGs?

[matthijsmelissen]

bringing down the height of the top bar.

Would be a good idea I think.

[pnorman]

Did you re-draw the icons

Redrew. The SVGs are a horrible inkscape mess, and not designed with any eye to the pixel grid at 16px.

As an example, my car SVG is 519 bytes and 11 lines. The SJJB one is 6026 bytes and 145 lines, with little additional visual complexity.

Another issue is the SVG inkscape generates may not work for us anyways

As an example

<g
     id="g1327">
    <path
       d="M 66.275,1.768 C 24.94,1.768 1.704,23.139 1.704,66.804 L 1.704,516.927 C 1.704,557.771 22.598,579.156 63.896,579.156 L 515.92,579.156 C 557.227,579.156 578.149,558.84 578.149,516.927 L 578.149,66.804 C 578.149,24.203 557.227,1.768 514.627,1.768 C 514.624,1.768 66.133,1.625 66.275,1.768 z"
       style="fill:#111111;stroke:#eeeeee;stroke-width:3.40799999"
       id="path1329" />
  </g>

This would, obviously, be very difficult to convert into something I could be sure aligns on a pixel grid. Not so obvious is that it's not clear it would work in Mapnik directly anyways, as I've had problems recolouring SVG icons where they've used a stroke, and moving the colours to the stylesheet is one of the goals of this.

For the car, I wanted to make sure that the outer lines of the body, the top and bottom lines of the bottom, and the sides of the wheel all aligned with pixel boundaries so they wouldn't be antialiased. I also wanted the top line of the car top aligned, but was more concerned about the top of the car body than the bottom of the top bar.

The lights needed to fully encompass a pixel so that one pixel would be 100% transparent, and I wanted the lights to not just be a +, so they needed to be bigger than 1.41 in diameter. If I had placed them like I wanted to initially they'd of been hopelessly blurry, even though they wouldn't have been much different in size.

The supermarket and convenience bars are aligned to only darken one pixel and to have no antialiasing at 200% size.

For the parking icon, all the horizontal and vertical lines on the outside align, but the inner ones don't, rather than the other way around, or splitting it.

[matthijsmelissen]

I propose holding off with this PR until we have decided on #277, and in general on the management of icons.

I created a separate issue for that now, see #659.

[pnorman]

Would be a good idea I think.

[hlaw]

If the aim is to look good at both small pngs and large vector sizes, some rounded corners might perhaps be a good compromise, without hurting the PNG too much, e.g.

[pnorman]

If the aim is to look good at both small pngs and large vector sizes, some rounded corners might perhaps be a good compromise, without hurting the PNG too much, e.g.

Are the differences even noticeable? If you prepare a 600dpi scale factor 5 png of an area I can print it and see.

[hlaw]

Very sorry if I sound nitpicking. I understand that this might just be a matter of subjective taste. Anyway here are the icons at a height of 60px for reference.

[pnorman]

Very sorry if I sound nitpicking. I understand that this might just be a matter of subjective taste. Anyway here are the icons at a height of 60px for reference.

A curved top is a bad idea. Rounded corners might work.

The thing to remember is that these are either displayed at ~14px high, 28px on a retina screen, or 4mm high on a printout. The last is the only one which will actually have the resolution to really distinguish in theory, but having done a printout, I'm somewhat skeptical that you'll be able to tell, even with a magnifying glass.

I considered rounded corners on the wheels, but thought that a firm bottom line would look clearer.

Curved corners will do a few things

A will no longer be a close to 100% fill, and B will have substantially more fill. Before really considering this farther, I'd like to put up a screenshot of the shorter revision at scale.

[matkoniecz]

I strongly prefer the current car icon over what is proposed in the first post.

[pnorman]

I strongly prefer the current car icon over what is proposed in the first post.

What about de26a57?

[pnorman]

I adjusted it a bit more in 402cd6f, I'm now happy with the state of all the icons.