transform gui icons to svg

[Klumbumbus]

Since we have an icon scaling on hidpi screens now (ticket:9995#comment:110) it would be nice to transform all icons to svg. Preset icons are already all svg (#13357)

Here are the current numbers: 60 svg icons and 270 png icons. This statistic excludes the folders images/presets, images/icons (only potlatch icons), our logo (which exists 6 times as png versions additionally to svg) and two special cases (lambert maps).

svg:

png:

I think we could ask the osm community for help on this subject.

There are two possibilities:

• transform the 270 png to svg
• create a whole new icon set with an consistent look

For the second, there was already such an (not fully complete) dataset, see JOSM themes:

---

progress since creation of this ticket:

[Don-vip]

Replying to Klumbumbus:

For the second, there was already such an (not fully complete) dataset, see JOSM themes. Sadly the links and screenshoots in the forum are no longer available. Maybe we could recover them.

I remember very well. Felis was one of the finalists for the LogoContest and he almost won. It was really a hard thing to choose between the two final designs. I love what he did, too bad we can't have two logos :D

I just sent him an e-mail to let it know about this ticket.

[Felis Pimeja]

FYI, as long as Dropbox has changed sharing mechanics, theme files are now available at:

​https://drive.google.com/file/d/0BzTaubB85qV2cEFPcnA2UTBZbG8/view?usp=sharing

And I'm searching for the source files now.

[bastiK]

Our current icons are partly based on the ​Tango icon theme, which has an svg set. See also ​GNOME set (based on Tango) with icons for download, delete and others.

[bastiK]

Replying to Felis Pimeja:

FYI, as long as Dropbox has changed sharing mechanics, theme files are now available at:

​https://drive.google.com/file/d/0BzTaubB85qV2cEFPcnA2UTBZbG8/view?usp=sharing

And I'm searching for the source files now.

Wow, it's pretty good! I like the black-red color scheme.

[Don-vip]

See also new default theme for Gnome 3: ​https://git.gnome.org/browse/adwaita-icon-theme/

[stoecker]

The colorschemes like black-red do look good, but in my eyes they aren't good as the standard design. This should still be colorful (when possible with a bit more unified style :-).

[bastiK]

How to move forward?

I noticed that some of the vector icons don't scale well down to very small sizes:

Current download icon (24x24px):

Scalable image, rendered at 48x48 px:

Scalable image, rendered at 24x24 px

Just replacing the current download.png by download.svg would be nice for HiDPI users, but clearly is a loss in image quality for everyone else. My conclusion so far is that some scalable images are designed with a certain minimum size in mind and will just look bad when scaled below that limit. This affects some icons more than others, the undo/redo image scales fine for example.

Possible solutions:

• Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
• Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

[Don-vip]

Replying to bastiK:

Possible solutions:

• Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
• Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

I don't think we will succeed to find good SVG icons scalable to small sizes. It's already difficult enough to find a SVG version. This leaves only the second option.

[stoecker]

Replying to Don-vip:

Replying to bastiK:

Possible solutions:

• Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
• Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

I don't think we will succeed to find good SVG icons scalable to small sizes. It's already difficult enough to find a SVG version. This leaves only the second option.

• Change the icons, so that the vanishing elements (usually some sort of boundaries) are wider, so they don't vanish.

E.g. see point 7 here: ​​https://www.creativebloq.com/how-to/10-golden-rules-for-responsive-svgs

[bastiK]

Replying to stoecker:

Replying to Don-vip:

Replying to bastiK:

Possible solutions:

• Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
• Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

I don't think we will succeed to find good SVG icons scalable to small sizes. It's already difficult enough to find a SVG version. This leaves only the second option.

• Change the icons, so that the vanishing elements (usually some sort of boundaries) are wider, so they don't vanish.

E.g. see point 7 here: ​​https://www.creativebloq.com/how-to/10-golden-rules-for-responsive-svgs

This is more the job of a graphics designer that that of a programmer. Take the download icon posted above as an example: How can you modify the SVG without loss of quality in either the 24 px (top) or the 48 px rendering?

Anyway, if we implement option 2, it is still possible to improve the SVGs one by one, as suggested.

[stoecker]

This is more the job of a graphics designer that that of a programmer. Take the download icon posted above as an example: How can you modify the SVG without loss of quality in either the 24 px (top) or the 48 px rendering?

Anyway, if we implement option 2, it is still possible to improve the SVGs one by one, as suggested.

Sure.

But the option 2 means a workaround which again will live MANY years. I personally would rather accept slightly worse low-zoom icons than another workaround.

[stoecker]

P.S. We already had 24x24 menu icons. Maybe default simply should be 30x30 nowadays even for normal screens?

[floscher]

Proposal for SVG icons for the status line

[floscher]

Animated comparison between the statusline icons (current and proposed)

[floscher]

I propose to replace the icons in the statusline with SVG versions.
Below you see a comparison between the current icons (PNG, 18×18 pixels, scaled to 180×180), then how my proposed SVG icons look when converted to a 18×18 raster image scaled up to 180×180 pixels. And finally how the SVG icons look as 180×180 pixel image.

(https://josm.openstreetmap.de/attachment/ticket/15240/statusline-svg.patch is the corresponding patch)

[floscher]

Current appearance of the statusline icons

[floscher]

Proposed appearance of the statusline icons

[floscher]

Before:

After:

[stoecker]

In 13363/josm:

see #15240 replace statusline png icons with svg variants by floscher, set mime-types for many images

[stoecker]

No need to do such a impressive presentation. :) The new images and a before/after is enough. We plan to replace all PNG images anyway.

[Don-vip]

Nice! thank you :)

[Hb---]

References to the old PNG-files are still used in the wiki, please see https://josm.openstreetmap.de/wiki/Help/StatusBar
Wiki has been updated.

[bastiK]

In 13375/josm:

see #15240 - replace image for geoimage layer with svg version (from Tango icon project)

[stoecker]

In 13376/josm:

see #15240 - set proper mime-type

[Klumbumbus]

some icons replaced in #16159

[floscher]

Replacement for misc/black_x.png

[floscher]

Replacement for misc/green_check.png

[floscher]

Replacement for misc/green_check.png

[floscher]

Here are four more:

By the way: Can the icons dialogs/valid and misc/check_large also be replaced by the checkmark above or is there a need for three different green checkmarks?

[stoecker]

In 13613/josm:

see #15240 - new SVG icons

[stoecker]

I didn't replace misc/check_large. It is used in the upload dialog and I'd say it looks better there than the boxy green_check.

[Klumbumbus]

interim result: 246 png icons left :)

[stoecker]

Hmm, are sure that's right? The green check is svg and the large is missing and some icons are in two sizes and 3 blue checkmarks?

[stoecker]

BTW The WMS/TMS related icons are all ugly.

Better ones would be fine.

[Klumbumbus]

It seems you accidently moved the large green check to nodist instead of .

[Klumbumbus]

in the screenshot I scaled all icons to 24px. multiple icons appear when there are different sizes available, e.g.

should be unified when replayed by svg

[Klumbumbus]

Code of the screenshot. Can be used here in wiki with comment preview feature. (But takes a bit to load all images which is why I made the screenshot)

edit: code outdated and removed

[stoecker]

Replying to Klumbumbus:

It seems you accidently moved the large green check to nodist instead of .

Ooops. Can someone please fix this before next build?

[Klumbumbus]

could be a meme: JOSM user level expert: knows the difference between the upload icon and the upload selection icon

[Klumbumbus]

In 13615/josm:

see #15240 - fix moved icons

[Don-vip]

Replying to Klumbumbus:

could be a meme: JOSM user level expert: knows the difference between the upload icon and the upload selection icon

hahaha :D

[floscher]

Replacement for preferences/separator.png

[anonymous]

Replacement for data/closedway.png

[floscher]

Replacement for data/multipolygon.png

[floscher]

Replacement for data/node.png

[floscher]

Replacement for data/sequence.png

[floscher]

Replacement for data/way.png

[floscher]

Replacement for data/sequence.png

[floscher]

Replacement for aligncircle.png

[floscher]

Replacement for dialogs/taginfo.png

[floscher]

And some more:

The last one I changed, because the line around really should be the circle (I think), not the ways connecting the nodes. So I changed the color (if you want some other color, we could change it). And I made the points more irregular to emphasize that the nodes are not evenly distributed around a circle, but only moved to the closest point on a circle.

[stoecker]

Hmm. taginfo does still not look nice. It's the website favicon, but looks ugly. Adding the world logo from the website behind the ti?

[anonymous]

Replying to stoecker:

Hmm. taginfo does still not look nice. It's the website favicon, but looks ugly. Adding the world logo from the website behind the ti?

Don't know if that would work at this resolution (16x16). Probably has to be something simpler.

[Don-vip]

Maybe just frame it with something like

[stoecker]

Or let the t look a bit like a "tag"?

[stoecker]

​https://www.google.de/search?q=icon+tag
They all have a hole inside.
Or simply such a tag with an i or ti inside. When we have something better we'd need to ask Jochen if he likes it.

[Klumbumbus]

Or we pixel align the current taginfo icon a bit to make it look a bit sharper.

Regarding I agree that there should be a circle in the icon instead of a pentagon to better illustrate the align in circle action. However the irregular pattern destroys this illustration again a bit in my opinion. And if you select a way and hit O then the nodes are indeed evenly distributed. The thin light green is pretty hard to recognize on a light background too.

Currently Help/Action/AlignInCircle and Help/Action/CreateCircle use the same icon. While the align action works on single nodes too, the create action always creates a way, so probably the black way lines shouldn't be removed from the create action icon.

My suggestion (but I didn't test how it looks): a circle and even distributed nodes for both icons; for the create action the circle is black and for the align action grey or another color (but a bit darker than the light green).

[floscher]

New version for aligncircle.png

[floscher]

Here's my draft for an alternative TagInfo logo:

And another version of aligncircle: .

@Klumbumbus: Actually it depends on what you select if the nodes distribute equally around the circle: When selecting a way, they do. When selecting only the nodes, they do not distribute evenly around the circle. I thought they were always only jumping to their nearest position on the circle, but it seems to be more complicated.
Anyway, I now changed the icon to show evenly distributed nodes, also for aesthetic reasons. Also the color is now grey. I think a second version in black would be too much, especially because they are too similar… Not that in the end your joke about the download icons really becomes a meme 😉

[stoecker]

Replying to floscher:

Here's my draft for an alternative TagInfo logo:

I contacted Jochen and asked for his opinion.

[stoecker]

In 13630/josm:

see #15240 - new SVG icons made by floscher

[floscher]

Replacement for apply.png

[Klumbumbus]

(replacement for gray_check.png can be derived from the green and blue one too)

[floscher]

Replacement for misc/gray_check.png

[floscher]

You might consider renaming gray_check.svg to grey_check.svg. Next to it there is the file grey_x.png, which uses the other spelling.

[Hb---]

On Plugins the images /browser/trunk/images/misc/black_x.png and ../green_check.png are missing now.

They are placed by a script in the last column to indicate if a plugin needs a restart. The alt parameters for the images are localized. This script needs to be modified.

Replacing the former PNG images with their SVG counterparts will make the page display in the Help Browser worse, because that Browser can't properly resize images currently. Simple characters like ✓ and ✕ may give the same information.

[Klumbumbus]

Did someone fix this already? The icons are displayed fine for me. (I remember that i fixed wiki:JavaBugs and wiki:OldJavaBugs 5 weeks ago and I think that the Plugins page was already working fine a that point.)

Replying to Hb---:

Replacing the former PNG images with their SVG counterparts will make the page display in the Help Browser worse, because that Browser can't properly resize images currently.

That shouldn't be a problem anyway in this case as these two icons have a small base size and shouldn't be resized.

[stoecker]

Replying to Klumbumbus:

Did someone fix this already?

Yes.

[Don-vip]

In 13832/josm:

fix #5603, see #5256, see #15240 - add first/last buttons for geoimage dialog. Fixed shortcuts. Switch to SVG icons taken from ​https://commons.wikimedia.org/wiki/GNOME_Desktop_icons#Navigation

[Don-vip]

In 13837/josm:

see #15240 - convert more GNOME icons to SVG versions. Taken from ​https://commons.wikimedia.org/wiki/Category:GNOME_Desktop_icons

[Klumbumbus]

duplicate icons:

[Don-vip]

In 13844/josm:

see #15240 - remove duplicated icons

[Don-vip]

Replying to stoecker:

I contacted Jochen and asked for his opinion.

any news?

[Don-vip]

Another thing: the icon warnings scripts says bookmark.svg is not used, but it is:

        static ImageIcon getDefaultIcon() {
            return ImageProvider.get("dialogs", "bookmark", ImageSizes.SMALLICON);
        }

[stoecker]

TagInfo image from Jochen Topf

[stoecker]

Jochen sent me this image which he also uses (which is to large for our purpose), but didn't answer whether he likes or does not like the small icon.

I'd say we simply use floscher's icon in JOSM.

[stoecker]

In 13857/josm:

see #15240 - detect another type of ImageProvider calls for in image check script

[Don-vip]

It's nice but the contrast should be increased, it's hard to view the tag on grey background:

[floscher]

Updated TagInfo logo with more contrast

[floscher]

Preview of the context menu with TagInfo logo

[floscher]

Should now be better:

[Don-vip]

In 13860/josm:

see #15240 - use new taginfo icon (by floscher)

[Klumbumbus]

In 13862/josm:

see #15240 - new SVG icons made by floscher

[Klumbumbus]

In 13863/josm:

see #15240 - add svg mime type

[floscher]

Replacements for some icons in the directory images/cursor/modifier:

As well as these two in images/cursor:

[Don-vip]

In 13871/josm:

see #15240 - switch 12 cursor icons to SVG (by floscher)

[Klumbumbus]

Did you accidently not pixel align the red node symbols at these three icons?

[floscher]

Replying to Klumbumbus:

Did you accidently not pixel align the red node symbols at these three icons?

Yes, good catch, thank you! I corrected the icons. And I also made a small modification to the other select-modifiers, which shouldn't change the appearance in JOSM, but in some image viewing programs (e.g. Gimp) the dashed line should display correctly.

[Klumbumbus]

In 13874/josm:

see #15240 - update 9 SVG icons made by floscher, add svg mime type

[Don-vip]

@bastiK @michael2402 The test MapCSSRendererTest.testRender[area-fill-image] is both failing and slower on Jenkins since r13862, could you please have a look? Surprisingly the test is OK on my machine.

[Klumbumbus]

add progress chart to ticket description, little motivation ;)