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 antialias 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 1

Hello,

No, not necessarily.

SVGs being vectors doesn't have to mean that they are the best format for all situations.

We know the one advantage that SVGs have over any other raster format is their vector properties. What this means is that if the graphic, in your case icons, need enlarged they will keep their quality.

In contrast, small images in other formats could potentially be a better choice over SVGs. For example: one-color icons that will appear at small sizes could be either 8-bit PNGs or GIFs. Albeit GIFs are now mostly used more as animated GIFs rather than static images.

Since you are dealing with users uploading their icons via a CMS, using PNGs/GIFs for your icons is clearer.

Although you can put in place a way for users to upload SVGs, creating an SVG file is a far trickier situation than creating a PNG/GIF.

I could spend a decent amount of time pointing out where creating an SVG could go wrong. But in a few words, creating SVGs requires a certain level of technical knowledge. And your type of users aren't likely to have that knowledge.

The "blurring" you mention is likely an OS+video card thing. I honestly wouldn't worry too much about that.

The one thing you should worry about is the file sizes of the icons uploaded by your users. As long as you keep that under control, the site will run faster and visitors will have a nice UX as per the site speed.

I hope this helps.

Regards.