SVG images showing up blurry in Safari in any size smaller than 20 px

by

I am doing a mobile demo for the Ipad that we are demoing in Safari. I am using icons to get away from having to scale my images 3x. Problem is that any icons that I am using that are smaller than 20px are blurry on screen until you zoom in. Anyone else experience this problem and know what the fix is? FYI I saved these images out in Illustrator

Answer

Not sure what you’ve all tried. But have you played with shape-rendering: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering.

Similar questions:
https://stackoverflow.com/questions/11895813/svg-shape-rendering-on-ios

https://stackoverflow.com/questions/16889078/turn-off-anti-aliasing-on-svg-when-applying-css3zoom-on-the-element

Attribution
Source : Link , Question Author : John Dangerous , Answer Author : Community

Leave a Comment