adobe illustrator - Can I reduce the file size of an SVG to be closer to its JPEG equivalent?

I have an image that I’m using on a website. I would like to use an SVG so that it can be any size and still look crisp.

• This dropbox contains the SVG file as well as the original Illustrator file.


• 
  

  This is a JPEG export:

  
  
  

  

  
  

The SVG has a much larger file size than the JPG. Is it possible to optimise the SVG so that it has a similar file size? I might be able to lose some of the quality if that would help. I’ve tried this SVG optimiser, but it didn’t make much difference.

If I save the illustrator file as a JPG, trace the result and save it as an SVG, then I get a much smaller file size but some loss of quality. This makes me think that maybe the layers in the original are causing the large size? Is the image that I’m working with just too complex to be suitable for SVG?

Answer

Your SVG contains an embedded pixel graphic for the shade in the bottom right of the controller. This is responsible for about ⅔ of the file size. If you remove it, your SVG file is en par with your JPEG. You can probably achieve an adequately similar effect with a gradient.

Other techniques of reducing SVG file size include:

• Remove all Metadata and similar. Inkscape has Save as plain SVG for this. I suppose that other programs have something similar.



• Remove nodes that add little to the shapes, e.g., there are spurious nodes on your controller’s shape.

This makes me think that maybe the layers in the original are causing the large size?

Unless you are using absurdly many layers (think of one layer for each object), layers should not make a relevant contribution to the file size, and even then, it would only be a fraction.

Is the image that I’m working with just too complex to be suitable for SVG?

If you can reasonably create an image from scratch¹ it should not be too complex for the SVG format. There is no such thing as a magical complexity threshold beyond which file sizes explode (probably this holds for any vaguely reasonable format). Of course, if you only choose the resolution sufficiently coarse, you can export every SVG to a JPEG that has smaller file size. But that does not necessarily mean that you should not use SVGs.

---

^{¹ That is in particular without tracing and similar. To give an extreme example: If you want to exactly reproduce every pixel of a photograph with SVG primitives (i.e., without embedding a pixel graphics in SVG), you might indeed consider the result to be too complex for being efficiently represented in the SVG format. But that’s hopefully common sense.}