Allow logos with higher resolution

[fepegar]

I accidentally used a large logo for an extension (left) and it looks nicer than the 128x128 ones (right).

The "large" logo takes 229 kB. Is there a reason to limit the size to 128 pixels only? Is it ok if I use a larger image for the new PyTorch extension as well?

[lassoan]

I think at the time the 128x128 size was chosen the screen resolutions were about half or quarter of what we have today. It should be fine to use higher resolution image now.

What is the size of your large logo?

Maybe 512x512 could be a good recommendation now. @jcfr @pieper what do you think?

@fepegar these logos look beautiful. Would you be interested in designing a few icon for Slicer, such as for markups and some segment editor effects?

[fepegar]

What is the size of your large logo?

It's 2048 by 2048. The SVG version has unlimited resolution and is much smaller, 42 KB. Is SVG an option?

@fepegar these logos look beautiful. Would you be interested in designing a few icon for Slicer, such as for markups and some segment editor effects?

Thanks! I don't know anything about design, although I like it. The shape for TorchIO came from a sketch by my partner from a photo of pasta (apparently there's a type of pasta called "torchio"). I liked the lines inside because they suggest a spatial deformation. I used colors from the PyTorch brand guidelines and did some GIMP tutorials to learn how to vectorize the image I originally processed with scikit-image. I also don't consider myself too creative. But ping me if you open a discussion and I'll be happy to help. I was actually looking at the Markups icon yesterday and thought it needs a change. I also thought that it would be nice to have all icons in Slicer vectorized. I think that's possible with Qt5.

[lassoan]

SVG is not that great. It scales up better than bitmaps (no pixelation) but in general you need completely different design for small icons and larger ones. Also, SVG rendering engine in a web browser must be fast and generic, so your small icons will not be pixel perfect (they may even look outright ugly), while you can achieve very nice rendering of a PNG that you have rasterized from SVG with carefully tuned settings.

See for example how bad quality rendering we got when we tried to use an SVG version of the new Slicer icon on a website: https://discourse.slicer.org/t/proposed-new-slicer-logo/11295/113?u=lassoan

[jcfr]

re: 128×128

This decision was made 10 years ago. Increasing it does make sense.

[fepegar]

I think many small icons are SVG nowadays. But again, I don't know much about these. This might help: https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/

I suppose if an SVG icon doesn't look good on a browser it's probably the browser's fault, not the icon's.

[lassoan]

I tested SVG icons in Qt and Chrome about a year ago and they looked very bad. I'm sure you can design them to look nice in small size (avoid thin lines, etc) but it is not trivial.

[jcfr]

tested SVG icons in Qt and Chrome about a year ago

May be interesting to re-assess this. Indeed, as referenced in @lassoan discourse post, opening the link works well for me in Firefox 89.0.2 when make the browser window small.

Firefox 89.0.2

In addition (or instead) of doing a poll on discourse, using services like the following could be interesting:

• For "regular" browser:

  • Browserstack: https://www.browserstack.com/list-of-browsers-and-platforms/screenshots

• For webkit test, these ones could be used:

  • Slicer
  • https://phantomjs.org/
  • https://github.com/phimage/Erik

[lassoan]

SVG rendering of the Slicer icon is still much worse in Firefox and Chromium than a scaled down png:

[jcfr]

Seems like the SVG that was generated improperly set background opacity. May be worth asking Steve Jordan to re-generate them.

See https://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha

[lassoan]

I already asked him to regenerate it with any combination of options that he can, but he could not create anything different. I edited the file manually, too, trying out different settings, but nothing helped. I think simple the contrast of the black outlines is just too strong, compared to just how thin the line is.

I've checked icons in random icon sets and it is quite common issue. The SVG rendering just don't look nice when rendered in small.

OHIF works around this low-quality rendering by using line icons with very thick lines. See examples here: https://github.com/OHIF/Viewers/tree/master/platform/ui/src/elements/Icon/icons

Another workaround is to use fonts, because seem to be scaled down in excellent quality. See this SVG containing a single emoji character). But I'm not sure if this solution would work in Qt.