0

I have been using Batik with Eclipse for a year, and came across a rendering error I cannot seem to shake. I have reduced it to a minimal set and placed the image on flickr:https://www.flickr.com/photos/dattatreya/15019722962/. I expect to see a solid wide red line crossing a solid yellow wide line. You can see the artifact (error) in the thin yellow line that crosses the red band (along the top edge of the yellow band). I see similar errors in many images I draw.

The SVG code generated by Batik is below. Interestingly, that code was incorrectly rendered by both Safari and Chrome (but not by IE) some time ago, but right now, all browsers seem to work correctly. Only Batik does not.

This could be a Batik bug; if so, I hope they fix it soon!

SVG code generated by Batik for the image:

========================================================

<svg stroke-dasharray="none" shape-rendering="auto"
     xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;"
     text-rendering="auto" fill-opacity="1" contentScriptType="text/ecmascript"
     color-interpolation="auto" color-rendering="auto"
     preserveAspectRatio="xMidYMid meet" font-size="12" fill="black"
     xmlns:xlink="http://www.w3.org/1999/xlink" stroke="black"
     image-rendering="auto" stroke-miterlimit="10" zoomAndPan="magnify"
     version="1.0" stroke-linecap="square" stroke-linejoin="miter"
     contentStyleType="text/css" font-style="normal" stroke-width="1"
     stroke-dashoffset="0" font-weight="normal" stroke-opacity="1">
    <!--Generated by the Batik Graphics2D SVG Generator-->
    <defs id="genericDefs"/>
    <g>
        <g fill="red" stroke="red">
            <path d="M-106.066 106.066 L893.934 1106.066 L1000 1212.1321 L1212.1321 1000 L1106.066 893.934 L106.066 -106.066 L0 -212.132 L-212.132 0 L-106.066 106.066 Z"
                  stroke="none"/>
        </g>
    </g>
    <!--Generated by the Batik Graphics2D SVG Generator-->
    <defs id="genericDefs"/>
    <g>
        <g fill="yellow" stroke="yellow">
            <path d="M106.066 1106.066 L1106.066 106.066 L1212.1321 0 L1000 -212.132 L893.934 -106.066 L-106.066 893.934 L-212.132 1000 L0 1212.1321 L106.066 1106.066 Z"
                  stroke="none"/>
        </g>
    </g>
    <!--Generated by the Batik Graphics2D SVG Generator-->
    <defs id="genericDefs"/>
    <g>
        <defs id="defs1">
            <clipPath clipPathUnits="userSpaceOnUse" id="clipPath1">
                <path d="M500 287.868 L287.868 500 L287.868 500 L500 712.1321 L500 712.1321 L712.1321 500 L500 287.868 Z"/>
            </clipPath>
        </defs>
        <g fill="red" stroke="red">
            <path d="M-106.066 106.066 L893.934 1106.066 L1000 1212.1321 L1212.1321 1000 L1106.066 893.934 L106.066 -106.066 L0 -212.132 L-212.132 0 L-106.066 106.066 Z"
                  clip-path="url(#clipPath1)" stroke="none"/>
        </g>
    </g>
</svg>

=================================================================

Dr. Parasolian
  • 21
  • 2

1 Answers1

0

This is not a Batik bug. It is a "problem" pretty much all graphics libraries will have whether they are SVG renderers or otherwise. It is still visible when I render this in Chrome - it's just less noticeable.

What your SVG does is:

  1. draw a red stripe on the bottom.
  2. then draw a yellow stripe across it
  3. finally it draws a red square to cover the intersection of the two stripes to make it look like the red square is on top.

The reason you are seeing a barely visible yellow line is due to antialiasing. The renderer is drawing partially yellow pixels at the edge of the yellow strip to make the edge of the stripe look more smooth. When you draw the red square on top, some of the yellow pixels are going to remain visible and/or the partially red pixels being drawn on top are letting the yellow show through. The result is a yellowish strip of pixels at the edge.

I guess the question is "why are you not just drawing the red stripe on top of the yellow?" Doing that would fix your problem.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • @BigBadboom: Thanks for your response. (a) While both chrome and safari used to show the error before (in fact, the error was identical to Batik, as if they used Batik for rendering), now, I am unable to see the error in any browser at any magnification. (b) Obviously, my goal is to draw a more complex image, but I have created here a "minimal" set that re-creates the issue (i.e., drawing this particular image another way does not solve the issue). BTW, I am running the latest Eclipse (Luna) and Batik(1.7.0.201309201134). – Dr. Parasolian Aug 25 '14 at 11:45
  • @BigBadboom: Sorry, I take back what I said about Chrome and Safari. On a slightly more complex image, I see the errors in both of them. IE continues to render without this error. – Dr. Parasolian Aug 25 '14 at 11:55
  • You could try giving the overlap square a slightly bigger stroke so that it obscures those border pixels. – Paul LeBeau Aug 25 '14 at 22:46