Modify

Opened 6 months ago

Last modified 3 weeks ago

#15240 new enhancement

transform gui icons to svg

Reported by: Klumbumbus Owned by: team
Priority: major Milestone:
Component: Core Version:
Keywords: svg png icon Cc:

Description (last modified by Don-vip)

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 as png versions additionally to svg) and two special cases.

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:





1 or 2 years ago I tried these themes and they looked pretty nice. If we could use this as base there would be less than 270 to be transformed.

Attachments (10)

png_icons.png (161.2 KB) - added by Klumbumbus 6 months ago.
svg_icons.png (22.8 KB) - added by Klumbumbus 6 months ago.
black-red.jpg (5.6 KB) - added by Don-vip 6 months ago.
blue-red.jpg (6.4 KB) - added by Don-vip 6 months ago.
monochrome.jpg (4.9 KB) - added by Don-vip 6 months ago.
standart.jpg (5.1 KB) - added by Don-vip 6 months ago.
statusline-svg.patch (2.2 KB) - added by floscher 4 weeks ago.
Proposal for SVG icons for the status line
statusline.gif (53.3 KB) - added by floscher 4 weeks ago.
Animated comparison between the statusline icons (current and proposed)
statusline-before.png (1.4 KB) - added by floscher 4 weeks ago.
Current appearance of the statusline icons
statusline-after.png (1.2 KB) - added by floscher 4 weeks ago.
Proposed appearance of the statusline icons

Download all attachments as: .zip

Change History (33)

Changed 6 months ago by Klumbumbus

Attachment: png_icons.png added

Changed 6 months ago by Klumbumbus

Attachment: svg_icons.png added

comment:1 Changed 6 months ago by Don-vip

Keywords: svg png icon added
Priority: normalmajor

comment:2 Changed 6 months ago by Klumbumbus

Description: modified (diff)

comment:3 in reply to:  description Changed 6 months ago by 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.

comment:4 Changed 6 months ago by 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.

comment:5 Changed 6 months ago by 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.

comment:6 in reply to:  4 Changed 6 months ago by 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.

Changed 6 months ago by Don-vip

Attachment: black-red.jpg added

Changed 6 months ago by Don-vip

Attachment: blue-red.jpg added

Changed 6 months ago by Don-vip

Attachment: monochrome.jpg added

Changed 6 months ago by Don-vip

Attachment: standart.jpg added

comment:7 Changed 6 months ago by Don-vip

Description: modified (diff)

comment:8 Changed 6 months ago by Don-vip

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

comment:9 Changed 6 months ago by 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 :-).

comment:10 Changed 5 months ago by 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):
https://josm.openstreetmap.de/export/7668/josm/trunk/images/download.png
Scalable image, rendered at 48x48 px:
https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-document-save.svg/48px-Gnome-document-save.svg.png
Scalable image, rendered at 24x24 px
https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-document-save.svg/24px-Gnome-document-save.svg.png

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.

comment:11 in reply to:  10 ; Changed 4 weeks ago by 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.

comment:12 in reply to:  11 ; Changed 4 weeks ago by 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

comment:13 in reply to:  12 ; Changed 4 weeks ago by 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.

comment:14 in reply to:  13 Changed 4 weeks ago by 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.

comment:15 Changed 4 weeks ago by stoecker

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

Changed 4 weeks ago by floscher

Attachment: statusline-svg.patch added

Proposal for SVG icons for the status line

Changed 4 weeks ago by floscher

Attachment: statusline.gif added

Animated comparison between the statusline icons (current and proposed)

comment:16 Changed 4 weeks ago by 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.
Animated comparison between the statusline icons (current and proposed)
(https://josm.openstreetmap.de/attachment/ticket/15240/statusline-svg.patch is the corresponding patch)

Changed 4 weeks ago by floscher

Attachment: statusline-before.png added

Current appearance of the statusline icons

Changed 4 weeks ago by floscher

Attachment: statusline-after.png added

Proposed appearance of the statusline icons

comment:17 Changed 4 weeks ago by floscher

Before:
Current appearance of the statusline icons
After:
Proposed appearance of the statusline icons

comment:18 Changed 4 weeks ago by stoecker

In 13363/josm:

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

comment:19 Changed 4 weeks ago by 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.

comment:20 Changed 4 weeks ago by Don-vip

Nice! thank you :)

comment:21 Changed 4 weeks ago by 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.

Last edited 4 weeks ago by Hb--- (previous) (diff)

comment:22 Changed 3 weeks ago by bastiK

In 13375/josm:

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

comment:23 Changed 3 weeks ago by stoecker

In 13376/josm:

see #15240 - set proper mime-type

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 Klumbumbus
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.