Hi, I am creating svg documents that contain raster images, included with the <image> tag, and displaying them with Batik. Some of the images are rotated, and I would like their edges to be anti-aliased against the background. I tried setting shape-rendering="geometricPrecision" on the image element, but it doesn't seem to have any effect - on Mac OS X 10.4 some of the edges are anti-aliased regardless and on Windows XP and Ubuntu Edgy the edges are always jagged (I am using Batik trunk updated today).
I tried three work-arounds: i) Apply a clip-path to the image. This improves the appearance on Windows and Linux, but doesn't look as good as (ii) or (iii). On OS X the edges are smooth, but horizontal and vertical lines appear, as if the image has been broken into tiles and not quite aligned properly. ii) Apply a mask to the image. This looks great on Windows and Linux, but on OS X the "tiling" lines appear again, and the edges are a bit strange - it looks like gradients that would smooth the edge out have been applied the wrong way around, mirrored. iii) Draw a line over the edge of the image, the same colour as the background. Draws nice smooth edges on all platforms, but gets tricky if the background is complex. The same behaviour applies to the svg element when the content exceeds the viewBox and overflow is hidden. The example below demonstrates the problem: <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 400 100" shape-rendering="optimizeSpeed"> <defs> <svg id="img" width="98" height="98"> <rect x="-1" y="-1" width="100" height="100" fill="#505050"/> </svg> <image id="img2" width="98" height="98" xlink:href="your-image.jpg" preserveAspectRatio="xMidYMid slice"/> <rect id="clipShape" x="0.5" y="0.5" width="97" height="97"/> <clipPath id="clip" shape-rendering="geometricPrecision"> <use xlink:href="#clipShape"/> </clipPath> <mask id="mask" shape-rendering="geometricPrecision"> <rect x="0.5" y="0.5" width="97" height="97" fill="white"/> </mask> </defs> <g transform="translate(1.7,0) rotate(1)"> <use xlink:href="#img" shape-rendering="geometricPrecision"/> </g> <g transform="translate(101.7,0) rotate(1)"> <use xlink:href="#img" clip-path="url(#clip)"/> </g> <g transform="translate(201.7,0) rotate(1)"> <use xlink:href="#img" mask="url(#mask)"/> </g> <g transform="translate(301.7,0) rotate(1)"> <use xlink:href="#img"/> <rect width="98" height="98" fill="none" stroke="white" stroke-width="1" shape-rendering="geometricPrecision"/> </g> </svg> Thanks in advance to anyone who replies! Regards, Steve Drake -- View this message in context: http://www.nabble.com/Effect-of-shape-rendering-property-tf2586765.html#a7212549 Sent from the Batik - Users mailing list archive at Nabble.com. --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
