7

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

  • 2
    Small 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. – usr2564301 Nov 19 '14 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 Dangerous Nov 19 '14 at 23:00
1

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

  • 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 – John Dangerous Nov 24 '14 at 21:00
  • 1
    Found this article on how different browsers display SVG.opticalcortex.com/svg-rendering-in-browsers – John Dangerous Nov 24 '14 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.