Reputation: 157

Microsoft Edge won't render this SVG

Having spent HOURS trying to figure out why my website doesn't work in the new Edge browser, I've narrowed it down to an SVG image. There are many other SVG images on the site, but this specific one causes the page not to render.

Can anyone see what about this file might cause MS Edge issues?

http://codepen.io/MERWIN/pen/BNeGYg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2257 613"><defs><clipPath id="Q"><path d="m9-1h13v-13h-13v13"/></clipPath><clipPath id="P"><path d="m-15 15h30v-23h-30v23"/></clipPath><clipPath id="8"><path d="m46.597 44.998c-1.159 0-2.1.94-2.1 2.102 0 1.158.941 2.097 2.1 2.097 1.16 0 2.1-.939 2.1-2.097 0-1.162-.94-2.102-2.1-2.102m-28 0c-1.16 0-2.101.94-2.101 2.102 0 1.158.941 2.097 2.101 2.097 1.159 0 2.099-.939 2.099-2.097 0-1.162-.94-2.102-2.099-2.102m34 9.1h-40c-2.209 0-4-1.791-4-4v-35c0-2.209 1.791-4 4-4h32l12 12v27c0 2.209-1.791 4-4 4"/></clipPath><clipPath id="J"><path d="m13.802 25.598h19.547v-18h-19.547v18"/></clipPath><clipPath id="L"><path d="m22.507 57.6h10.09v-25.07h-10.09v25.07"/></clipPath><clipPath id="M"><path d="m0 64h64v-64h-64v64"/></clipPath><clipPath id="K"><path d="m37.01 32.529h24.59v-6.932h-24.59v6.932"/></clipPath><clipPath id="N"><path d="m-32 32h64v-64h-64v64"/></clipPath><clipPath id="3"><path d="m5.599 52.1h54v-39h-54v39"/></clipPath><clipPath id="4"><path d="m55.6 52.1h-46c-2.209 0-4-1.791-4-4v-31c0-2.209 1.791-4 4-4h46c2.209 0 4 1.791 4 4v31c0 2.209-1.791 4-4 4"/></clipPath><clipPath id="2"><path d="m32.599 46.32h27v-33.22h-27v33.22"/></clipPath><clipPath id="0"><path d="m0 65.2h65.2v-65.2h-65.2v65.2"/></clipPath><clipPath id="1"><path d="m11.599 28.1h21v-15h-21v15"/></clipPath><clipPath id="7"><path d="m8.597 54.1h48v-43h-48v43"/></clipPath><clipPath id="6"><path d="m32.597 23.1h12v-12h-12v12"/></clipPath><mask id="9"><path d="m-32768 32767h65535v-65535h-65535v65535" fill="url(#A)"/></mask><mask id="E"><path d="m-32768 32767h65535v-65535h-65535v65535" fill="url(#F)"/></mask><radialGradient cx="0" cy="0" r="1" id="W" xlink:href="#H" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.84125-12.81488-12.82329-12.80934 37.843 16.508)"/><radialGradient cx="0" cy="0" r="1" id="T" xlink:href="#C" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.85388-36.77136-36.77136-47.85388 9.697 52.04)"/><radialGradient cx="0" cy="0" r="1" id="V" xlink:href="#G" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.7184-12.69228-12.7006-12.68679 18.15 32.597)"/><radialGradient cx="0" cy="0" r="1" id="U" xlink:href="#D" gradientUnits="userSpaceOnUse" gradientTransform="matrix(53.90006-38.59975-38.59975-53.90006 5.799 51.897)"/><radialGradient cx="0" cy="0" r="1" id="S" xlink:href="#B" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"/><radialGradient cx="0" cy="0" r="1" id="X" xlink:href="#I" gradientUnits="userSpaceOnUse" gradientTransform="matrix(14.38227-14.35309-14.3625-14.34653 42 41.519)"/><radialGradient cx="0" cy="0" r="1" id="R" xlink:href="#5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"/><radialGradient cx="0" cy="0" r="1" id="H" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.84125-12.81488-12.82329-12.80934 37.843 16.508)" xlink:href="#5"/><radialGradient cx="0" cy="0" r="1" id="O" gradientUnits="userSpaceOnUse" gradientTransform="matrix(51.77757 51.77757-51.77757 51.77757-5.558 4.245)"><stop stop-color="#0da960"/><stop offset="1" stop-color="#03914b"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="B" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"><stop stop-color="#4387fd"/><stop offset=".65" stop-color="#3078f0"/><stop offset="1" stop-color="#286ee6"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="A" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"><stop stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="C" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.85388-36.77136-36.77136-47.85388 9.697 52.04)"><stop stop-color="#fdfcf5"/><stop offset=".65" stop-color="#e4e1d1"/><stop offset="1" stop-color="#d0cec1"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="I" gradientUnits="userSpaceOnUse" gradientTransform="matrix(14.38227-14.35309-14.3625-14.34653 42 41.519)"><stop stop-color="#ffd24d"/><stop offset="1" stop-color="#f6c338"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="D" gradientUnits="userSpaceOnUse" gradientTransform="matrix(53.90006-38.59975-38.59975-53.90006 5.799 51.897)"><stop stop-color="#e04a3f"/><stop offset="1" stop-color="#d63e30"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="Y" xlink:href="#O" gradientUnits="userSpaceOnUse" gradientTransform="matrix(51.77757 51.77757-51.77757 51.77757-5.558 4.245)"/><radialGradient cx="0" cy="0" r="1" id="F" gradientUnits="userSpaceOnUse" gradientTransform="matrix(53.0105-39.79906-39.79906-53.0105 5.654 52.1)" xlink:href="#A"/><radialGradient cx="0" cy="0" r="1" id="G" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.7184-12.69228-12.7006-12.68679 18.15 32.597)"><stop stop-color="#0da960"/><stop offset="1" stop-color="#069b5a"/></radialGradient></defs><g transform="translate(100)"><g transform="matrix(9.30226 0 0-9.30226 568.03 616.23)"><path d="m12.596 54.1c-2.208 0-3.999-1.792-3.999-4v-35c0-2.209 1.791-4 3.999-4h32l4.998 7 7 4.998v27c0 2.208-1.791 4-3.999 4h-40m31.901-6.998c0 1.158.94 2.098 2.1 2.098 1.16 0 2.1-.94 2.1-2.098 0-1.162-.94-2.102-2.1-2.102-1.16 0-2.1.94-2.1 2.102m-28 0c0 1.158.941 2.098 2.101 2.098 1.159 0 2.099-.94 2.099-2.098 0-1.162-.94-2.102-2.099-2.102-1.16 0-2.101.94-2.101 2.102" fill="url(#R)"/><g clip-path="url(#0)"><path d="m0 0v-2.203h5.125v-16.516h2.875v22h-2.229c-.826-2.523-3.165-3.244-5.771-3.281" fill="#f2f2f2" transform="translate(36.597 37.816)"/><g clip-path="url(#6)" fill-opacity=".228"><path d="m44.597 23.1v-12h-12l12 12" fill-opacity=".228"/></g><path d="m0 0v12h12l-12-12" fill="#a0c3ff" transform="translate(44.597 11.1)"/><path d="m0 0v.061c1.646.763 2.99 2.41 2.99 4.302 0 3.998-2.838 5.799-6.592 5.799-4.275 0-6.466-2.797-6.671-6.828h2.593c.082 2.461 1.302 4.539 4.078 4.539 2.199 0 3.845-1.219 3.845-3.48 0-2.35-1.923-3.538-4.118-3.538-.367 0-.734 0-1.13.03v-2.196c.488.061 1.037.09 1.556.09 2.562 0 4.608-1.433 4.608-4.148 0-2.625-2.166-4.182-4.698-4.182-2.883 0-4.424 1.86-4.588 4.547h-2.61c.006-4.32 2.875-6.834 7.198-6.834 4.058 0 7.443 2.256 7.443 6.59 0 2.594-1.281 4.668-3.904 5.248" fill="#f2f2f2" transform="translate(29.692 30.936)"/><g clip-path="url(#7)"><g clip-path="url(#8)"><g mask="url(#9)"><path d="m46.597 44.998c-1.159 0-2.1.94-2.1 2.102 0 1.158.941 2.097 2.1 2.097 1.16 0 2.1-.939 2.1-2.097 0-1.162-.94-2.102-2.1-2.102m-28 0c-1.16 0-2.101.94-2.101 2.102 0 1.158.941 2.097 2.101 2.097 1.159 0 2.099-.939 2.099-2.097 0-1.162-.94-2.102-2.099-2.102m34 9.1h-40c-2.209 0-4-1.791-4-4v-35c0-2.209 1.791-4 4-4h32l12 12v27c0 2.209-1.791 4-4 4" fill="url(#S)"/></g></g></g></g></g><g transform="matrix(10.25633 0 0-10.25633-57.43 647.33)"><path d="m55.6 52.1h-46l2-39h42l2 39" fill="url(#T)"/><g clip-path="url(#0)"><g clip-path="url(#1)"><path d="m0 0l-21-14v1l21 14v-1" fill="#d1d1d1" transform="translate(32.599 27.1)"/></g></g><path d="m32.599 35.598l-23 16.499c-2.208 0-3.999-1.791-3.999-3.999v-31c0-2.208 1.791-3.999 3.999-3.999h2v29l21-15 21 15v-29h1.999c2.21 0 4 1.791 4 3.999v31c0 2.208-1.791 3.999-4 3.999l-22.999-16.499" fill="url(#U)"/><g clip-path="url(#0)" fill-opacity=".196"><g clip-path="url(#2)" opacity=".8"><path d="m32.599 27.1l21-14h2c2.209 0 4 1.791 4 4v29.22l-27-19.222" fill-opacity=".196"/></g><g clip-path="url(#3)"><g clip-path="url(#4)" fill-opacity=".196"><g mask="url(#E)" fill-opacity=".196"><path d="m55.6 52.1h-46c-2.209 0-4-1.791-4-4v-31c0-2.209 1.791-4 4-4h46c2.209 0 4 1.791 4 4v31c0 2.209-1.791 4-4 4" fill-opacity=".196"/></g></g></g></g></g><g transform="matrix(8 0 0-8 1151.7 573.78)"><path d="m13.786 7.598l-10.187 17.306 18.908 32.694 10.09-17.442-18.813-32.558" fill="url(#V)"/><path d="m13.776 7.598l10.422 18h37.4l-10-18h-37.823" fill="url(#W)"/><path d="m61.6 25.598h-20.551l-18.547 32h20.19l18.911-32" fill="url(#X)"/><g clip-path="url(#J)" fill-opacity=".199"><path d="m33.35 25.598h-9.157l-10.39-18 19.547 18" fill-opacity=".199"/></g><g fill-opacity=".199"><g clip-path="url(#K)"><path d="m41.05 25.613l20.547-.015-24.59 6.931 4.04-6.916" fill-opacity=".199"/></g><g clip-path="url(#L)"><path d="m28.19 32.529l4.411 7.627-10.09 17.442 5.681-25.07" fill-opacity=".199"/></g></g></g><g transform="matrix(7.40741 0 0-7.40741 1656.75 550.04)" clip-path="url(#M)"><g clip-path="url(#N)" transform="matrix(1 0 0-1 32 32)"><path d="m22-14h-13v-13h-26.547c-2.459 0-4.453 1.994-4.453 4.453v45.05c0 2.459 2.041 4.5 4.5 4.5h35c2.5 0 4.5-2 4.5-4.5v-36.5" fill="url(#Y)"/><g clip-path="url(#P)" opacity=".9"><path d="m13-1h-17v-5h17v5m0 7h-17v-5h17v5m0 7h-17v-5h17v5m-26-5h7v5h-7v-5m0-7h7v5h-7v-5m0-7h7v5h-7v-5m-2-2v1.709.291 5 2 5 2 5 1.843.157h30v-.99-1.01-5-2-5-2-5-.291-1.709h-30" fill="#fff"/></g><g clip-path="url(#Q)" fill-opacity=".196"><path d="m9-14h13v13l-13-13" fill-opacity=".196"/></g><path d="m0 0h-13v-13l13 13" fill="#7bcfa9" transform="translate(22-14)"/></g></g></g></svg>

Viewing the above Codepen page in Edge will also replicate the issue.

Update: It seems that other machines running Windows 10 and MS Edge can render the offending image just fine. Perhaps this is bug with my hardware? I have Lenovo Carobon X1 with 2560x1440 touchscreen.

If others could view the link above with MS Edge, and let me know if the image renders, that would be much appreciated!

Upvotes: 2