Closed
Bug 543017
Opened 15 years ago
Closed 15 years ago
Using percentage for x and y coordinates of a bitmap within an SVG image produces image artifacts
Categories
(Core :: SVG, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: mohannad.hussain, Unassigned)
References
()
Details
Attachments
(1 file)
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•15 years ago
|
||
Errors with this are very easy to see, and would be unacceptable even for snapshots or other simple photos.
Comment 2•15 years ago
|
||
Steps to reproduce seem to be from a different bug
Reporter | ||
Comment 3•15 years ago
|
||
They are similar to the other bug I reported (543015) but not the same. They are two related but different bugs.
Comment 4•15 years ago
|
||
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.
Reporter | ||
Comment 5•15 years ago
|
||
Comment 6•15 years ago
|
||
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•15 years ago
|
||
You are scaling one of the images and therefore getting bicubic interpolation. Use image-rendering to avoid this.
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Resolution: --- → INVALID
Comment 8•15 years ago
|
||
Or alternatively fix your viewBox so you aren't scaling the images.
Reporter | ||
Comment 9•15 years ago
|
||
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?
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Comment 10•15 years ago
|
||
We can't draw something at x.5 pixels so we have to scale it to get the width right.
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago → 15 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•