543017 - Using percentage for x and y coordinates of a bitmap within an SVG image produces image artifacts

Status: RESOLVED INVALID

Description

[Mohannad Hussain]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

Embedding an uncompressed sRGB PNG file into SVG. I wanted to centre the image in the view port so I used x=50% y=50%, however the introduced some very noticeable artifacts in the bitmap. Changing to pixel values for x and y seems to improve the problem, although the bitmap rendering is still not 100% accurate within SVG as per my other ticket (543015).

My workaround is to use Javascript to calculate the center pixel values and inject them into the <image> element.

Adding SVG properties for sRGB color profile and optimizeQuality doesn't seem
to have any affect on this problem. We've seen this problem with Firefox 3.0,
3.5 and 3.6 on Windows, Mac and Linux.

This could also be related to #373960 but I am not 100% sure.

Reproducible: Always

Steps to Reproduce:
1. Open up http://www.go2mk.com/temporary/Firefox_SVG_Bug/pattern-test-before.svg and take a screen shot
2. Open up http://www.go2mk.com/temporary/Firefox_SVG_Bug/pattern-test-after.svg and take another screen shot
3. Compare the two screen shots at a high zoom level (say 800%) and you'll see the (sometimes major) difference in quality.
Actual Results:  
Individual pixel color values are off by as much as 50% percent. In this example both vertical and horizontal patterns suffer quite a bit.

Expected Results:  
Image should come exactly as if it was embedded in an HTML file, which happens
to be very accurate!

The above example works fine using something like Adobe SVG viewer or a Webkit
browser.

Comment 1

[Bill Wallace]

Errors with this are very easy to see, and would be unacceptable even for snapshots or other simple photos.

Comment 2

[Robert Longson]

Steps to reproduce seem to be from a different bug

Comment 3

[Mohannad Hussain]

They are similar to the other bug I reported (543015) but not the same. They are two related but different bugs.

Comment 4

[Robert Longson]

Which element's coordinates do you mean as percentages exactly. The linked image has width="512" height="512" which are not percentages.

What artifacts (add a screenshot using the Add an Attachment button above) and exactly what steps to see these artifacts.

Comment 5

[Mohannad Hussain]

Created attachment 424254 [details]
Image above has <image x="50%" y="50%" and image below has <image x="256px y="256px". Zoomed in at 800% you can easily see the difference.

Comment 6

[Robert Longson]

You're not displaying the images in their original size in both cases. You can use image-rendering: -moz-crisp-edges to avoid this if you want to.

Comment 7

[Robert Longson]

You are scaling one of the images and therefore getting bicubic interpolation. Use image-rendering to avoid this.

Comment 8

[Robert Longson]

Or alternatively fix your viewBox so you aren't scaling the images.

Comment 9

[Mohannad Hussain]

I don't think the problem has much to do with scaling. I opened up http://www.go2mk.com/temporary/Firefox_SVG_Bug/pattern-test-before.svg then used firebug to modify the viewBox to 0 0 512 512, so there's no scaling being done (the PNG image is 512 by 512), not even at a decimal level (which is what I had before), and the problem still occurs.

However, I did notice the problem has to do with the EXACT location of the image on the screen. As I was resizing firebug, each pixel up or down would break or fix the image (after modifying the viewBox to 0 0 512 512). 

I am guessing if the container size becomes and odd number then 50% would produce a decimal, which breaks the horizontal lines. Do you see what I am describing now?

Comment 10

[Robert Longson]

We can't draw something at x.5 pixels so we have to scale it to get the width right.