SVG inline vs <img>, performance and caching

Question

I'm using SVGs extensively for obvious reasons. However I can't find any resources on the best way to implement SVG when performance is a priority. On one hand with inline SVG you have fewer requests, but on the other, using SVGs with the <img> tag allows the browser to cache them. We are talking about a web application where few users make many repeated visits. This makes the <img> approach sound more appealing.

Has anyone come across any benchmarks or has personal experience on the topic ?

Answer 1

The decision of picking inline versus tag would depend on the popularity of your site / app. There is a very interesting article on Yahoo! Perf guidelines page developer.yahoo.com/performance/rules.html which says on an average 60-80% of the users come to your site daily with an empty cache (yuiblog.com/blog/2007/01/04/performance-research-part-2) It totally depends on the popularity of the website - The more popular a site, the chances of a having a non empty cache is more.