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 100x100 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.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.