Sharper and improved uBlock SVG icon(s)

gocemitevski commented 9 years ago

Because of this issue: https://github.com/gorhill/uBlock/issues/800#issuecomment-75024337, I created an alternative version of the uBlock icon, which should scale much better and should render much sharper than the current one.

https://github.com/gocemitevski/uBlock/blob/master/src/img/browsericons/icon16-alt.svg https://github.com/gocemitevski/uBlock/blob/master/src/img/browsericons/icon16-off-alt.svg

Instead of a font-based version of the micro symbol, these icons include a simplified line-based version.

Please try these icons out or help me find out how to test them on my system.

chrisaljoudi commented 9 years ago

@gocemitevski Hmm... a few questions

Which ones are those supposed to replace?

Instead of a font-based version of the micro symbol

There shouldn't be any such SVGs (it's a mistake if there is :(). Can you please share which ones are font-based?

The reason I mention this is that Safari uses the icon16s, and they can't be SVGs for now.

gocemitevski commented 9 years ago

@chrisaljoudi:

Which ones are those supposed to replace?

I created these as a replacement to the 16px SVG icons (/src/img/browsericons/icon16.svg and /src/img/browsericons/icon16-off.svg), but my idea is to create a replacement for the current uBlock icon, which this alternative version will hopefully become.

There shouldn't be any such SVGs (it's a mistake if there is :().

Sorry, I should have been more specific. Font-based meant uses a font generated glyph, so no mistake there. The micro symbol is definitely an outlined shape.

The reason I mention this is that Safari uses the icon16s, and they can't be SVGs for now.

I have no problem generating all required sub-versions of this alternative icon, so no worries about that. I will create all required pixel-based versions, just let me know which file-formats you need.

chrisaljoudi commented 9 years ago

@gocemitevski okay.

To be sure, is this what you expect your SVG to render like?

chrisaljoudi commented 9 years ago

@gocemitevski also, I believe icon16.svg is currently only used for Firefox's toolbar icon. CC @Deathamns.

gorhill commented 9 years ago

I don't want to change what we currently have.

gocemitevski commented 9 years ago

@chrisaljoudi thanks!

http://d.pr/i/RrTM looks fine to me, but here is a proportionally resized 256x256 px version, just in case: https://github.com/gocemitevski/uBlock/blob/master/src/img/browsericons/icon256-alt.png

@gocemitevski also, I believe icon16.svg is currently only used for Firefox's toolbar icon.

Yes, I'm talking about Firefox as well - the small toolbar icon and the Customize panel icon.

gocemitevski commented 9 years ago

@gorhill: why not?

gorhill commented 9 years ago

I don't see an issue, I like it the way it is, and the current one is used in other places like the Opera and Chrome as badge, and it looks all fine.

gocemitevski commented 9 years ago

@gorhill oh, but there is an issue. I wouldn't be wasting my time for nothing.

Here is how the current icon looks in Chrome 41.0.2272.76 m on Windows 7 x64:

Here is how it could look with the new icon:

I see quite an improvement in sharpness, even though the new icon is a bit smaller. However, this is just for reference.

chrisaljoudi commented 9 years ago

@gocemitevski that's odd. The extension manifest for Chrome provides both a 19x19 and a 38x38 png, from which Chrome automatically chooses. Here's what it looks like for me on Chrome 40:

screen shot 2015-03-05 at 1 43 43 pm

It seems to have chosen the 38x38 (@2x) in this case, which is the exact right thing to do.

What kind of display are you getting that on?

gocemitevski commented 9 years ago

@chrisaljoudi: definitely odd.

I'm on a Samsung SyncMaster T220 with no custom DPI set. The icon looks much better for you, though the micro symbol is still a bit blurry, but that's nothing in comparison to what I'm seeing.

gorhill commented 9 years ago

oh, but there is an issue. I wouldn't be wasting my time for nothing

I completely believe you believe there is an issue. I just do not. I don't intend to keep changing all the time the reference SVG because someone disagree with whatever current one we have. It was already taken care by somebody else in #168, this is it now. I just won't change it anymore, it's baked in.

gocemitevski commented 9 years ago

@gorhill it is not a change, but an improvement. The new icon is not radically different or unrecognizable, just simplified and improved.

I don't intend to keep changing all the time the reference SVG because someone disagree with whatever current one we have. It was already taken care by somebody else in #168, this is it now.

This issue is not about our disagreement, my belief or yourself. It is about improving uBlock (on Windows), but obviously you don't care about that. If you did, you would have stayed opened, probably tried uBlock on Windows, checked if the alternative icon is really better or worse and only then make decisions that you just won't change it anymore.

What a shame.

gorhill commented 9 years ago

What a shame.

I can guarantee you somebody else will come along in weeks or months and yet again propose a new improved icon. This is a never ending thing, because there is subjectivity involved, and to highlight this, you actually picked the current icon, not the one you provided, when I asked you which one was better here.

If the problem is that the wrong icon is picked on Windows, then the solution is to investigate if it is the case, and if so to find out why, not to change the now established logo.

gocemitevski commented 9 years ago

I can guarantee you somebody else will come along in weeks or months and yet again propose a new improved icon.

Maybe that's because people are really not satisfied with the current icon and not because they're being picky. Just think about it.

Here is how much the current icon can be improved. Left - current icon. Right - updated version.

uBlock 19px icon blur before after

uBlock 38px icon blur before after

Pretty obvious, I'd say. The larger the icon, the better the anti-aliasing, thus the less the work is needed for improving the sharpness.

If the problem is that the wrong icon is picked on Windows, then the solution is to investigate if it is the case, and if so to find out why, not to change the now established logo.

If this is the real problem, it is present in Firefox, Google and Opera. Tested.

gorhill commented 9 years ago

ublock-blurry-icon-chrome

@gocemitevski What are you doing? In your screenshot, this is not the current uBlock's icon. It's your own version, but apparently scaled up by the browser. Yet you are presenting it as it's the current uBlock's icon.

gocemitevski commented 9 years ago

@gorhill you're right. Not sure how that happened. I probably exported the image without turning off all layers on top. Anyway, that doesn't change anything. The icon is still blurry.

Chrome:

Firefox:

chrisaljoudi commented 9 years ago

@gocemitevski as far as Chrome goes, this appears to be, regrettably, a Chrome issue. Chrome limits the specification of the icon to two versions — 19x19 and 38x38. To quote the Chrome documentation:

If the number of image pixels that fit into one screen space unit equals scale, then image with size scale * 19 will be selected. Initially only scales 1 and 2 will be supported.

This means that if you have a screen that's, say, @1.5x for pixel-perfect assets, you're screwed for now as far as Chrome is concerned. Chrome doesn't support SVGs for toolbar icons as of now.

The choices then are:

Live with this until Chrome fixes their methodology
Change the manifest to only specify the @2x asset, in which case Chrome will downsample it on lower-DPI screens (which wouldn't look great), but that'd mitigate the problem for the @1.5x sort of case

Unfortunately, option 2 isn't logical (the number of non-high-DPI screens way exceeds the number of screens with in-the-middle pixel densities).

As far as Firefox goes, from what I can tell from your screenshot, that's not the icon that ships with uBlock for the Firefox toolbar — is it possible you changed that?

Firefox does accept SVG icons and, as far as I can tell, is being given one (which should look great anywhere).

gocemitevski commented 9 years ago

@chrisaljoudi thanks for the explanation about Chrome.

As far as Firefox goes, from what I can tell from your screenshot, that's not the icon that ships with uBlock for the Firefox toolbar — is it possible you changed that?

Nope. Grabbed from the screen directly. Haven't modified anything.

Here is another screenshot from Firefox on Ubuntu Mate in a VM Ware virtual machine. The uBlock icon is still blurry.

uBlock Firefox Ubuntu Mate

chrisaljoudi commented 9 years ago

@gocemitevski 2eb421d is same as original icon, but renders better on Windows.

gocemitevski commented 9 years ago

@gocemitevski 2eb421d is same as original icon, but renders better on Windows.

Nope. Still blurry and no noticeable difference between the new and the old versions.

What I don't get, is why you keep closing the issues when they're not resolved? Terrible community culture.

Test your add-on on Windows and stop boycotting my reports!

chrisaljoudi commented 9 years ago

@gocemitevski

Test your add-on on Windows

I have, in fact, done that. Firefox 36 and Firefox 34; each on both Windows 8.1 and Windows 7. I wouldn't have closed the issue if I hadn't reproduced the problem you mentioned and saw that the fix resolved it as far as I could tell.

stop boycotting my reports

I'm sorry you feel anyone is boycotting your reports. I've spent the two days since you've posted the last screenshot investigating the Firefox issue.

closing the issues when they're not resolved

If I didn't think the issue was resolved, I wouldn't have closed it. All you really need to say is "it doesn't resolve the issue as far as I can tell."

Nothing against you here, @gocemitevski. Please don't throw negative accusations.

chrisaljoudi commented 9 years ago

@gocemitevski and by the way, the issue gets automatically closed when the commit references it.

I've gone ahead and reopened it.

So, the icon is still blurry with the latest changes? (Note that a new xpi hasn't be released yet, so building it manually is needed for testing for now).

Also, please share your screen resolution (as configured in software).

gocemitevski commented 9 years ago

@chrisaljoudi :

I have, in fact, done that. Firefox 36 and Firefox 34; each on both Windows 8.1 and Windows 7. I wouldn't have closed the issue if I hadn't reproduced the problem you mentioned and saw that the fix resolved it as far as I could tell.

Thank you for doing that.

I'm sorry you feel anyone is boycotting your reports. I've spent the two days since you've posted the last screenshot investigating the Firefox issue.

This is not about how I feel. Re-read the whole thread and you will see that I'm not overreacting and definitely not the one who is being negative.

I've gone ahead and reopened it.

Thank you.

So, the icon is still blurry with the latest changes? (Note that a new xpi hasn't be released yet, so building it manually is needed for testing for now).

I tested 0.9 and the icon is still blurry in the latest versions of Firefox, Chrome and Opera. If there is a newer xpi which is still not released, I will need to repeat my tests once it becomes available and let you know.

Also, please share your screen resolution (as configured in software).

1680x1050 px

gorhill commented 9 years ago

@gocemitevski

Here is how much the current icon can be improved. Left - current icon. Right - updated version.

Where is the svg for this?

gocemitevski commented 9 years ago

@gorhill

Where is the svg for this?

There is no SVG. Those are modified versions of icon19.png and icon38.png - basically edited pixel by pixel and placed in side-by-side compositions.

If you like, you can try using these (just for testing purposes, I know you said you don't want to change the default icon) and if there is visible improvement in rendering, I can then recreate the original icon by applying the same optimization techniques.

chrisaljoudi commented 9 years ago

@gocemitevski Please try the new xpi.

gocemitevski commented 9 years ago

@chrisaljoudi here are a few screenshots I made in Firefox and Chrome. I can't see any difference in comparison to the icon in 0.9.0.0.

Please see here: https://github.com/gocemitevski/uBlock/commit/c8bc75d315852a1d96c8b4ad12670d7233bb9394

gorhill commented 9 years ago

All icons will be generated from the SVG, using Inkscape or GIMP. I do not want handcrafted or re-touched icons, the SVG is the only file which will be used to generate icons. This ensures no pixelation of the icons.

Whatever deemed improvements will have to be in the SVG, and whatever improvement will have to be minimally incremental: no re-design to one's taste, it has to respect the proportions, colors, and overall look of the current logo.

gocemitevski commented 9 years ago

@chrisaljoudi here is what happened when I replaced the default 19px icon with the cleaned version I introduced in https://github.com/gorhill/uBlock/issues/948#issuecomment-77541191.

So the issue is definitely with the 19px icon and not the way Chrome renders it.

gocemitevski commented 9 years ago

@gorhill

All icons will be generated from the SVG, using Inkscape or GIMP. I do not want handcrafted or re-touched icons, the SVG is the only file which will be used to generate icons. This ensures no pixelation of the icons.

Whatever deemed improvements will have to be in the SVG, and whatever improvement will have to be minimally incremental: no re-design to one's taste, it has to respect the proportions, colors, and overall look of the current logo.

Very well. I will soon post samples of how an updated version of the default SVG icon is rendered in Firefox.

gocemitevski commented 9 years ago

@gorhill here are a few samples of the improved 16px SVG icon, which is used in Firefox. I tested it locally and the screenshots are taken during that session.

The SVG files are here: https://github.com/gocemitevski/uBlock/commit/734a1f56d6330fa3299a59dc54c2adda9bb72836

And here is an improved version of the default icon: https://github.com/gocemitevski/uBlock/commit/b7b9a508d88a4161cceff53a81bae5373faf0539

I should note that the 16px SVGs can further be improved if the white outline of the octagon is completely removed, as it is too thin and makes the edges look blurry if the background color is some not enough contrasting color. I could additionally make these improvements, if needed and if you all agree.

chrisaljoudi commented 9 years ago

@gocemitevski I'm afraid I'm confused by your screenshots of 0.9.0.1.

The changes to the SVG only affect Firefox. Chrome uses the PNGs, which aren't currently regenerated (yet).
None of your screenshots seems to be of uBlock 0.9.0.1 running on Firefox. That, as I said, should be fixed.

gorhill commented 9 years ago

I looked at the SVG, and I don't see the point. This is getting tiresome. For the large one, the white border was slightly narrowed, but in effect, once scaled down, there is not really any change, and thus it is pointless to import. For the 16x16 SVG, the border was widened to a point were it's way to large. As far as I am concerned, issue should be closed "by design", enough time has been spent on this.

chrisaljoudi commented 9 years ago

@gocemitevski as @gorhill said, we're done. Your comments are appreciated, but any further discussion about this isn't constructive.

Thank you for the samples of your SVGs. A couple of comments:

The icon you provide is slightly different from the current one (design-wise).
In Chrome, the "cleaner" icon isn't any smoother. Anti-aliasing has been turned off, but that's all. So you're feeding Chrome a non-anti-aliased icon, which Chrome goes ahead and resamples, resulting in a blurry version of the non-anti-aliased icon. In your case, that looks "better" (the resampling causes a sort-of blur; blurring an aliased image looks better than blurring an anti-aliased image).
- The problem with this? In cases where Chrome doesn't have to resample (i.e., on @1x and @2x scenarios), the aliased icon looks like crap:

aliased

The SVG icons have been fixed for Firefox. This is in uBlock 0.9.0.1.

Chrome will not have pixel-perfect icons on certain odd densities (i.e., ones that are neither @1x nor @2x — I explained why in an earlier comment). This issue can't be worked around until Chrome fixes their limitation.

gocemitevski commented 9 years ago

I simply cannot believe what I'm reading.

@chrisaljoudi :

@gocemitevski I'm afraid I'm confused by your screenshots of 0.9.0.1.

I was testing 0.9.0.1 across different browsers. Isn't that what you suggested I should do?

@gorhill :

I looked at the SVG, and I don't see the point. This is getting tiresome. For the large one, the white border was slightly narrowed, but in effect, once scaled down, there is not really any change, and thus it is pointless to import. For the 16x16 SVG, the border was widened to a point were it's way to large. As far as I am concerned, issue should be closed "by design", enough time has been spent on this.

Have you tested the SVGs in Firefox on Windows? I guess not, because you would have noticed the difference which is quite obvious.

The large one is almost the same as the original, but it has pixel-snapping activated - basically does not places lines or shapes on pixel-halfs or values in between and that improves the rendering of resized versions of the icon.

The SVG icons have been fixed for Firefox. This is in uBlock 0.9.0.1.

I have 0.9.0.1-dev.4 installed and they are not fixed, so stop ignoring my proofs.

Again, you're closing the issue without hearing my points. Terrible community culture.

@gocemitevski as @gorhill said, we're done. Your comments are appreciated, but any further discussion about this isn't constructive.

This discussion could be very productive if you're not boycotting whatever I have to say or whatever proof I provide. You're simply not open to suggestions and not being constructive. I have tested your add-on thoroughly on Windows and instead of considering my points, you're somehow trying to prove that I'm wrong, which I AM NOT!

But I agree. We should put an end to this, as I have spent way too much time on this project. You simply don't deserve my time and don't value it.

I'm out.

uBlock-LLC / uBlock

Sharper and improved uBlock SVG icon(s) #948