On Thu, 2006-01-05 at 11:55 +0100, Stephen Winnall wrote:
On 5 Jan 2006, at 01:52, mental@...3... wrote:
Any chance you could post the version of the document with the hairline (or even just a simplified document that shows the problem) so I could examine it to confirm my theory?
The following minimal SVG demonstrates the problem. I actually tidied up the coordinates in the semicircle's path with the XML editor so it was clear that the objects were mathematically contiguous: Inkscape itself was not so precise.
Sorry I took so long to get back to you; I've been swamped for the past week. Thank you very much for taking the time to put together a minimal example of the problem.
I can see it is indeed the rendering issue I suspected; the hairline is an artifact of an antialiasing technique used by Inkscape and many other vector graphics renderers.
Essentially, a shape partially covering a pixel is simulated by making that pixel semi-transparent. This looks acceptable in most cases, but there are a few cases it behaves badly for -- exactly adjacent edges, for example.
Here's the deal: when the border between the two shapes doesn't fall exactly on the boundary between pixels (this is why zoom or scrolling can make a difference), you end up with one shape covering part of a pixel, and the other shape covering the remainder.
Shape A: Shape B:
+---+---+ +---+---+ |AAA|...| |...|BBB| |AAA|...| |...|BBB| +---+---+ +---+---+
Obviously, if we overlap these, we should get a pixel whose color is 50% A and 50% B, right?
+---+---+ |AAA|BBB| |AAA|BBB| +---+---+
Well... problem is that by the time they're combined, the renderer has already flattened these partially-covered pixels into flat pixels with transparency (alpha). The information about which portions of the pixel are covered by which colors is lost.
Using only the alpha information, if you composite A at 50% alpha, and B at 50% alpha, you get a pixel whose color is 25% the background color, 25% A, and 50% B (assuming B is "above" A in the stack). Hence, a one-pixel seam of 25% background color shows through...
There are better antialiasing methods available which don't exhibit this problem, but they are less often used because they are generally slower (so are likely to see the problem with other renderers too).
We can't really do anything about how it'll appear in other renderers, but Inkscape should probably implement one of the better antialiasing methods as a special "high-quality" rendering mode.
-mental
Thanks for the feedback. For me, using "combine" was the solution to the problem. You only really need to implement the high-quality rendering mode to fix this problem if there is a situation where you don't want to combine contiguous objects. I can't think of such a situation, but I'm an amateur at SVG...
Steve
On 13 Jan 2006, at 05:39, MenTaLguY wrote:
On Thu, 2006-01-05 at 11:55 +0100, Stephen Winnall wrote:
On 5 Jan 2006, at 01:52, mental@...3... wrote:
Any chance you could post the version of the document with the hairline (or even just a simplified document that shows the problem) so I could examine it to confirm my theory?
The following minimal SVG demonstrates the problem. I actually tidied up the coordinates in the semicircle's path with the XML editor so it was clear that the objects were mathematically contiguous: Inkscape itself was not so precise.
Sorry I took so long to get back to you; I've been swamped for the past week. Thank you very much for taking the time to put together a minimal example of the problem.
I can see it is indeed the rendering issue I suspected; the hairline is an artifact of an antialiasing technique used by Inkscape and many other vector graphics renderers.
Essentially, a shape partially covering a pixel is simulated by making that pixel semi-transparent. This looks acceptable in most cases, but there are a few cases it behaves badly for -- exactly adjacent edges, for example.
Here's the deal: when the border between the two shapes doesn't fall exactly on the boundary between pixels (this is why zoom or scrolling can make a difference), you end up with one shape covering part of a pixel, and the other shape covering the remainder.
Shape A: Shape B:
+---+---+ +---+---+ |AAA|...| |...|BBB| |AAA|...| |...|BBB| +---+---+ +---+---+
Obviously, if we overlap these, we should get a pixel whose color is 50% A and 50% B, right?
+---+---+ |AAA|BBB| |AAA|BBB| +---+---+
Well... problem is that by the time they're combined, the renderer has already flattened these partially-covered pixels into flat pixels with transparency (alpha). The information about which portions of the pixel are covered by which colors is lost.
Using only the alpha information, if you composite A at 50% alpha, and B at 50% alpha, you get a pixel whose color is 25% the background color, 25% A, and 50% B (assuming B is "above" A in the stack). Hence, a one-pixel seam of 25% background color shows through...
There are better antialiasing methods available which don't exhibit this problem, but they are less often used because they are generally slower (so are likely to see the problem with other renderers too).
We can't really do anything about how it'll appear in other renderers, but Inkscape should probably implement one of the better antialiasing methods as a special "high-quality" rendering mode.
-mental
Quoting Stephen Winnall <stephen.winnall@...1146...>:
You only really need to implement the high-quality rendering mode to fix this problem if there is a situation where you don't want to combine contiguous objects.
I can't think of such a situation, but I'm an amateur at SVG...
One of the most common places for this to come up is when people are trying to use shapes with different gradients for various visual effects.
For example, someone might want to put a radial gradient on the semicircle, and a linear gradient on the rectangle. Once they were lined up properly, it'd look like a shiny cylinder with a rounded end.
-mental
participants (3)
-
unknown＠example.com -
MenTaLguY -
Stephen Winnall