04: Why SVG? Small.

(Updated on )

The size of an SVG file depends on how complex it is, not how “large” it is. Remember SVG’s don’t really care what size they are rendered at, they are flexible and sharp no matter what.

Imagine a 100×100 pixel raster image. That’s 10,000 pixels of information. SVG is just instructions on how to draw something, so if those instructions are simple enough, they can be quite a bit smaller than having to store data on each pixel. It’s a bit more complex than that, as compression comes into play on both sides, but that the overall idea is there.

It’s not quite as simple as “SVG is smaller” though – and there is no set formula for deciding which format to use that is always correct. Sometimes it’s very obvious. A solid shape of the Apple logo? Vector will be smaller for pretty much any size. An illustration of a oak tree with lots of leaves? The vector may be too complicated and a raster image format will be smaller.

Image from a presentation by Todd Parker.

You might just have to save a copy both ways, optimize both, and test the file size.

SVG is typically great for things like:

  • Logos
  • Icons
  • Simple illustrations
  • Charts
  • Maps

I’m betting you already have pretty good intuition on what kind of graphics make sense to be vector.