Page MenuHomePhabricator

Vector: Add SVG version of magnifying-glass icon
Closed, ResolvedPublic


Screenshot on 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.

Version: 1.19
Severity: normal
Whiteboard: gci2013


IMG_0016.PNG (1×2 px, 413 KB)



Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 12:16 AM
bzimport set Reference to bz35336.

For SVG with PNG fallback we have been used the technique described at

The magnifying glass icon in the language selector at uses SVG graphics in this way.

Pau, this has been discussed on 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 and used this technique for the graphics on the language selector at without problems.


maddiemadan wrote:

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

Change 97307 had a related patch set uploaded by M4tx:
Added SVG version of search button icon (bug 35336).

(That patch is blocked by being merged first. The icon is currently an <img> in page source, which makes using Pau's technique impossible.)

Change 97307 merged by jenkins-bot:
Add SVG version of search button icon