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
-
2Small images are probably as much antialiased as large ones, but the proportion of 'blurred' pixels versus filled pixels is logically larger. Imagine your image at 4x4 pixels; then, there are no entirely-filled pixels left. Short of switching off antialiasing (of which I don't know if possible, and would not recommend anyway) there is not much to fix.– JongwareNov 19, 2014 at 21:26
-
I have been testing things out throughout the day. The 20px issue only worked with some .svg images. The stuff I made in illustrator and saved out as svg didn't look as good as some of the .svg graphics I saved out in Illustrator. So maybe some of the settings I picked weren't optimal. I did check in Chrome and Ffox and everything looked very sharp so this antialiasing issue is only in Safari. I will have to see if Safari on PC renders the same way and most importantly on the Tablet.– John DangerousNov 19, 2014 at 23:00
Add a comment
|
1 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
-
Thanks for sharing. I will read up. Everything looked good for me in Safari on the Ipad so all is fine but Safari on the desktop wasn't looking so good in my opinion but didn't matter for this demo Nov 24, 2014 at 21:00
-
1Found this article on how different browsers display SVG.opticalcortex.com/svg-rendering-in-browsers Nov 24, 2014 at 21:04