I need to save out some images for a website project at work. These images will span the full background of the site using background-cover. I first thought that svg would be the correct choice but I couldn't get the file size to anything acceptable. It turned out that jpg or png seemed like it was a better bet now because I could compress it down much smaller.

At work I am being told that I should be using svg for this project but from the research I have done I don't see a way to compress down to a reasonable size. Am I missing some technique to get svg to scale much smaller?

  • is the svg file zipped?
    – joojaa
    Jul 28, 2015 at 20:30
  • I'm not sure what you mean. I saved the image out as svg from Illustrator and then used another service to compress further because I was reading that Illustrator does a poor job at compressing this file type. Jul 29, 2015 at 14:05

1 Answer 1


You need to test the compatibility on diferent target devices, mainly mobil ones to see if your background works.

According to this: http://caniuse.com/#feat=svg-css It is now safe to use it inline.

If the image is a flat design I would use a png. I would not use a svg for background, just for diagrams. I do not think a background needs to be "that" scalable. But this is just me.

The file size of a svg depends on how many nodes you have, gradients, internal incrusted stuff, exessive code. So it is hard to know what is the image about.

  • This doesn't really address the question of file size very well Jul 28, 2015 at 22:08
  • Oh... File size... Right.
    – Rafael
    Jul 28, 2015 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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