Modify

Opened 14 months ago

Last modified 12 months ago

#21482 new enhancement

Tidy, polish or completely update style and preset icons

Reported by: skyper Owned by: team
Priority: normal Milestone: Longterm
Component: Internal preset Version:
Keywords: icon size plain svg Cc: Szem, Klumbumbus

Description (last modified by skyper)

I have started to create some icons the last month and found many room for updates in clean-ups within the svg source code. See e.g. my comment 13 on #21398 but also #20530 and #21440.

  • many icons are still 90 dpi but for screen display 96 dpi is better
  • file size can be drastically lowered as
    • we only need plain optimized svg icons (an option in inkscape with support for the following points)
      • icons contain unused elements
      • default values/settings can be removed
    • some icons contain strange decimal numbers with a lot of digits behind the separator. This does not make sense with icons of 16x16 px.

Sadly, I did not find a script which helps in cleaning up the soucecode of the icons, yet.

Regarding the actual look, icons could be more harmonized in style and colors, at least compared to similar icons, like barrier icons. They can profit from color gradients but pattern seem not to work.

Let's keep track in this ticket and maybe check folder per folder under trunk/resources/images/presets

Attachments (7)

gate-v05-optimized.svg (1.1 KB) - added by Szem 13 months ago.
I made a very simple gate. What do you think is better than the existing one?
ditch.svg (3.3 KB) - added by Szem 13 months ago.
barrier=ditch
ditch-optim.svg (472 bytes) - added by Szem 13 months ago.
Optimized file
organic.svg (3.5 KB) - added by Szem 13 months ago.
organic=*
organic-optim.svg (963 bytes) - added by Szem 13 months ago.
Optimized file
gate-v06.svg (4.6 KB) - added by Szem 13 months ago.
wider + thicker
gate-v07.svg (4.6 KB) - added by Szem 13 months ago.
with curved closure. What do you think? (ALL of icons are my own creations)

Download all attachments as: .zip

Change History (28)

comment:1 Changed 14 months ago by Szem

OK, I've recived the emails :)

comment:2 Changed 14 months ago by skyper

Description: modified (diff)

Heureka, now, I found the option to save "optimized" svg in inkscape with a descent dialog for settings. It is still wise to take a look with an text editor.

comment:3 in reply to:  description ; Changed 13 months ago by Klumbumbus

Replying to skyper:

  • file size can be drastically lowered

This is not really a problem since the icons are minimized automatically by svgcleaner when JOSM is built/distributed. More important for the icons is editability. I sometimes had the probelm with "ultra minified" svg code that these were not simple editable in inkscape.

  • some icons contain strange decimal numbers with a lot of digits behind the separator. This does not make sense with icons of 16x16 px.

True, but when removing decimal places the appearance always needs to be checked in JOSM. When icons are scaled just a single bit differently this can lead to a much worse appearance on 16 px.

comment:4 in reply to:  3 ; Changed 13 months ago by skyper

Replying to Klumbumbus:

Replying to skyper:

  • file size can be drastically lowered

This is not really a problem since the icons are minimized automatically by svgcleaner when JOSM is built/distributed. More important for the icons is editability. I sometimes had the problem with "ultra minified" svg code that these were not simple editable in inkscape.

I see. What is your preferred format then? I wonder why svgcleaner does not remove the useless font attributes.
Still, unused elements should still be removed, in my eyes.

comment:5 in reply to:  4 ; Changed 13 months ago by Klumbumbus

Replying to skyper:

I see. What is your preferred format then?

You can save as "normal" svg or optimized svg in inkscape, I think both will work fine for later editing.

I wonder why svgcleaner does not remove the useless font attributes.

It does or do you have a counter example? (In #21143 there was a problem with fonts different than Droid Sans. We removed the unused font properties from the uncleaned files to get a better overview which icons need to be actually changed. The cleaned code from health\clinic.svg before r18083 was: <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -1036.3621)"><rect fill="#fff" height="16.000046" rx="2.000002" width="16.000008" y="1036.3621"/><g fill="#3771c8" transform="matrix(.85716634 0 0 .85716634 2.859681 150.89059)"><path d="m7.8178461 1041.8617c-.8260795 0-1.4905882.7755-1.4905882 1.7382v6.9336c-.013155 1.0862 1.3917706 1.0862 1.3785772 0v-5.722h.710423v6.5506h4.4223349v-6.5506h.78274v5.722c-.0133 1.0862 1.391832 1.0862 1.378576 0v-6.9342c0-.9625-.665741-1.7381-1.491821-1.7381h-5.6902419z"/><ellipse cx="10.663416" cy="1039.2753" rx="1.91276" ry="1.912785"/></g><path d="m6.0000019 1042.3621h3.000001v-2h-3.000001v-3h-2.0000009v3h-3.000001v2h3.000001v3h2.0000009z" fill="#c00" fill-rule="evenodd"/></g></svg>)

Still, unused elements should still be removed, in my eyes.

Yes unused elements or too much details could be removed. Ususally the uncleaned svgs have a file size below 30KB. If it is larger it could be checked for useless details. See e.g. https://openclipart.org/detail/312240/forklift. If you look at the windshield or the yellow box in inkscape it has unnedded nodes on a nearly straight line. Also the barcode on the box will not be visible in JOSM. These are things which can't be "optimized" automatically by the svgcleaner. When thinking about unnedded details keep in mind that icons will be displayed bigger than 16px, e.g. in the tool bar on hidpi screen I can imagine 64px sizes or even bigger.

However manual editing the svg code by removing default values or comment sections or similar, i.e. everything which will be removed automatically by the svgcleaner is not worth the effort.

Last edited 13 months ago by Klumbumbus (previous) (diff)

comment:6 Changed 13 months ago by Klumbumbus

(In case you didn't already know, to see the automatically cleaned files, just download the josm.jar, rename it to .zip and unzip it.)

comment:7 Changed 13 months ago by Szem

Did I put the two new icons in the right place, or should I have put them here?

Changed 13 months ago by Szem

Attachment: gate-v05-optimized.svg added

I made a very simple gate. What do you think is better than the existing one?

comment:8 in reply to:  7 Changed 13 months ago by skyper

Replying to Klumbumbus:

(In case you didn't already know, to see the automatically cleaned files, just download the josm.jar, rename it to .zip and unzip it.)

Thanks, I did not think about it. No need to rename on Linux. This does not work for new icons, though.

Replying to Szem:

Did I put the two new icons in the right place, or should I have put them here?

It is possible to add links to attachment of other tickets. No need to upload twice. Still, it is better to add attachments to open tickets.
More important is to leave a comment as there are no mails sent about new attachments.

comment:9 Changed 13 months ago by Szem

Hi, What do you think about the simple gate?

Changed 13 months ago by Szem

Attachment: ditch.svg added

barrier=ditch

Changed 13 months ago by Szem

Attachment: ditch-optim.svg added

Optimized file

Changed 13 months ago by Szem

Attachment: organic.svg added

organic=*

Changed 13 months ago by Szem

Attachment: organic-optim.svg added

Optimized file

comment:10 Changed 13 months ago by Klumbumbus

ditch and organic icons are nice, I'll add them, thanks. Did you create these icons yourself, Szem?
Regarding gate I'm note sure if it is better. Icons with transparent background are usually better as they hide less from the aerial image. However in this case the lot small stripes create more clutter. Also I think a wide gate for vehicles is much more common for a gate than a small gate for pedestrians. (More opinions welcome.)

comment:11 Changed 13 months ago by skyper

I made a very simple gate. What do you think is better than the existing one? is nice, but it might be better visible with less bars but thicker ones. Regarding the width, maybe shorten the height a bit but if I e.g. look at OSM-Carto the gate icon is tiny, too.

Changed 13 months ago by Szem

Attachment: gate-v06.svg added

wider + thicker

Changed 13 months ago by Szem

Attachment: gate-v07.svg added

with curved closure. What do you think? (ALL of icons are my own creations)

comment:12 Changed 13 months ago by Klumbumbus

In 18319/josm:

see #21482 - Add Icons for barrier=ditch and organic=* (icons by Szem, GPL3 licensed)

comment:13 Changed 13 months ago by skyper

Should Optimized file be used for shop=organic in the defaultstyle?

comment:14 in reply to:  13 Changed 13 months ago by Klumbumbus

Replying to skyper:

Should Optimized file be used for shop=organic in the defaultstyle?

No, see https://wiki.openstreetmap.org/wiki/Tag:shop=organic

comment:15 Changed 13 months ago by skyper

Ok, then source:trunk/resources/images/presets/misc/deprecated.svg ?

comment:16 in reply to:  15 Changed 13 months ago by Klumbumbus

Replying to skyper:

Ok, then source:trunk/resources/images/presets/misc/deprecated.svg ?

I don't think it is needed. The numbers are low. The validator warns. This icon is mainly used for valid tags which are invalid on nodes (e.g. power=line)

comment:17 Changed 13 months ago by Szem

Did you manage to look at the gate icon?

comment:18 Changed 13 months ago by Szem

Is this icon project closed or are you just dealing with something else?

comment:19 Changed 13 months ago by skyper

I guess, there is just little time for JOSM, atm, and this ticket has lower priority. The milestone "longterm" is another indicator, that this will take some time.
I like the new gate icons but did not test which one fits better.

comment:20 Changed 13 months ago by Szem

Thanks, absolutely no problem, I just didn't know what was going on.

comment:21 in reply to:  5 Changed 12 months ago by skyper

Replying to Klumbumbus:

Replying to skyper:

I wonder why svgcleaner does not remove the useless font attributes.

It does or do you have a counter example?

I was fooled by external icons in the lists in preferences like tagging presets, plugins, etc. See #20849.

2021-12-13 16:59:59.264 WARNING: Could not create font Arial Narrow
2021-12-13 16:59:59.276 WARNING: Could not create font Arial Narrow
2021-12-13 16:59:59.349 SEVERE: Failed to locate image '[[Image(pond.png)]]'
2021-12-13 16:59:59.361 SEVERE: Failed to locate image '[[Image(oil-palm.png)]]'
WARNING: row index is bigger than sorter's row count. Most likely this is a wrong sorter usage.

Modify Ticket

Change Properties
Set your email in Preferences
Action
as new The owner will remain team.
as The resolution will be set.
to The owner will be changed from team to the specified user.
The owner will change to skyper
as duplicate The resolution will be set to duplicate.The specified ticket will be cross-referenced with this ticket
The owner will be changed from team to anonymous.

Add Comment


E-mail address and name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.