Advertisement


Do SVG images look better scaled down than a high resolution png, jpg or gif?


Question

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.

2016/04/19
1
15
4/19/2016 11:08:00 AM

Accepted 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.

2017/05/23
7
5/23/2017 12:40:00 PM

I have just run a test and the only difference appears to be on mobile browsers.

I created a 990 x 900px image of the Twitter icon (that icon seems far too detailed a design for good scaling, so good for this test). I saved this as SVG, JPG, GIF, Transparent GIF (just the bird shape, no background colour, instead adding this with CSS), PNG, transparent PNG.

I then shrunk these down to 15px, 25px, 50px, 100px and 150px.

Here's the results in Firefox: enter image description here

Here's the results in Chrome: enter image description here

If we zoom into a screengrab of the smallest results so that we can see what pixels are being generated, then Firefox (top) is slightly darkening the edges on the non-transparent versions, but all other results are very similar.

enter image description here

However, on an IPod Touch Safari browser, the SVG version seems quite blurred, and the others quite pixelated:

enter image description here

A similar result is also seen on Android Chrome. I have not taken a screenshot of this.

I wonder if the reason for this could be something to do with pixel density, which is the main difference in display, though that would make more sense to me if all images were handled differently on mobile, rather than just the SVG one.

If someone can explain why this is the case, then I'll transfer the accepted answer tick. Otherwise, I gues the TL;DR answer is that it depends if you prefer blurred or pixelated icons (or to make lots of icons at pixel perfect sizes for your responsive breakpoints).

edit: I've since observed that svgs are usually far clearer on apple devices - the twitter bird may have been too detailed for this to show up in my tests above, so feel that they are the right format to use for icons.

2016/06/07