I know that if you want to scale-up an image, then a SVG is a wise choice.
However, my situation is that I have icons that I want users to be able to upload via a CMS. SVGs are just that bit trickier to create, and so jpg,gif or png seems the ideal format for admins.
If uploaded the same or larger than the display size, and kept in the right ratio, can jpgs, gifs or pngs be as high quality as a SVG when reduced in size?
My assumption would be that browsers need to antialiase a svg below a certain size too, so they are likely to blur just as much as any other format, although gifs do seemingly blur more.
Answer
(Note: please read the OP’s own answer before this one, since my answer is a comment on the OP’s investigation)
This is a known issue of Android Chrome. On some of their builds they disabled anti aliasing causing the vector shapes to be rendered with crisp edges. The reason for this was to reduce the overload created by anti aliasing calculations. Due to complains they released an update that should have enabled anti aliasing back.
There are several threads in Stack Overflow discussing this issue. Here is one of them:
https://stackoverflow.com/questions/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas
I could not find a reference to the same problem on IPod Touch Safari but probably it is safe to extrapolate and assume the problem is the same.
There are ways to try to force the anti aliasing even when it is disabled, such as this trick which basically adds a bit of padding around the element causing the browser for some reason to apply anti aliasing. You can also try to set the shape-rendering attribute of the element to something different than crisp-edges and see if the browser honours it.
Attribution
Source : Link , Question Author : RichardB , Answer Author : Community