.svg files instead

Hi everybody, is there any kind of advantage (or disadvantage) in using .svg-files instead of .jpg or .png files in a webpage??

SVG’s are good because they retain sharpness at any display size. As such, a single file can be used for display on all devices, regardless of device resolution. Of course, SVG’s are a vector format so are not suitable for photographic images. Photos require a format such as JPG or PNG and would normally benefit from having multiple sizes for displaying on different devices - something that Sparkle takes care of for you.

I think the primary advantages are:

  1. smaller file size - which is great when there are a lot of images, or if you use a lot of icons etc

  2. vector images - high quality crispness regardless of display size

  3. editable color/styling - you can usually restyle svgs in multiple ways

…along those lines… I’ve also found Lottie files to be a great version for animations. (with similar benefits)

Thanks to all for the dedicated answers.


Just a note to add that the svg has the size and scaling qualities only if it was born as vector. There is no magic “convert to svg” tool that will make a photo lightweight by converting it to svg.


Thanks Duncan for your note.

Kind regards