I've got an SVG that contains 3 <image> tags and a <rect> that all have a clip-path applied to them. On all browsers except IEs and Edge the clip-path is applied smoothly along the edges, but on IE it appears jagged.
I've tried applying sharp-rendering="crispEdges"/sharp-rendering="geometricPrecision" to the SVG and all nested elements with no luck.
Here's a screenshot on Edge - Windows 10: https://i.sstatic.net/rhGAL.jpg
The code:
<svg viewBox="0 0 2300 820" width="100%" height="100%" xml:space="preserve" shape-rendering="sharpEdges">
<image width="100%" height="100%" clip-path="url(#myClip)" class="banner-fill" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ content.field_banner_image.0 }}" shape-rendering="sharpEdges"></image>
<image clip-path="url(#myClip)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ content.field_banner_image.0 }}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" shape-rendering="sharpEdges"></image>
<rect clip-path="url(#myClip)" height="100%" width="100%" x="0" y"0" style="fill:rgba(0,0,0,0.5);" shape-rendering="sharpEdges"></rect>
<image clip-path="url(#myClip)" class="banner-blob" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/themes/custom/turley/media/images/banners/shape-4.svg" x="-177px" y="-150px" width="1600" height="1600" shape-rendering="sharpEdges"></image>
<defs>
<clipPath id="myClip">
<path class="st0" d="M2300,0H0v695.2c680.4,90.6,1336.6,143.5,1779.3,118.6c204.4-7.5,383-85,520.7-218.1V0z" shape-rendering="sharpEdges"></path>
</clipPath>
</defs></svg>
