2

I am trying to draw a sharp rectangle using SVG <path>.

I have a problem that the top and bottom edge of the shape have an unexpected antialiasing when rendered in IE and Edge. The problem happens only if the <path> element is preceded by another element that has dimensions expressed in different unit than px.

The problem does not appear to <div> or SVG <rect> elements. Only SVG <path> seem to be affected.

I appreciate any help, how do I make the <path> render crisply without changeing the surrounding <div>s?

I can simulate the same problem with a simple SVG object and:

The following screenshot shows the problem. Chrome on the left, Edge on the right. On a zoom, you can see the blurry borders highlighted with the arrows.

enter image description here enter image description here

#div1 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
<div id="div1">REM font size</div>

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 0 L 300 0 L 300 100 L 0 100" />
</svg>
warpech
  • 6,293
  • 4
  • 35
  • 36

1 Answers1

0

The issue is related with svg being in coordinates like 31.2 (not exactly on pixel line). I also found a similar thread. According to the accepted answer, you should design the svg to let its shapes are on pixel boundaries(especially the horizontal and vertical parts of the shapes).

Any time your shape passes through the middle of pixels, you will get grey pixels due to the anti-aliasing that 2D renderers use.

I think it's the not integer value 1.2rem which leads to the svg's coordinates not being on pixel line. I try with integer value and the issue is gone in IE and Edge:

#div1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

#div2 {
  width: 300px;
  height: 100px;
  background: black;
  margin-bottom: 20px;
}
<div id="div1">REM font size</div>

<div id="div2"></div>
<svg xmlns="http://www.w3.org/2000/svg">
   <path d="M 0 0 L 300 0 L 300 100 L 0 100" />
</svg>
Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • Thank you for taking the time and for taking the screenshots. In fact, *there is the same difference on your screenshots` as on mine. You just need to zoom the screenshit in with a graphics software like Paint.NET. This is the close-up of your screenshot: https://imgur.com/a/IoV1lbd – warpech Feb 20 '20 at 08:09
  • @warpech I see. I researched again and you could check my updated answer. – Yu Zhou Feb 21 '20 at 03:28