CODEWITHSUNDEEP
svg
Charly
Charly

Reputation: 1352

Tiny Border when overlaying two identical SVG Rectangulars

I have a problem with the visualization of two identical rectangles in SVG. The have both the same size and the same position, the bottom one is black and the top one is white:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC  "-//W3C//DTD SVG 1.1//EN" 
                      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_svg   "http://www.w3.org/2000/svg">
    <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="34.017"
      height="70.877" viewBox="0 0 34.017 70.877">
<g id="top_x5F_middle">
    <rect x="11" y="10" fill="black" width="11" height="31"/>
    <rect x="11" y="10" fill="white" width="11" height="31"/>
</g>
</svg>

When viewing them in an viewer (Firefox browser or Inkscape editor) there is a tiny border. The border is different on different zoom levels, so it looks like a problem with the float precision.

Border when viewing in Inkscape Border when viewing in firefox

What is the reason for this border? How to remove it?

PS: I'm not interested in hacks, as making the bottom rectangular smaller etc. This is just an example, the real use-case is much more complex and not to solve with resizing.

Upvotes: 1

Views: 178

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

This is down to antialiasing. When the first rectangle is drawn it is blended with the background which smears it slightly. The same with the second so you get a grey outline.

If you want to avoid this, one way is to disable antialiasing using shape-rendering="crispEdges"

Upvotes: 3

Related Questions