SVG: inadvertent white edges between black shapes that are edge to edge

Question

I want to create an svg file that happens to have parallel black squars that are adjacent to each other and have no space between them. I created a simple svg file like this:

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="400">
  <path d="M150 0 L200 0 200 100 L150 100 Z" />
  <path d="M200 0 L250 0 250 100 L200 100 Z" />
</svg>

</body>
</html>

When you zoom in/out then sometimes a thin white line is rendered between the two black rectangles, even though it shouldn't be. It is not, that there is a real defined white line, but you can see that the two black rectangles are separated, which souldn't be the case. The resulting image should look like one black square indepent of the zoom level.

That is the case in every renderer I testet (Adobe Illustrator, Inkscape, Firefox). The embeddet pice of code was tested in http://www.w3schools.com/svg/#

I have searched for the problem but could not find an description of this anywhere else.

Is this really a render issue or am I missing something?

I clarified my post. The white line is thin and only shows on some zoom levels. It is not, that there is a real defined white line, but you can see that the two black rectangles are separated, which souldn't be the case. The resulting image should look like one black square indepent of the zoom level. — Gino Gulamhussene, Mar 30 '16 at 15:51
It's antialiasing and is expected. You can turn it off via shape-rendering: crispEdges — Robert Longson, Mar 30 '16 at 15:54
Hi Roberto, can you make an answer of that and more importantly put the needed code in my sample code? Thaks! =) — Gino Gulamhussene, Mar 30 '16 at 16:00

score 0 · Accepted Answer · answered Apr 26 '16 at 10:31

This is a render issue. Depending on the software you use for viewing the white lines are shown and can change with changing zoom levels. Even when printed those white lines can be present. I saved the svg file as pdf (where the same artifacts were present) and had it proofed. In the proofing the artifacts were not present.

score 0 · Answer 2 · answered Sep 16 '17 at 16:15

The solution would be to merge both paths into one:

<path d="M150 0 L200 0 200 100 L150 100 Z M200 0 L250 0 250 100 L200 100 Z" />

Other solutions are to disable anti aliasing (as long you only have H, V or 45deg lines), or add a black stroke wide enough to the paths.

Full discussion: https://stackoverflow.com/a/46249899/6050364

SVG: inadvertent white edges between black shapes that are edge to edge

2 Answers2