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




9 years ago
9 years ago


(Reporter: mohannad.hussain, Unassigned)


Firefox Tracking Flags

(Not tracked)




(1 attachment)



9 years ago
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 and take a screen shot
2. Open up 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

Comment 1

9 years ago
Errors with this are very easy to see, and would be unacceptable even for snapshots or other simple photos.
Steps to reproduce seem to be from a different bug

Comment 3

9 years ago
They are similar to the other bug I reported (543015) but not the same. They are two related but different bugs.
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

9 years ago
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.
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.
You are scaling one of the images and therefore getting bicubic interpolation. Use image-rendering to avoid this.
Last Resolved: 9 years ago
Resolution: --- → INVALID
Or alternatively fix your viewBox so you aren't scaling the images.

Comment 9

9 years ago
I don't think the problem has much to do with scaling. I opened up 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?
Resolution: INVALID → ---
We can't draw something at x.5 pixels so we have to scale it to get the width right.
Last Resolved: 9 years ago9 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.