1199536 - Tinted image background in external SVG included via SVG <image> tag

Status: RESOLVED DUPLICATE of bug 1015575

(Firefox :: Untriaged, defect)

Description

[Denilson Figueiredo de Sá]

Attachment: screenshot-chrome-44-and-firefox-40.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

Steps to reproduce:

1. Download this image: https://openclipart.org/detail/172010/driving-wheel
2. Include it in your HTML+SVG document using <image xlink:href="">
3. For comparison purposes, also include it using HTML's <img> and <object>, and even set it as background-image.

Alternatively, look at this testcase:
http://denilsonsa.github.io/html5-knob/bugs.html#bug-tinted-image-background
https://github.com/denilsonsa/html5-knob/commit/e1cc3518f95f8f6d23e7fcd7c6bdbdf35b5c5f4b


Actual results:

Including the SVG clipart via <image> tag results in a tinted background (semi-transparent gray). This should not happen.


Expected results:

Including via <image> should have looked the same way as the other methods, with a clear fully transparent background.

Look at the attached screenshot, shows Chrome 44 rendering at the top and Firefox 40 at the bottom.

Comment 1

[Robert Longson [:longsonr]]

The imag tag is scaled via a viewBox and by dint of having width/height=1 rather than the actual width/height to be displayed. This causes the filters to work in a pixelated fashion which looks like a grey background. We're tracking this issue in bug 1015575