I have an SVG with a .png image which is transformed in the SVG via transform matrix(). I've tested this in IE (9-11); Firefox & Chrome on Win/Mac/iOS, and Safari/Mac. The .png image appears blurry in Chrome on Windows and iOS iPad, but everywhere else it's fine as far as I can tell. Oh, and it's only blurry at 100% - zoom up or down in Chrome and it sharpens up.
I found this here .svg image blurry at specific zoom levels in Chrome and applied fixed dimensions to all DIVs but the parent but that didn't help.
Also tried variations of these solutions but cannot get any to work, or conflict with existing code:
- CSS performance relative to translateZ(0)
- https://github.com/shower/shower/issues/120
- https://stackoverflow.com/a/10814821
- Why does SVG get blurred when scaled under webkit browsers? & https://stackoverflow.com/a/10402470
Here's a Codepen of sample code http://codepen.io/miloz/pen/RWqOrd
<svg x="0" y="0" width="850" height="400" viewBox="0 0 850 400" class="hotspot-position-svg">
<g class="part-g" transform="matrix(0.864,0,0,0.864,356.5,242.5)">
<!-- matrix(1,0,0,1,356.5,242.5) -->
<!-- swap with matrix with scale of x/y = 1 and wheel isn't blurry at 100%. Although it doesn't fit the vehicle correctly of course. -->
<image class="svg-part-image" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49556/FR3Z1K007A-WK_315_rear.png" viewBox="0 0 850 400" partid="19803193" width="81" height="125"></image>
<image class="svg-part-image-mask" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49556/empty.gif" viewBox="0 0 850 400"></image>
</g>
</svg>
The wheels on the car are the pngs in tags in the svg. Change the transform matrix values for scale x/y to 1 and the image is sharp again. Zoom in/out in the browser and it's sharp again.
Any help would be greatly appreciated
