Question

I am using multiple differently colored rectangles to build a SVG data visualization. This works great but sometimes background color bleeds through between the rectangles. I am browsing with Chrome but other browsers seem similarly affected.

http://jsfiddle.net/dVEPk/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10.5" y="10" height="100" width="100"
          style="stroke:none; fill: #00cc00"/>
  <rect x="110.5" y="10" height="100" width="100"
          style="stroke:none; fill: #00cc00"/>
</svg>

In Chrome, if the x offset is an integer, the line is not visible.

I’m sure I can avoid lines by making rectangles a little larger than the space they have to occupy. But this seems like a hack: is there an SVG idiom or best practice to achieve perfectly tiled shapes without “grout”?

I’m also concerned by rendering performance because my visualizations can be very large (say 100MB XML .svg). I’d like to be able to give the renderer hints like “none of the shapes in this <g> are overlapping”?

Answer 1

This is antialiasing at work between the shape and the background. If you want to turn it off set shape-rendering=”crispEdges” on the shapes. You can either set that on the rect elements or on the <svg> in which case the rect elements will inherit it.

You may be able to adjust the line’s positions by adding 0.5 to the co-ordinates. See the cairo FAQ for more details on this.