Last modified: 2014-02-03 16:59:31 UTC
Created attachment 10277 [details] Screenshot on mediawiki.org on iPad w/ Retina display The little search icon in the search box is visibly pixelated on high-resolution screens such as third-generation iPad, or when zooming in on browsers. Recommend using an SVG with a PNG fallback.
For SVG with PNG fallback we have been used the technique described at http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique The magnifying glass icon in the language selector at http://translatewiki.net/ uses SVG graphics in this way.
Pau, this has been discussed on https://gerrit.wikimedia.org/r/#/c/3687/ previously and considere non-viable. Has the situation changed that much in a year?
My proposed technique is slightly different than the one proposed in the patchset. This one is based in the fact that all the browsers that support CSS gradients[1] support also SVG[2]. So this is really cross-browser safe: background: transparent url(fallback-image.png) center center no-repeat; background-image: linear-gradient(transparent, transparent), url(vector-image.svg); With the above rule, only the following browsers will consider the SVG version: IE 10, Firefox 16+, Chrome 26, Opera 12+, Opera Mobile 12.1, Firefox fr android 18.0. All of them supporting SVG. You can even add -webkit prefix version (only with the new syntax) for the gradients and you still be safe with a wider browser support: Crome 10+, iOs safari 5.0+, Android browser 4.0+, and Blackberry browser 10.0 We tested this with crossbrowsertesting.com and used this technique for the graphics on the language selector at http://translatewiki.net/ without problems. [1] http://caniuse.com/css-gradients [2] http://caniuse.com/svg
I created a new patchset so that this can be tested: https://gerrit.wikimedia.org/r/#/c/50355/
It still gets pixelated when zoomed in.
Change 97307 had a related patch set uploaded by M4tx: Added SVG version of search button icon (bug 35336). https://gerrit.wikimedia.org/r/97307
(That patch is blocked by https://gerrit.wikimedia.org/r/#/c/82100/ being merged first. The icon is currently an <img> in page source, which makes using Pau's technique impossible.)
All done now! Thanks.
Change 97307 merged by jenkins-bot: Add SVG version of search button icon https://gerrit.wikimedia.org/r/97307
