0

I am currently developing a web-based application which uses SVG graphics. However, I was shocked to discover that MS Edge does not render the images correctly. Edge seems to ignore the attribute shape-rendering, which is set to crispEdges in order to disable anti-aliasing.

The code snippet below works fine in Chrome, but Edge decides to render it with anti-aliasing and the middle line is thus not perfectly red. With crispEdges the two middle lines are exactly overlapping.

I couldn't find anything on Google as to why this might be the case. Does anybody have an idea why this behaviour occurs and how to fix it?

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke-width="1">
  <line x1="0.5" y1="71.5" x2="71.5" y2="0.5" stroke="rgb(0,0,255)"/>
  <line x1="71.5" y1="0.5" x2="142.5" y2="71.5" stroke="rgb(0,0,255)"/>
  <line x1="71.5" y1="0.5" x2="142.5" y2="71.5" stroke="rgb(255,0,0)"/>
  <line x1="142.5" y1="71.5" x2="213.5" y2="0.5" stroke="rgb(255,0,0)"/>
</svg>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Jason Durham
  • 25
  • 5
  • 1
    `shape-rendering` is a rendering **hint**, not a fixed algorithm, and results are not guaranteed. Look at the [spec](https://svgwg.org/svg2-draft/painting.html#ShapeRendering), implementers have some wiggling room for what they should do: "To achieve crisp edges, the user agent _might_ turn off anti-aliasing...possibly just for straight lines which are close to vertical or horizontal." – ccprog Nov 19 '18 at 00:31
  • Is there a way to enforce the disabling of anti-alisaing? – Jason Durham Nov 19 '18 at 15:08
  • Well, for reference [APNG](https://en.wikipedia.org/wiki/APNG) is 10 years old and Edge still doesn't support it. Just advise your users to move to a browser that is relevant and functional. – Havenard Nov 28 '18 at 17:34

0 Answers0